/* * Supplio v2 "Hybrid Mint" — design tokens * * Single source of truth for v3 redesign. Loaded BEFORE any v3 page stylesheet. * Spec: src/design_handoff_supplio_v3/README.md §3. * * Coexists with css/style.css (v2 legacy) during the v3 build. Once cutover * complete (PR18), v2 sheet is removed. */ /* ============================================================ Fonts — Plus Jakarta Sans (body) + JetBrains Mono (numbers) Loaded via @import to keep link element single + cacheable. Use `font-display: swap` so paint isn't blocked. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ============================================================ :root tokens ============================================================ */ :root { /* --- Color: neutrals --- */ --v2-bg: #f6f7f4; /* page background */ --v2-paper: #ffffff; /* card background */ --v2-paper-alt: #fafbf8; /* alternate section background */ --v2-ink: #0e1a16; /* primary text, dark CTA bg */ --v2-soft: #4a5751; /* secondary text */ --v2-mute: #8a948f; /* labels, placeholders */ --v2-hair: #e3e8e3; /* card borders, dividers */ --v2-hair-soft: #eef1ec; /* inner dividers */ /* --- Color: accents --- */ --v2-mint: #0d8a6a; /* primary accent, positive */ --v2-mint-bg: rgba(13, 138, 106, 0.07); --v2-mint-soft: #d4ebe2; /* light mint, text on dark bg */ /* --- Color: semantic --- */ --v2-red: #c0392b; /* HIGH RISK, errors, losses */ --v2-red-bg: rgba(192, 57, 43, 0.06); --v2-amber: #b87d1a; /* WARNING, manual-review */ --v2-amber-bg: rgba(184, 125, 26, 0.08); /* --- Fonts --- */ --v2-font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --v2-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* --- Type scale (per §3.2) --- */ --v2-size-display-xl: 54px; --v2-size-display-l: 38px; /* range 38-44 per usage */ --v2-size-h1: 28px; /* range 28-32 per usage */ --v2-size-h2: 22px; /* range 22-26 per usage */ --v2-size-body: 14px; /* range 13-14 */ --v2-size-small: 12px; --v2-size-label: 11px; --v2-size-caps: 10.5px; --v2-weight-display: 800; --v2-weight-heading: 800; --v2-weight-h2: 700; --v2-weight-body: 400; --v2-weight-strong: 500; --v2-weight-label: 600; --v2-weight-caps: 700; --v2-lh-body: 1.55; --v2-lh-heading: 1.1; /* 1.05-1.15 range */ --v2-ls-display: -0.03em; --v2-ls-h1: -0.02em; --v2-ls-h2: -0.02em; --v2-ls-caps: 0.12em; --v2-ls-label: 0.02em; /* --- Radii --- */ --v2-radius-sm: 4px; /* small badges */ --v2-radius-md: 8px; /* buttons, inputs */ --v2-radius-lg: 12px; /* cards */ --v2-radius-xl: 14px; /* hero blocks, dark CTA */ --v2-radius-pill: 999px; /* --- Spacing scale (4-based) --- */ --v2-space-1: 4px; --v2-space-2: 8px; --v2-space-3: 12px; --v2-space-4: 16px; --v2-space-5: 20px; --v2-space-6: 24px; --v2-space-7: 32px; --v2-space-8: 40px; /* --- Card padding presets (§3.3: 16/20/22-24) --- */ --v2-card-pad-sm: 16px; --v2-card-pad-md: 20px; --v2-card-pad-lg: 22px; --v2-card-pad-xl: 24px; /* --- Shadows (§3.4) --- */ --v2-shadow-card: 0 1px 0 rgba(15, 25, 21, 0.02); --v2-shadow-lift: 0 8px 32px rgba(13, 138, 106, 0.06); --v2-shadow-cta: 0 24px 64px rgba(15, 25, 21, 0.08); /* --- Transition presets --- */ --v2-trans-fast: 120ms ease-out; --v2-trans-slow: 200ms ease-out; } /* ============================================================ Reset / base — scoped via .v2 class so legacy v1 pages aren't affected. Bare `.v2` selector (no dash) intentional — matches . (Previously `.v3` pre-rename; missed by Python sweep regex `\.v3-` which required a dash. Penalty -154 root cause.) ============================================================ */ .v2, .v2 * { box-sizing: border-box; } .v2 { background: var(--v2-bg); color: var(--v2-ink); font-family: var(--v2-font-body); font-size: var(--v2-size-body); line-height: var(--v2-lh-body); font-weight: var(--v2-weight-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .v2 h1, .v2 h2, .v2 h3, .v2 h4 { font-family: var(--v2-font-body); font-weight: var(--v2-weight-heading); line-height: var(--v2-lh-heading); letter-spacing: var(--v2-ls-h1); color: var(--v2-ink); margin: 0; } .v2 p { margin-top: 0; margin-bottom: 0; /* Left/right margins NOT reset so children like .v2-hero__sub can use margin: 0 auto */ } .v2 a { color: var(--v2-mint); text-decoration: none; transition: color var(--v2-trans-fast); } .v2 a:hover { color: var(--v2-ink); } .v2 code, .v2 .v2-mono, .v2 .v2-num { font-family: var(--v2-font-mono); font-variant-numeric: tabular-nums; } /* ============================================================ Type utility classes ============================================================ */ .v2-display-xl { font-size: var(--v2-size-display-xl); font-weight: var(--v2-weight-display); letter-spacing: var(--v2-ls-display); line-height: 1.05; } .v2-display-l { font-size: var(--v2-size-display-l); font-weight: var(--v2-weight-display); letter-spacing: -0.025em; line-height: 1.05; } .v2-h1 { font-size: var(--v2-size-h1); font-weight: var(--v2-weight-heading); letter-spacing: var(--v2-ls-h1); } .v2-h2 { font-size: var(--v2-size-h2); font-weight: var(--v2-weight-h2); letter-spacing: var(--v2-ls-h2); } .v2-body { font-size: var(--v2-size-body); font-weight: var(--v2-weight-body); } .v2-body-strong { font-size: var(--v2-size-body); font-weight: var(--v2-weight-strong); } .v2-small { font-size: var(--v2-size-small); font-weight: var(--v2-weight-strong); color: var(--v2-soft); } .v2-mute { color: var(--v2-mute); } .v2-label { font-size: var(--v2-size-label); font-weight: var(--v2-weight-label); letter-spacing: var(--v2-ls-label); color: var(--v2-mute); } .v2-caps { font-size: var(--v2-size-caps); font-weight: var(--v2-weight-caps); letter-spacing: var(--v2-ls-caps); text-transform: uppercase; color: var(--v2-mute); } /* ============================================================ Card pattern (§3.6) ============================================================ */ .v2-card { background: var(--v2-paper); border: 1px solid var(--v2-hair); border-radius: var(--v2-radius-lg); padding: var(--v2-card-pad-lg); box-shadow: var(--v2-shadow-card); } .v2-card--lift { box-shadow: var(--v2-shadow-lift); } .v2-card--cta { box-shadow: var(--v2-shadow-cta); } .v2-card--dark { background: var(--v2-ink); color: var(--v2-paper); border: none; border-radius: var(--v2-radius-xl); } .v2-card--paper-alt { background: var(--v2-paper-alt); } /* ============================================================ Button patterns ============================================================ */ .v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--v2-radius-md); padding: 10px 18px; font-family: var(--v2-font-body); font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; transition: background var(--v2-trans-fast), color var(--v2-trans-fast), border-color var(--v2-trans-fast), transform var(--v2-trans-fast); text-decoration: none; } .v2-btn--primary { background: var(--v2-ink); color: var(--v2-paper); } .v2-btn--primary:hover { background: #1a2520; color: var(--v2-paper); } .v2-btn--secondary { background: var(--v2-paper); color: var(--v2-ink); border-color: var(--v2-hair); } .v2-btn--secondary:hover { background: var(--v2-paper-alt); color: var(--v2-ink); } .v2-btn--mint { background: var(--v2-mint-soft); color: var(--v2-ink); } .v2-btn--mint:hover { background: #c0e1d4; color: var(--v2-ink); } .v2-btn--lg { padding: 12px 22px; font-size: 14px; border-radius: 10px; } .v2-btn--sm { padding: 8px 14px; font-size: 12px; } .v2-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ============================================================ Dashboard button variants — single-hyphen names because they are referenced from multiple dashboard subpages via class="v2-btn-mint" / class="v2-btn-secondary" (legacy naming pre-dating BEM convention). Must live in v2-tokens.css (NOT inline page