/* ============================================================ Currant — Design Tokens (pure variables only) Single source of truth for the currant.work static site. LOAD ORDER (in ): 1) fonts.css — font loading (Google Fonts + Recoleta @font-face) 2) tokens.css — this file (CSS variables) 3) base.css — reset + element defaults + layout/utilities 4) components.css — buttons, cards, status chips, nav, footer Palette = BRANDBOOK values. RESOLVED 2026-06-07 by pixel-sampling the brand mockup (Brandbook.png): every rendered swatch matched the Brandbook hexes, not the (retired) Design System text doc. DS-alt hexes kept inline for reference only. ============================================================ */ :root { /* ---------- Brand colors ---------- */ --color-currant: #FF4D7D; /* primary: CTAs, active states, highlights, "Deep" */ --color-berry: #B456F4; /* DS-alt: #7C4DFF — secondary accent, "Flowing" */ --color-ochre: #F6C453; /* DS-alt: #FFB340 — warning / "Slammed" tier */ --color-seafoam: #3DD6C3; /* DS-alt: #22C5B3 — success / "Fresh" tier */ --color-ink: #22252E; /* DS-alt: #0F172A — text, dark UI */ --color-stone: #E6E2D8; /* DS-alt: #E9E6E1 — card surfaces, dividers, "Away" */ --color-sky: #4F8DF5; /* blue — "Flowing" status */ --color-flame: #FF6B3D; /* orange — "Slammed" status (pressure) */ --color-button: #16181D; /* near-black, solid — primary CTA fill (per Brandbook) */ /* ---------- Surfaces / backgrounds ---------- */ --color-cream: #F5F0E8; /* page background — NEVER pure white */ --color-surface: #FFFFFF; /* cards on top of cream */ --color-surface-alt: #FBF8F2; /* subtle alternate section band */ --color-divider: #E6E2D8; /* = stone */ /* ---------- Text ---------- */ --color-text: #22252E; /* = ink */ --color-text-muted: #5B5E66; /* secondary copy, captions */ --color-text-subtle: #8A8D94; /* labels, timestamps, axis ticks */ --color-text-invert: #FFFFFF; /* on dark / on primary button */ /* ---------- Gradients (logo, chart fills, hero accents — NEVER on text/buttons) ---------- */ --gradient-currant-flow: linear-gradient(90deg, #FF4D7D 0%, #FF6F4E 50%, #FF9A3D 100%); /* pink → orange (matches logo) */ --gradient-berry-flow: linear-gradient(90deg, #FF4D7D 0%, #B456F4 100%); /* pink → purple */ --gradient-chart-fill: linear-gradient(180deg, rgba(255,77,125,0.18) 0%, rgba(255,77,125,0) 100%); /* page wash — the OG-image corner glow (pink → orange, fading out top-left → centre) */ --gradient-page-wash: linear-gradient(135deg, rgba(255,77,125,0.13) 0%, rgba(255,111,78,0.06) 30%, rgba(255,154,61,0) 62%); /* ---------- Status-state colors (product vocabulary) ---------- Labels rendered in UI: Fresh · Flowing · Slammed · Deep · Away · Paused. NB: "Slammed" replaced the old label "Slow"; the token key stays --status-slow (ochre) so existing references keep working. An alias --status-slammed is provided for clarity in new code. */ --status-fresh: #3DD6C3; /* seafoam green — replies normal */ --status-flowing: #4F8DF5; /* blue — within a couple hours */ --status-slow: #FF4D7D; /* Currant pink — heavy load, "Slammed" */ --status-slammed: var(--status-slow); --status-deep: #B456F4; /* purple — focus, low bandwidth */ --status-away: #B6B1A6; /* muted stone — not checking now */ --status-paused: #8A8D94; /* neutral grey — paused */ /* tinted chip backgrounds (calm, not dramatic) */ --status-fresh-bg: rgba(61, 214, 195, 0.14); --status-flowing-bg: rgba(79, 141, 245, 0.12); --status-slow-bg: rgba(255, 77, 125, 0.12); --status-deep-bg: rgba(180, 86, 244, 0.12); --status-away-bg: rgba(182, 177, 166, 0.20); --status-paused-bg: rgba(138, 141, 148, 0.14); /* ---------- Semantic feedback ---------- */ --color-success: #3DD6C3; /* = seafoam */ --color-warning: #F6C453; /* = ochre */ --color-danger: #FF4D7D; /* = currant (sparingly; avoid harsh traffic-light red) */ /* ---------- Typography ---------- Display = Recoleta (licensed, self-hosted via fonts.css). Fraunces is a faithful free fallback. Body/data/code load from Google Fonts. */ --font-display: "Recoleta", "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-data: "Geist", "IBM Plex Sans", "Inter", system-ui, sans-serif; /* metric numbers, timestamps, labels */ --font-code: "Geist Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* code/JSON */ /* Type scale (root = 16px) */ --text-xs: 0.75rem; /* 12 — labels, timestamps */ --text-sm: 0.875rem; /* 14 — captions, chips */ --text-base: 1rem; /* 16 — body */ --text-md: 1.125rem; /* 18 — lead paragraph */ --text-lg: 1.375rem; /* 22 — small headings */ --text-xl: 1.75rem; /* 28 — section subheads */ --text-2xl: 2.25rem; /* 36 — section titles */ --text-3xl: 3rem; /* 48 — large headlines */ --text-4xl: 3.75rem; /* 60 — hero (desktop) */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.55; --leading-relaxed: 1.7; --tracking-tight: -0.02em; /* display headlines */ --tracking-normal: 0; --tracking-wide: 0.04em; /* uppercase eyebrows/overlines */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------- Spacing scale (4px base) ---------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 — section vertical rhythm */ /* ---------- Radius (rounded, soft — never sharp) ---------- */ --radius-sm: 8px; --radius-md: 14px; /* inputs, small cards */ --radius-lg: 22px; /* cards & surfaces — "generous" */ --radius-xl: 32px; /* large feature panels */ --radius-pill: 999px; /* buttons, status chips */ /* ---------- Shadows (subtle, warm-tinted) ---------- */ --shadow-sm: 0 1px 2px rgba(34, 37, 46, 0.05); --shadow-md: 0 4px 16px rgba(34, 37, 46, 0.07); --shadow-lg: 0 12px 36px rgba(34, 37, 46, 0.10); --shadow-ring: 0 0 0 3px rgba(255, 77, 125, 0.30); /* focus ring (currant) */ /* ---------- Layout ---------- */ --container-max: 1120px; /* main content width */ --container-narrow: 720px; /* prose / centered copy */ --gutter: var(--space-5); /* horizontal page padding */ --nav-height: 72px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; /* ---------- Z-index ---------- */ --z-nav: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; } /* Responsive token overrides — fluid type & rhythm on small screens */ @media (max-width: 640px) { :root { --text-4xl: 2.5rem; /* 40 */ --text-3xl: 2.125rem; /* 34 */ --text-2xl: 1.75rem; /* 28 */ --space-10: 4.5rem; /* tighten section rhythm */ --gutter: var(--space-4); } }