/* ============================================================ nearlaunch.fun design tokens (V2 · "pair-first terminal") Single source of truth for colour, elevation, geometry and type. Nothing else in the codebase should hard-code a hex value. Dark is the resting theme. `data-theme` on wins; when it is absent the system preference decides. Every value exists in both themes, so components never need a theme-specific rule. ============================================================ */ :root{ /* ── surfaces ── near-black canvas with a cool bias, hairlines for depth */ --bg:#0B0F14; --bg-2:#1B2531; /* seams, ring track, progress track */ --card:#121820; /* raised surface */ --sunk:#0E1319; /* recessed box inside a card */ --sunk-2:#161D26; /* hover / pressed on a recessed box */ --line:#1C2733; /* 1px hairlines */ --line-strong:#2B3A49; --hover:#161E27; --bg-blur:rgba(11,15,20,.86); /* sticky header */ --header:var(--bg-blur); --veil:rgba(14,19,25,.94); /* mobile bars over content */ --scrim:rgba(4,7,10,.66); /* ── text ── */ --ink:#E9EEF3; --ink-2:#AAB7C4; --ink-3:#74838F; --ink-4:#4A5866; --muted:var(--ink-2); --on-ink:#0B0F14; /* text on an --ink fill */ --on-accent:#06201A; /* text on jade / coral fills */ --selected:var(--jade); --on-selected:var(--on-accent); /* ── accents ── one hue per quote category, used as data not decoration. `-deep` is the foreground used on top of `-wash`. */ --jade:#3DE0A0; --jade-deep:#7FF0C4; --jade-soft:rgba(61,224,160,.42); --jade-wash:rgba(61,224,160,.10); --azure:#5AA9FF; --azure-deep:#9CCBFF;--azure-soft:rgba(90,169,255,.42);--azure-wash:rgba(90,169,255,.11); --peri:#A78BFA; --peri-deep:#C9B8FF; --peri-soft:rgba(167,139,250,.42);--peri-wash:rgba(167,139,250,.11); /* ── state ── */ --coral:#FF6B6B; --coral-deep:#FF9C9C; --coral-wash:rgba(255,107,107,.11); --amber:#F5B84B; --amber-deep:#FFD58A; --amber-wash:rgba(245,184,75,.12); --up:#3DE0A0; --down:#FF6B6B; /* chart strokes */ /* ── elevation ── hairlines carry hierarchy; shadows only lift floating layers */ --e1:0 0 0 1px var(--line); --e2:0 0 0 1px var(--line-strong); --e3:0 0 0 1px var(--line-strong),0 24px 60px -24px rgba(0,0,0,.7); --glow-jade:0 0 0 1px var(--jade); --glow-jade-hi:0 0 0 1px var(--jade),0 8px 24px -10px rgba(61,224,160,.6); --glow-coral:0 0 0 1px var(--coral); /* ── geometry ── */ --r-lg:14px; --r-md:10px; --r-sm:8px; --r-xs:6px; --r-pill:999px; /* ── rhythm ── */ --gap:14px; --page-x:20px; --header-h:96px; /* ── type ── */ --font-display:"Bricolage Grotesque","Figtree",system-ui,sans-serif; --font-sans:"Figtree",system-ui,-apple-system,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px; --fs-17:17px; --fs-20:20px; --fs-24:24px; --fs-30:30px; --fs-38:38px; /* ── motion ── */ --fast:.12s; --mid:.18s; --slow:.24s; --ease:cubic-bezier(.2,.7,.3,1); color-scheme:dark; } /* ============================================================ Light — designed, not inverted. Cool paper canvas, white cards, the same hairline model, accents deepened so jade reads on white. ============================================================ */ :root[data-theme="light"]{ --bg:#F4F6F8; --bg-2:#E3E8EE; --card:#FFFFFF; --sunk:#F0F3F6; --sunk-2:#E7ECF1; --line:#E1E7ED; --line-strong:#C9D3DD; --hover:#F3F6F9; --bg-blur:rgba(244,246,248,.86); --veil:rgba(255,255,255,.94); --scrim:rgba(16,24,32,.42); --ink:#101820; --ink-2:#4B5966; --ink-3:#75838F; --ink-4:#A5B1BC; --on-ink:#FFFFFF; --on-accent:#FFFFFF; --jade:#0FA46F; --jade-deep:#0A7A52; --jade-soft:rgba(15,164,111,.45); --jade-wash:rgba(15,164,111,.10); --azure:#2F6FD6; --azure-deep:#22539F; --azure-soft:rgba(47,111,214,.45); --azure-wash:rgba(47,111,214,.10); --peri:#6D5AE0; --peri-deep:#4E3FB0; --peri-soft:rgba(109,90,224,.45); --peri-wash:rgba(109,90,224,.10); --coral:#D9483B; --coral-deep:#B3372C; --coral-wash:rgba(217,72,59,.10); --amber:#D89A2B; --amber-deep:#8A5B0F; --amber-wash:rgba(216,154,43,.12); --up:#0FA46F; --down:#D9483B; --e1:0 0 0 1px var(--line),0 1px 2px rgba(16,24,32,.04); --e2:0 0 0 1px var(--line-strong),0 6px 20px -12px rgba(16,24,32,.18); --e3:0 0 0 1px var(--line-strong),0 24px 60px -24px rgba(16,24,32,.32); --glow-jade-hi:0 0 0 1px var(--jade),0 8px 24px -10px rgba(15,164,111,.45); color-scheme:light; } /* First visit with no stored choice follows the operating system. */ @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){ --bg:#F4F6F8; --bg-2:#E3E8EE; --card:#FFFFFF; --sunk:#F0F3F6; --sunk-2:#E7ECF1; --line:#E1E7ED; --line-strong:#C9D3DD; --hover:#F3F6F9; --bg-blur:rgba(244,246,248,.86); --veil:rgba(255,255,255,.94); --scrim:rgba(16,24,32,.42); --ink:#101820; --ink-2:#4B5966; --ink-3:#75838F; --ink-4:#A5B1BC; --on-ink:#FFFFFF; --on-accent:#FFFFFF; --jade:#0FA46F; --jade-deep:#0A7A52; --jade-soft:rgba(15,164,111,.45); --jade-wash:rgba(15,164,111,.10); --azure:#2F6FD6; --azure-deep:#22539F; --azure-soft:rgba(47,111,214,.45); --azure-wash:rgba(47,111,214,.10); --peri:#6D5AE0; --peri-deep:#4E3FB0; --peri-soft:rgba(109,90,224,.45); --peri-wash:rgba(109,90,224,.10); --coral:#D9483B; --coral-deep:#B3372C; --coral-wash:rgba(217,72,59,.10); --amber:#D89A2B; --amber-deep:#8A5B0F; --amber-wash:rgba(216,154,43,.12); --up:#0FA46F; --down:#D9483B; --e1:0 0 0 1px var(--line),0 1px 2px rgba(16,24,32,.04); --e2:0 0 0 1px var(--line-strong),0 6px 20px -12px rgba(16,24,32,.18); --e3:0 0 0 1px var(--line-strong),0 24px 60px -24px rgba(16,24,32,.32); --glow-jade-hi:0 0 0 1px var(--jade),0 8px 24px -10px rgba(15,164,111,.45); color-scheme:light; } } /* Theme changes should feel like a light turning on, not a repaint. */ @media (prefers-reduced-motion:no-preference){ :root.theme-animating, :root.theme-animating *{transition:background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease !important} }