/* Copied verbatim from Git/PragOptics/css/tokens.css on 2026-09-18 (the platform's palette, both themes). The studio never imports the platform at runtime; re-copy when the platform's palette changes. */ /* /css/tokens.css */ :root{ color-scheme: dark; --bg-deep:#000000 !important; --grad:linear-gradient(130deg,#000000 0%,#18042527 50%,#0218127e 100%); --menu:#000000e1 ; --glass:#0000006e; --glass-2:#11101012; --border:#ffffff1a; --ink:#dcdbf0e1; --muted:#c6d0f0a6; --brand:#1ca490da; --brand-600:#21bca5; --brandsoft:#21bca53d; --brand-purp: #a200ffc5; --console-prop:#7fcdece1; --console-num: #85e29ad7; --console-bool: #fa79e9; --console-str: #ec9345; --console-null: #ffdd1dcc; --json-mod: #ce7ffcd7; --brand-warn: #ffcc00c5; --console-err: #ff49d8; --console-ind: #ff4545; --console-succ: #2ccc69e8; --brandsoft-purp: #7e09c37b; /* ---- Named roles that were hard-coded literals until 2026-09-07. Dark values equal the literals they replaced, so nothing here changes the dark theme; the light block below re-values them. ---- */ --brand-purp-solid:#a200ff; /* the accent purple, opaque, for color-mix */ --purp-bright:#bf7dff; /* lavender end of title gradients */ --brand-hi:#38ffb3; /* mint end of active pills and flags */ --gold-soft:#ffd489; /* soft gold: savings tags, warnings */ --danger:#ff5d6c; /* refusals, destructive actions */ --danger-text:#ff9aa2; /* error copy */ --media-ground:#05070d; /* the tile behind product media */ --surface-2:rgba(0,0,0,.28); /* card fill on the dark ground */ --surface-3:rgba(0,0,0,.2); /* row / list fill */ --surface-deep:rgba(12,16,26,.66); /* toggle and chip chrome */ --shade:#000; /* base of every shadow and mask */ --panel-deep-a:#0b0f19; /* product modal and cart drawer chrome */ --panel-deep-b:#10091a; /* Highlight and badge treatment (Cameron, 2026-09-07): a transparent wash of the primary, no gradient, ink text. Dark: teal wash, white text. Light: purple wash, black text. Defined once; the tokens it reads flip per theme. Primary .cta buttons stay solid. */ --hi-bg: color-mix(in srgb, var(--brand-600) 18%, transparent); --hi-border: color-mix(in srgb, var(--brand-600) 45%, transparent); --hi-fg: var(--ink); --aura: 0 4px 18px rgba(255, 255, 255, 0.123), 0 8px 18px rgba(33, 188, 165, 0.185), 1px 8px 18px rgba(162, 0, 255, 0.132); --radius:16px; --radius-sm:10px; /* Buttons are rectangles with rounded corners: never a pill, never sharp. Controls (inputs, selects, checkboxes) sit one step tighter. */ --radius-btn:10px; --radius-btn-sm:8px; --radius-ctl:8px; /* Pill shape for chips/badges/tags. 24px fully rounds anything up to 48px tall (radius clamps at half-height). Use this token for every pill; magic-number radii are banned. Dots use 50%. */ --radius-pill:24px; --maxw: clamp(1200px, 96vw, 1760px); /* panels use the desktop; caps belong to prose */ --nav-maxw: clamp(1200px, 96vw, 1900px); /* ---- Unified card language (see card.css) ---- */ --radius-card:14px; --card-title:#f4f7fb; --card-surface: linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); --card-border: rgba(255,255,255,.10); --card-border-hover: rgba(33,188,165,.45); --card-shadow-rest: 0 10px 30px rgba(0,0,0,.45); --card-shadow-hover: 0 18px 42px rgba(0,0,0,.55); --card-lift: translateY(-3px); --card-ease: 200ms cubic-bezier(.22,.61,.36,1); /* dark text on the teal CTA fill */ --on-brand:#04130f; /* missing brand accent */ --brand-cyan:#1fe0ff; /* brighter teal for the ✦ starred labels (tagline, column headers, spotlight row labels) — the button teal reads too dark as small type */ --teal-bright:#36e6ca; /* Champagne accent — the warm counterpoint to the teal/purple palette. For taglines and section labels only; never on actions/buttons. */ --accent-gold:#e6c688; } /* ========================================================================= DAYLIGHT NEBULA — optional light theme (opt-in via [data-theme="light"]). Same token NAMES as the dark default above, re-valued for a light slate/ indigo ground with dark ink and softened glows, so anything that reads a token flips automatically. The teal/purple/gold brand accents are kept. Applied before first paint by the inline script in index.html; toggled at runtime by src/runtime/theme.js (footer control). The attribute selector outranks bare :root, so these win without !important — except --bg-deep, which is !important in the dark block and therefore needs !important here too. NOTE: the API-console syntax tokens (--console-*, --json-mod) and a few ambiguous accents are intentionally NOT redefined here yet. The console is a dark terminal in both themes; those are finalized after the CSS audit confirms which tokens are console-only vs general-use. ========================================================================= */ /* ========================================================================= LIGHT: the dark theme inverted (Cameron, 2026-09-07). Black ground becomes a white ground with the same nebula tints, the starfield inverts, and the two accents SWAP ROLES: everything teal in the dark theme is purple here, everything purple is teal. Gradients keep their shape; only the tokens change value, so no component rule needs to know which theme is on. Text on a brand fill is white (the fill is purple now). Surfaces that were black washes on black are white washes on white; hairlines and subtle fills are ink-based and invert on their own. The API console stays a dark terminal in both themes (theme-light.css pins it). ========================================================================= */ :root[data-theme="light"]{ color-scheme: light; --bg-deep:#f6f3fc !important; /* white with the nebula's lavender */ --grad:linear-gradient(130deg,#ffffff 0%,#d8f3ec33 50%,#ece2ff8c 100%); /* white -> teal tint -> purple tint (the dark grad's tints, swapped) */ --menu:#ffffffee; --glass:#ffffffa6; /* white glass */ --glass-2:#2a1a5a0f; /* faint ink tint for subtle fills */ --border:#2a1a5a24; /* ink hairline */ --ink:#1b1638e8; /* deep indigo ink */ --muted:#4a4470b8; /* roles swapped: purple is the primary, teal the accent */ --brand:#6d28d9d9; --brand-600:#6d28d9; --brandsoft:#6d28d93a; --brand-hi:#a78bfa; /* lavender end of active pills (was mint) */ --brand-cyan:#8b5cf6; --teal-bright:#7c3aed; /* starred labels, bright accents (was mint) */ --brand-purp:#0e9c8bd9; /* teal, the accent role */ --brand-purp-solid:#0e9c8b; --purp-bright:#0d9488; /* teal end of title gradients (was lavender) */ --brandsoft-purp:#0e9c8b7b; --accent-gold:#8a6a1a; --gold-soft:#8a6a1a; --brand-warn:#a8730a; --danger:#c2273b; --danger-text:#b4232f; --on-brand:#ffffff; /* white text on the purple fill */ --media-ground:#ebe6f7; --surface-2:rgba(255,255,255,.72); --surface-3:rgba(255,255,255,.55); --surface-deep:rgba(255,255,255,.86); --shade:rgba(30,20,64,.42); /* shadows and masks, softened on white */ --panel-deep-a:#ffffff; --panel-deep-b:#f3eefc; --aura: 0 4px 18px rgba(27, 16, 58, 0.08), 0 8px 18px rgba(109, 40, 217, 0.16), 1px 8px 18px rgba(14, 156, 139, 0.12); --card-title:#161036; --card-surface: linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,255,255,.66)); --card-border: rgba(42,26,90,.14); --card-border-hover: rgba(109,40,217,.5); --card-shadow-rest: 0 10px 30px rgba(40,24,90,.10); --card-shadow-hover: 0 18px 42px rgba(40,24,90,.16); }