/* ============================================================
BidPacket Design System — v1.0
bidpacket-tokens.css
------------------------------------------------------------
SOURCE OF TRUTH for all BidPacket UI values.
Never hard-code a color, font, size, radius, or shadow.
If a value you need is not here, add it as a token FIRST,
then use the var().
Fonts — load once in :
============================================================ */
:root {
/* ---------- Fonts ---------- */
/* Oswald: ALL headings, section labels, button text, project names, badges */
--bp-font-display: 'Oswald', sans-serif;
/* Source Sans 3: everything else (body, inputs, metadata) */
--bp-font-body: 'Source Sans 3', sans-serif;
/* ---------- Brand colors ---------- */
--bp-navy: #1C2B5E; /* THE primary color: primary buttons, sidebar bg, active states */
--bp-navy-hover: #16213f; /* primary button hover; also large heading text */
--bp-navy-600: #23395B; /* secondary navy (charts, tags). NEVER the primary button color */
--bp-navy-tint: #f3f4f9; /* hover fill for secondary/outlined buttons */
--bp-copper: #C58A42; /* accent FILLS and icons ONLY. NEVER text on white */
--bp-copper-text: #8f5f28; /* copper as text (AA-safe on white) */
--bp-copper-fill: #F3ECDF; /* doc-type icon tiles (DOC/XLS/PDF badges), warm badges */
--bp-steel: #6F7785; /* secondary icons, inactive labels */
/* ---------- Neutrals ---------- */
--bp-bg: #F8F8F5; /* app background */
--bp-surface: #ffffff; /* cards / panels */
--bp-inset: #faf9f6; /* file chips, toolbars */
--bp-stage: #f0efea; /* PDF stage behind pages */
--bp-border: #e4e3de; /* default borders / dividers */
--bp-border-strong: #cfceca; /* secondary button outline */
/* ---------- Text ---------- */
--bp-text: #1a1a1a; /* body */
--bp-text-heading: #16213f; /* headings */
--bp-text-muted: #6b6e76; /* subtitles */
--bp-text-faint: #8a8d94; /* metadata */
--bp-text-disabled: #a3a39c;
/* ---------- On-navy (sidebar only) ---------- */
--bp-onnavy-label: #94a0cb; /* muted label */
--bp-onnavy-muted: #8e9bc6; /* muted text */
--bp-onnavy-subtitle: #aeb8d9; /* subtitle */
--bp-onnavy-chip-bg: rgba(255,255,255,.14); /* active chip bg */
--bp-onnavy-chip-border: rgba(255,255,255,.22); /* active chip border */
--bp-onnavy-hover: rgba(255,255,255,.07); /* hover */
--bp-onnavy-tile: #2c3d77; /* thumbnail tile */
/* ---------- State ---------- */
--bp-success: #2F855A;
--bp-success-on-navy: #7ee2a8; /* success green ON the navy band — --bp-success is too dark to read there */
--bp-success-fill: #e8f3ec;
--bp-danger: #C53030;
--bp-danger-fill: #fbeaea;
--bp-warning-text: #8a6116;
--bp-warning-fill: #f7efdc;
/* ---------- Type scale (px minimums — never smaller; 13px absolute floor) ---------- */
--bp-fs-hero: 40px; /* hero / project title — Oswald 600 */
--bp-fs-h1: 28px; /* doc H1 — Oswald 600 */
--bp-fs-card-title: 22px; /* card title — Oswald 600 */
--bp-fs-row-title: 19px; /* row title — Oswald 600 */
--bp-fs-section-label: 13px; /* 13–14 allowed — Oswald 600, UPPERCASE, ls 1.4px */
--bp-fs-body: 17px; /* body — line-height 1.6 */
--bp-fs-ui: 16px; /* buttons / inputs */
--bp-fs-small: 15px;
--bp-fs-meta: 14px;
--bp-fs-caption: 13px; /* ABSOLUTE FLOOR — nothing below 13px */
--bp-lh-body: 1.6;
--bp-ls-section-label: 1.4px;
/* ---------- Marketing type scale ----------
Landing / marketing pages only. In-app screens use the scale above —
nothing here should appear inside the product UI. */
--bp-fs-display: 56px; /* landing H1 */
--bp-fs-display-sm: 40px; /* landing H1 on narrow screens; closing-CTA heading */
--bp-fs-h2: 36px; /* marketing section heading */
--bp-fs-price: 38px; /* pricing figure */
--bp-fs-lead: 20px; /* hero subhead, pricing tier name */
--bp-fs-lead-sm: 18px; /* secondary lead paragraph */
--bp-fs-wordmark: 23px; /* "BidPacket" in the nav */
--bp-fs-step-number: 24px; /* numbered step circles */
/* ---------- Spacing (8px rhythm ONLY) ----------
Token index x 4 = px. */
--bp-space-1: 4px;
--bp-space-2: 8px;
--bp-space-3: 12px;
--bp-space-4: 16px;
--bp-space-5: 20px;
--bp-space-6: 24px;
--bp-space-7: 28px; /* card padding */
--bp-space-8: 32px;
--bp-space-11: 44px;
--bp-space-12: 48px;
--bp-space-16: 64px; /* full-bleed band padding */
--bp-space-18: 72px; /* standard marketing section padding */
--bp-space-22: 88px; /* hero / closing-CTA section padding */
/* ---------- Radius ---------- */
--bp-radius-btn: 10px;
--bp-radius-chip: 9px;
--bp-radius-tile: 11px; /* icon tiles */
--bp-radius-cta: 12px;
--bp-radius-input: 12px;
--bp-radius-card: 14px;
--bp-radius-dropzone: 20px;
/* ---------- Elevation ---------- */
--bp-shadow-card: 0 1px 3px rgba(0,0,0,.05);
--bp-shadow-popover: 0 2px 10px rgba(0,0,0,.12);
--bp-shadow-cta: 0 4px 14px rgba(28,43,94,.3);
--bp-shadow-highlight: 0 4px 14px rgba(28,43,94,.15); /* selected/featured card — softer than CTA */
/* ---------- Motion ---------- */
--bp-transition: .2s ease; /* pane/panel transitions */
/* ---------- Controls ---------- */
--bp-control-h: 44px; /* MINIMUM height for every clickable control */
--bp-control-h-lg: 48px; /* card/row buttons, inputs */
/* ---------- Layout constants ---------- */
--bp-sidebar-w: 300px; /* fixed, navy, collapsible */
--bp-docs-panel-w: 460px; /* docs panel when PDF viewer open */
--bp-docs-panel-min: 380px;
--bp-viewer-min: 420px;
--bp-reading-max: 760px; /* reading column max */
--bp-container-max: 1180px; /* marketing page content container */
}
/* ============================================================
Base
============================================================ */
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--bp-font-body);
font-size: var(--bp-fs-body);
line-height: var(--bp-lh-body);
color: var(--bp-text);
background: var(--bp-bg);
}
h1, h2, h3, h4 {
font-family: var(--bp-font-display);
font-weight: 600;
color: var(--bp-text-heading);
margin: 0;
}
/* ============================================================
Canonical components
============================================================ */
/* Section label: 13–14px Oswald 600, UPPERCASE, letter-spacing 1.4px */
.bp-section-label {
font-family: var(--bp-font-display);
font-size: var(--bp-fs-section-label);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--bp-ls-section-label);
color: var(--bp-text-heading);
}
/* ---- Buttons ----
Rules: every clickable control >= 44px tall; card/row buttons 48px.
ONE navy primary action per view. ONE CTA-class button per screen max.
No solid red buttons, ever. */
.bp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--bp-control-h);
padding: 0 var(--bp-space-6);
font-family: var(--bp-font-display);
font-weight: 500;
font-size: var(--bp-fs-ui);
border-radius: var(--bp-radius-btn);
border: none;
cursor: pointer;
transition: background var(--bp-transition), border-color var(--bp-transition);
text-decoration: none;
}
/* Primary: navy bg, white text. ONE per view. */
.bp-btn-primary {
background: var(--bp-navy);
color: #ffffff;
}
.bp-btn-primary:hover { background: var(--bp-navy-hover); }
/* CTA (Generate/Upload class — max one per screen) */
.bp-btn-cta {
background: var(--bp-navy);
color: #ffffff;
padding: 19px 42px;
min-height: 0;
font-weight: 600;
font-size: 21px;
letter-spacing: .5px;
border-radius: var(--bp-radius-cta);
box-shadow: var(--bp-shadow-cta);
}
.bp-btn-cta:hover { background: var(--bp-navy-hover); }
/* Secondary: white bg, 1.5px border-strong outline, heading-color text */
.bp-btn-secondary {
background: var(--bp-surface);
border: 1.5px solid var(--bp-border-strong);
color: var(--bp-text-heading);
}
.bp-btn-secondary:hover {
border-color: var(--bp-navy);
background: var(--bp-navy-tint);
}
/* Danger: outlined only — NEVER solid red */
.bp-btn-danger {
background: var(--bp-surface);
border: 1.5px solid var(--bp-danger);
color: var(--bp-danger);
}
.bp-btn-danger:hover { background: var(--bp-danger-fill); }
/* Text button (e.g. "↺ Start over") */
.bp-btn-text {
background: transparent;
color: var(--bp-text-faint);
font-size: var(--bp-fs-small);
padding: 0 var(--bp-space-3);
}
.bp-btn-text:hover { color: var(--bp-text-muted); }
/* Card/row-sized buttons */
.bp-btn-lg { min-height: var(--bp-control-h-lg); }
/* Disabled — applies to every variant. Without this a disabled button renders
identically to a live one, so the user clicks it and nothing happens. */
.bp-btn[disabled],
.bp-btn:disabled {
opacity: .45;
cursor: not-allowed;
box-shadow: none;
}
/* ---- Input ---- */
.bp-input {
height: var(--bp-control-h-lg);
width: 100%;
background: var(--bp-inset);
border: 1px solid var(--bp-border);
border-radius: var(--bp-radius-input);
font-family: var(--bp-font-body);
font-size: var(--bp-fs-ui);
color: var(--bp-text);
padding: 0 var(--bp-space-4);
}
.bp-input:focus { outline: none; border-color: var(--bp-navy); }
.bp-input::placeholder { color: var(--bp-text-faint); }
/* ---- Card ---- */
.bp-card {
background: var(--bp-surface);
border: 1px solid var(--bp-border);
border-radius: var(--bp-radius-card);
box-shadow: var(--bp-shadow-card);
}
/* ---- File chip ---- */
.bp-file-chip {
display: flex;
align-items: center;
gap: var(--bp-space-3);
background: var(--bp-inset);
border: 1px solid var(--bp-border);
border-radius: var(--bp-radius-card);
padding: var(--bp-space-3) var(--bp-space-4);
}
.bp-file-chip.is-viewing { border: 1.5px solid var(--bp-navy); }
.bp-file-chip .bp-chip-badge {
width: 44px; height: 44px;
flex: none;
background: var(--bp-navy);
color: #ffffff;
border-radius: var(--bp-radius-tile);
display: flex; align-items: center; justify-content: center;
font-family: var(--bp-font-display);
font-size: var(--bp-fs-caption);
font-weight: 600;
}
.bp-file-chip .bp-chip-name {
font-size: var(--bp-fs-body);
font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-file-chip .bp-chip-meta {
font-size: var(--bp-fs-meta);
color: var(--bp-text-faint);
}
/* ---- Doc-type icon tile (DOC/XLS/PDF) ---- */
.bp-icon-tile {
width: 48px; height: 48px; /* 56px in wide tiles */
flex: none;
background: var(--bp-copper-fill);
color: var(--bp-copper-text);
border-radius: var(--bp-radius-tile);
display: flex; align-items: center; justify-content: center;
font-family: var(--bp-font-display);
font-size: var(--bp-fs-caption);
font-weight: 600;
}
/* ---- Status ---- */
/* "✓ READY" only when ALL documents are done */
.bp-status-ready {
font-family: var(--bp-font-display);
font-size: var(--bp-fs-meta);
font-weight: 600;
color: var(--bp-success);
}
/* Per-item "Generating…" */
.bp-status-generating {
font-size: var(--bp-fs-meta);
color: var(--bp-steel);
}