/* ============================================================================ OctoVault design tokens — "Vault" art direction Shared by the marketing site and the dashboard SPA. How theming works: :root -> LIGHT values (default) :root[data-theme="dark"] -> DARK values (explicit choice) @media (prefers-color-scheme:dark) -> DARK values when no explicit choice A tiny inline script sets data-theme before paint (no flash); theme.js owns the toggle + live OS-change handling. See theme.js. Naming: new semantic tokens (--surface, --brand, --text-dim …) plus a small compatibility layer (--panel, --line, --dim, --red, --ink, --gray, --light) so the existing dashboard/marketing rules keep resolving unchanged. ========================================================================== */ :root { color-scheme: light; /* ---- semantic color · LIGHT (cool off-white + ink, sharp red signal) ---- */ --bg:#f7f8fa; /* page background */ --surface:#ffffff; /* cards, sidebar, panels */ --inset:#f1f3f5; /* inputs, gauges, wells */ --border:#e4e7ec; /* hairline borders */ --text:#15181d; /* primary text */ --text-dim:#5a6472; /* secondary text */ --text-muted:#8a94a3; /* labels, hints, dividers*/ --brand:#ce1126; /* the flag red (AA on white) */ --brand-hover:#a50e1f; --brand-wash:#fbeaec; /* faint brand-tinted fill */ --on-brand:#ffffff; --success:#1f8f4e; --warning:#b25e00; --danger:#c2182b; --focus:#ce1126; --backdrop:rgba(20,22,28,.45); /* dark "design" surfaces that stay dark in BOTH modes (marketing hero/footer) */ --ink-panel:#0e0e10; /* light mode: true black panels */ --ink-panel-2:#15151a; /* ---- type scale (dense dashboard base; marketing uses the top end) ---- */ --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:14px; --text-lg:16px; --text-xl:18px; --text-2xl:22px; --text-3xl:28px; --text-4xl:36px; --text-hero:44px; --lh-tight:1.2; --lh-snug:1.35; --lh-normal:1.5; --lh-loose:1.65; --fw-normal:400; --fw-med:600; --fw-bold:700; --fw-x:800; --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace; --tracking-label:.06em; /* ---- spacing (4px base) ---- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; /* ---- radius / elevation / layout ---- */ --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px; --shadow-sm:0 1px 2px rgba(16,18,24,.06); --shadow-md:0 12px 28px rgba(16,18,24,.10); --maxw:1080px; --side-w:230px; /* ---- compatibility aliases (dashboard) ---- */ --panel:var(--surface); --line:var(--border); --dim:var(--text-dim); --red:var(--brand); --green:var(--success); --orange:var(--warning); /* ---- compatibility aliases (marketing style.css) ---- */ --ink:var(--text); --gray:var(--text-dim); --light:var(--inset); --black:var(--ink-panel); } :root[data-theme="dark"] { color-scheme: dark; /* ---- semantic color · DARK ("Vault" graphite + sharp red) ---- */ --bg:#0b0c0f; --surface:#131519; --inset:#0e1014; --border:#23272f; --text:#eef0f4; --text-dim:#8b94a3; --text-muted:#5b6472; --brand:#ff3b47; /* sharp red, AA on graphite */ --brand-hover:#ff5560; --brand-wash:#1c1216; --on-brand:#ffffff; --success:#38b26b; --warning:#e8923a; --danger:#ff5560; --focus:#ff3b47; --backdrop:rgba(0,0,0,.6); /* dark "design" panels lift slightly so they read against the page */ --ink-panel:#101216; --ink-panel-2:#15171c; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 14px 40px rgba(0,0,0,.5); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg:#0b0c0f; --surface:#131519; --inset:#0e1014; --border:#23272f; --text:#eef0f4; --text-dim:#8b94a3; --text-muted:#5b6472; --brand:#ff3b47; --brand-hover:#ff5560; --brand-wash:#1c1216; --on-brand:#ffffff; --success:#38b26b; --warning:#e8923a; --danger:#ff5560; --focus:#ff3b47; --backdrop:rgba(0,0,0,.6); --ink-panel:#101216; --ink-panel-2:#15171c; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 14px 40px rgba(0,0,0,.5); } } /* ---- shared accessibility helpers ---- */ :where(a, button, input, select, textarea, [tabindex], summary):focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--radius-sm); } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ============================================================================ Theme toggle — tri-state segmented control (Light / Dark / Auto). Mounted by theme.js into any element with [data-theme-toggle]. ========================================================================== */ .theme-toggle { display:inline-flex; align-items:center; gap:2px; padding:2px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--inset); } .theme-toggle .theme-opt { display:inline-flex; align-items:center; justify-content:center; width:26px; height:24px; padding:0; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--text-dim); cursor:pointer; transition:background .15s ease, color .15s ease; } .theme-toggle .theme-opt:hover { color:var(--text); } .theme-toggle .theme-opt.on { background:var(--surface); color:var(--brand); box-shadow:var(--shadow-sm); } .theme-toggle .theme-opt svg { width:15px; height:15px; display:block; }