/* ============================================================================ * Crucible Design System — Theme Tokens (canonical) * ---------------------------------------------------------------------------- * The light + dark CSS custom-property token sets, lifted VERBATIM from the * approved wireframe (dev-docs/wireframes/crucible/crucible-wireframe.html * `:root` / `[data-theme="dark"]`). THE single source of truth for Crucible * colour/elevation/radius/typography tokens. * * SHARED, not duplicated: this is one static file served from * `/static/crucible/theme-tokens.css` (the `/` StaticFiles mount in main.py) * and `@import`-ed by url from all three Crucible builds (the IIFE shell + the * Objects and Forge React apps). Per the redesign exec-spec §7, only the * compiled TS/JS controllers are duplicated-and-parity-locked; the CSS token * file + the SVG sprite are genuinely shared static assets referenced thrice. * * Air-gap safe: no @font-face / no CDN — system font stacks only. * * Theme is switched by toggling `data-theme="dark"` on , persisted in the * non-httpOnly `raven_theme` cookie (see crucibleTheme.ts / crucible_theme.js). * ========================================================================== */ /* ═══ LIGHT theme (default) — clean white / grey / black, reads like a data tool ═══ */ :root{ --bg:#eef0f3; --bg-grad:radial-gradient(1200px 700px at 78% -12%,#ffffff 0%,#eef0f3 60%); --panel:#ffffff; --panel2:#f7f8fa; --elev:#ffffff; --line:#e5e8ec; --line2:#d5dae1; --text:#161b24; --muted:#5d6675; --faint:#9aa3b2; --topbar:linear-gradient(180deg,#ffffff,#f7f8fa); --hover:#f1f3f6; --sel:#e8f0fe; --sel-fg:#1a52c4; --input:#ffffff; --chip:#eef2f8; --canvas:#fbfcfd; --dot:#e3e7ec; --node:linear-gradient(180deg,#ffffff,#fbfcfd); --wire:#c2cad6; --accent:#2563eb; --accent-d:#1d4fd0; --accent-soft:#dbe6ff; --shape:#2563eb; --geo:#0d9f6e; --intel:#c2870a; --enrich:#7c3aed; --sink:#db2777; --ok:#0d9f6e; --warn:#c2870a; --bad:#e0455e; --shadow:0 1px 2px rgba(16,24,40,.07),0 8px 24px -10px rgba(16,24,40,.16); --shadow-s:0 1px 2px rgba(16,24,40,.06); } /* ═══ DARK theme (toggle) ═══ */ [data-theme="dark"]{ --bg:#0a0d14; --bg-grad:radial-gradient(1200px 700px at 75% -10%,#121a2b 0%,#0a0d14 55%); --panel:#11161f; --panel2:#151b27; --elev:#1a2230; --line:#222b3a; --line2:#2c3749; --text:#e8ecf4; --muted:#8a94a8; --faint:#5b6577; --topbar:linear-gradient(180deg,#10151f,#0c1019); --hover:#131a27; --sel:#13202f; --sel-fg:#cfe6ff; --input:#0b1019; --chip:#16202e; --canvas:#0c1019; --dot:#1a2334; --node:linear-gradient(180deg,#161d2b,#121825); --wire:#33415a; --accent:#3da9fc; --accent-d:#2a7fd4; --accent-soft:#16263a; --shape:#4d9fff; --geo:#34d399; --intel:#fbbf24; --enrich:#a78bfa; --sink:#f472b6; --ok:#34d399; --warn:#fbbf24; --bad:#fb7185; --shadow:0 1px 2px rgba(0,0,0,.5),0 4px 16px -6px rgba(0,0,0,.55); --shadow-s:0 1px 2px rgba(0,0,0,.4); } :root{ --radius:10px; --radius-s:7px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif; --mono:"SF Mono",ui-monospace,"JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace; }