/* ============================================================ CE OS — DESIGN TOKENS · tokens.css (v1 · rebuild) The ONE source of truth. Load first, before components.css. Replaces: brand.css tokens, ce-theme.css, and all inline :root blocks. Dark is default; add data-theme="light" on for light. ============================================================ */ :root{ /* ---- SURFACES (layered, dark) ---------------------------- */ --bg: #08090C; /* app canvas — deepest */ --bg-1: #0B0D12; /* page background */ --surface: #101319; /* card / panel */ --surface-2: #161A22; /* raised card / input */ --surface-3: #1D2230; /* hover / active */ --overlay: rgba(6,7,10,.72); /* modal scrim */ /* ---- BORDERS (hairlines) -------------------------------- */ --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.11); --line-3: rgba(255,255,255,.18); /* ---- TEXT ------------------------------------------------ */ --ink: #F4F6FB; /* primary */ --ink-2: #AEB8C7; /* secondary / body */ --ink-3: #7A8598; /* muted */ --ink-4: #515C6E; /* disabled / captions */ --on-accent:#04140F; /* text on mint */ /* ---- ACCENTS -------------------------------------------- */ --mint: #5AF2C3; /* primary action / brand */ --mint-hi: #7FF6D2; /* hover */ --mint-lo: #23C79B; /* pressed */ --mint-dim: rgba(90,242,195,.12); --indigo: #6E71FF; /* secondary / links, data */ --indigo-dim:rgba(110,113,255,.14); --amber: #F6C453; --coral: #F26D5B; --success: #39D98A; --danger: #F0616D; --danger-dim:rgba(240,97,109,.14); /* data-viz sequence */ --viz-1:#5AF2C3; --viz-2:#6E71FF; --viz-3:#F6C453; --viz-4:#F26D5B; --viz-5:#39D98A; --viz-6:#8B93A7; /* ---- TYPE ----------------------------------------------- */ --font-display:'Sora',-apple-system,'Segoe UI',Arial,sans-serif; --font-body:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif; --font-mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace; --fs-eyebrow:.72rem; --fs-xs:.78rem; --fs-sm:.85rem; --fs-base:.95rem; --fs-md:1.05rem; --fs-lg:1.25rem; --fs-xl:1.6rem; --fs-h3:clamp(1.3rem,1.1rem+.9vw,1.75rem); --fs-h2:clamp(1.8rem,1.3rem+2.1vw,2.9rem); --fs-h1:clamp(2.5rem,1.7rem+4vw,4.6rem); --lh-tight:1.05; --lh-snug:1.25; --lh-body:1.6; --tracking-label:.14em; /* ---- SPACE (4px base) ----------------------------------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; /* ---- RADII ---------------------------------------------- */ --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px; /* ---- ELEVATION (subtle, layered — never neon) ----------- */ --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 12px -4px rgba(0,0,0,.5); --sh-3:0 12px 32px -12px rgba(0,0,0,.6); --sh-4:0 24px 64px -24px rgba(0,0,0,.7); --ring:0 0 0 3px rgba(90,242,195,.35); /* ---- MOTION --------------------------------------------- */ --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.22,1,.36,1); --dur-1:.12s; --dur-2:.2s; --dur-3:.32s; --maxw:1200px; color-scheme:dark; } /* ---- LIGHT THEME ----------------------------------------- */ :root[data-theme="light"]{ --bg:#FFFFFF; --bg-1:#F7F8FA; --surface:#FFFFFF; --surface-2:#F3F5F8; --surface-3:#EAEDF2; --overlay:rgba(16,19,25,.4); --line:rgba(9,11,16,.09); --line-2:rgba(9,11,16,.14); --line-3:rgba(9,11,16,.22); --ink:#0C1017; --ink-2:#3B4656; --ink-3:#697488; --ink-4:#9AA4B4; --on-accent:#04140F; --mint:#12B886; --mint-hi:#0EA574; --mint-lo:#0B8B62; --mint-dim:rgba(18,184,134,.10); --indigo:#5457F0; --indigo-dim:rgba(84,87,240,.10); --sh-1:0 1px 2px rgba(16,19,25,.06); --sh-2:0 4px 12px -4px rgba(16,19,25,.12); --sh-3:0 12px 32px -12px rgba(16,19,25,.16); --sh-4:0 24px 64px -24px rgba(16,19,25,.2); --ring:0 0 0 3px rgba(18,184,134,.3); color-scheme:light; } @media (prefers-reduced-motion:reduce){ :root{--dur-1:0s;--dur-2:0s;--dur-3:0s} }