/* SUIO design tokens — synced from CHARA/01_COLD/ux/tokens.css (canonical Brand Card surface, generated from ux/tokens.json), re-synced 2026-08-19 for the Plus Jakarta Sans revert. Keep in sync with that source. The three interpolated greys (400/600/800) are appended for back-compat with app.css refs inherited from the POC's V18-era token set. */ :root{ /* brand — SUIO ink + water-blue accent */ --navy:#16263A; --navy-2:#1B2A52; --navy-3:#2D3F75; --accent:#4F8BD9; --accent-light:#7FB0F0; --accent-deep:#2E5E9E; --accent-tint:#EAF2FC; /* neutral — cool blue-grey ramp */ --grey-50:#F7F8FA; --grey-100:#EEF0F4; --grey-200:#DCE0E8; --grey-300:#B8C0CE; --grey-500:#6B7588; --grey-700:#404B62; --grey-900:#1A2238; /* interpolated rungs (back-compat: app.css references these V18-era stops) */ --grey-400:#929DB0; --grey-600:#556075; --grey-800:#2D364D; /* app status — screen functional palette */ --blue:#2D7FF9; --green:#1FAB6A; --yellow:#F0A828; --red:#DC4040; --orange:#F97316; --purple:#7C3AED; --teal:#14B8A6; --pink:#EC4899; /* C/H/A/R/A layer colors (Kai mapping; --layer-action == Activation=yellow) */ --layer-cold:#2E5E9E; --layer-hot:#F97316; --layer-action:#F0A828; --layer-report:#1FAB6A; --layer-archive:#6B7588; --layer-ai:#7C3AED; /* print severity — Okabe-Ito, colorblind-safe (ring-fenced data system) */ --sev-deal-killer:#D55E00; --sev-critical:#E69F00; --sev-high:#B7791F; --sev-moderate:#5B6B8C; --sev-positive:#009E73; --sev-info:#0072B2; --sev-deal-killer-tint:#fdeee6; --sev-critical-tint:#fcf3e0; --sev-high-tint:#f7f0e2; --sev-moderate-tint:#eef1f5; --sev-positive-tint:#e9f7f1; --gap-text:#8a6d00; --gap-bg:#fdf6e3; --gap-border:#d8b765; /* deliverability choropleth ramp (Atlas overlay map). RED (bad / low headroom) -> GREEN (good / high headroom); MONOTONIC lightness dark->light so the signal survives red-green CVD (both CIE L* and greyscale luminance are strictly increasing, verified). bins 0..4 = --choro-0..4; --choro-nodata is the neutral OFF-scale grey (an all-null / merchant / suppressed zone, never a real value). Kai ratified the red->green direction + dark->light greyscale 2026-07-17. Hex lives ONLY here (this :root block + the [data-theme=dark] block below), never in a view. */ --choro-0:#C0392B; --choro-1:#DC6A3B; --choro-2:#D69A44; --choro-3:#A6CB5F; --choro-4:#8FD98F; --choro-nodata:#AEB4BB; /* tag / pill families — bg+text PAIRS that must flip in dark mode. Light values equal the pastels formerly hardcoded at app.css .tws-pill-sg* + chara-components; the dark block below supplies dark-tinted bg + light hue-matched text so these stop going white-on-white in dark. Always use the PAIR, never one half. */ --tag-violet-bg:#ede9fe; --tag-violet-fg:#6d28d9; --tag-blue-bg:#dbeafe; --tag-blue-fg:#1d4ed8; --tag-green-bg:#d1fae5; --tag-green-fg:#065f46; --tag-amber-bg:#fef3c7; --tag-amber-fg:#92400e; --tag-red-bg:#fee2e2; --tag-red-fg:#991b1b; --tag-grape-bg:#ede9fe; --tag-grape-fg:#4c1d95; --tag-orange-bg:#fdece2; --tag-orange-fg:#b4480e; /* gradient fills (Theme B) */ --grad-water: linear-gradient(135deg, var(--accent-deep), var(--accent)); --grad-water-h: linear-gradient(90deg, var(--accent-deep), var(--accent)); --grad-water-light: linear-gradient(90deg, var(--accent), var(--accent-light)); --grad-green: linear-gradient(90deg, var(--green), var(--teal)); --grad-orange: linear-gradient(90deg, var(--orange), var(--yellow)); /* type */ --font-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Arial,sans-serif; --font-mono:'DM Mono','SF Mono',Menlo,Consolas,monospace; /* semantic aliases (back-compat with chara-components.css + UI Kit) */ --bg:var(--grey-50); --ink:var(--grey-900); --dim:var(--grey-500); --line:var(--grey-200); /* surface = any "white card / menu / panel" plane; text-strong = heading ink (formerly the hardcoded --navy). LIGHT values equal the originals (#fff / navy) so light mode is visually unchanged; the dark theme below flips them. Set via [data-theme] on (boot script in index.html). */ --surface:#fff; --surface-2:#fff; --text-strong:var(--navy); /* on-accent-ink = THE per-skin flip seam for ink on accent-filled controls, and the canonical name. A skin whose working accent is a LIGHT stop overrides this one token to a dark ink (Blueprint did: #132A54 at 6.3:1 on its #7FB0F0 accent, vs 2.24:1 for white). Blueprint retired to the Theme Lab 2026-08-17, but the seam stays defined HERE because app.css accent-fill sites read color:var(--on-accent-ink,#fff) and the kit docs (FOUNDATION_KIT / A11Y_CONTRACT / GAP_A_CONVERGENCE) cite the role - a revived or new light-accent skin overrides this one token and every accent fill flips correctly. */ --on-accent-ink:#fff; /* text-on-accent = the T7-era LEGACY NAME for the same role: white text sitting ON a colored or navy fill (buttons, avatars, active chips), ~35 consumers in chara-components.css plus 2 JS. It now DERIVES from the seam above rather than repeating the literal - the same legacy-alias-to-canonical shape as --shadow:var(--shadow-2) three lines down. Why this one line matters (S1-NEW-06, ruled by Kai 2026-08-26): the two were INDEPENDENT literals, so the documented "one flip seam" re-tinted only about half the app. Overriding --on-accent-ink flipped the app.css and JS sites (~38) and left every .btn-primary, avatar and active chip on the old ink. A source grep could not see it - both files read correctly in isolation - and it was caught by flipping the token live and watching .btn-primary not follow. Same computed value today (#fff -> #fff), so this is a zero-pixel change that makes the seam whole. It is also STILL the same in both themes: a colored fill keeps white ink in dark mode. Landed HERE, not in CHARA, and the trigger ledger's routing was wrong about that. It said the fix belonged in CHARA/01_COLD/ux/tokens.css because this file is a hand-synced copy of it. That premise is stale: CHARA's tokens.css defines 53 variables to this file's 136, and BOTH seam names - along with --shadow-2, the very precedent the ledger cites - exist only here. There was never anything upstream to change, and nothing to re-sync back. */ --text-on-accent:var(--on-accent-ink); --radius:10px; --radius-sm:6px; --radius-lg:14px; --shadow:var(--shadow-2); /* legacy alias -> elevation ramp below (same computed value as the old literal) */ /* layout — left C·H·A·R·A rail width. Single source of truth: the rail itself plus the sliding layer-panel/backdrop/sidebar offsets all derive from this so they never drift. */ --rail-w:88px; /* ── Foundation Kit scales (SUIO UIUX Kit, 2026-07-16; spec: ux/FOUNDATION_KIT.md) ───────── App-side extension, additive-only: nothing above this line changed. These are the type / space / motion / elevation / z-order axes that were ~4,400 per-component literals (census 2026-07-16: 1,334 css + 1,128 js font-size, ~3,900 spacing px, all 0% var()). Migration rule + snap tables live in the spec; new UI reads these, never a raw px. */ /* type — fluid narrow-band ramp: each step travels its clamp() range between the 1280px and 1920px viewports (below 1280 it holds the compact min - tablet keeps today's sizes). Steps are anchored on the app's real modal sizes (11/12/10/13px...) so migration snaps 1:1; the ~511 hand-tuned half-pixel sizes (11.5, 12.5, ...) ARE the wide-viewport ends of these bands, institutionalized. */ --text-3xs: clamp(9px, 8px + 0.078125vw, 9.5px); /* micro chrome: badges, mono eyebrows */ --text-2xs: clamp(10px, 9px + 0.078125vw, 10.5px); /* section headers, table th, tags */ --text-xs: clamp(11px, 10px + 0.078125vw, 11.5px); /* labels, hints, rail keys (the workhorse) */ --text-sm: clamp(12px, 11px + 0.078125vw, 12.5px); /* secondary body, buttons, chips */ --text-md: clamp(13px, 12px + 0.078125vw, 13.5px); /* body default, inputs, table cells */ --text-lg: clamp(14px, 12px + 0.15625vw, 15px); /* emphasized body, left-nav names */ --text-xl: clamp(16px, 14px + 0.15625vw, 17px); /* modal titles, card headings */ --text-2xl: clamp(18px, 15px + 0.234375vw, 19.5px); /* view h1 */ --text-3xl: clamp(22px, 18px + 0.3125vw, 24px); /* hero numbers, dashboard KPIs */ /* leading + measure — snap: 1 -> none; 1.3-1.4 -> tight; 1.45-1.55 -> normal; 1.6+ -> loose */ --leading-none: 1; --leading-tight: 1.35; --leading-normal: 1.5; --leading-loose: 1.65; --measure: 70ch; --measure-narrow: 44ch; /* space — stepped 4px grid on one unit; the visual-density axis (html[data-spacing]) retunes the unit, NOT individual paddings. data-density (simple|detailed) is the separate CONTENT-disclosure axis - never overload it (ux/FOUNDATION_KIT.md section 3). */ --space-unit: 4px; --space-05: calc(var(--space-unit) * 0.5); /* 2px hairline gaps */ --space-1: calc(var(--space-unit) * 1); /* 4px chip gaps */ --space-2: calc(var(--space-unit) * 2); /* 8px control padding */ --space-3: calc(var(--space-unit) * 3); /* 12px cell/field padding */ --space-4: calc(var(--space-unit) * 4); /* 16px card padding */ --space-5: calc(var(--space-unit) * 5); /* 20px modal/body padding */ --space-6: calc(var(--space-unit) * 6); /* 24px section gaps */ --space-8: calc(var(--space-unit) * 8); /* 32px view padding */ --space-10: calc(var(--space-unit) * 10); /* 40px hero spacing */ --space-12: calc(var(--space-unit) * 12); /* 48px layout bands */ --space-16: calc(var(--space-unit) * 16); /* 64px page-scale bands */ /* motion — one duration + easing vocabulary (consumed app-wide by Session 2's B4; the tokens land with Foundation so nothing new hardcodes a duration). Snap: <=150ms -> 1, ~200-250 -> 2, >=300 -> 3. transition: all is banned (spec section 5). */ --motion-1: 120ms; /* micro: hover, toggle, focus ring */ --motion-2: 200ms; /* standard: reveal, fade, swap */ --motion-3: 320ms; /* structural: panel slide, layer open */ --ease-out: cubic-bezier(.2, 0, 0, 1); /* enter / decelerate (the default) */ --ease-in: cubic-bezier(.4, 0, 1, 1); /* exit / accelerate */ --ease-in-out: cubic-bezier(.45, 0, .25, 1);/* move / morph */ /* elevation — one shadow ramp; --shadow (legacy) now aliases ramp step 2, same computed value as before. Dark overrides below. */ --shadow-1: 0 1px 2px rgba(22,38,58,.06); /* resting card */ --shadow-2: 0 8px 28px rgba(22,38,58,.12); /* raised card / popover (== legacy --shadow) */ --shadow-3: 0 12px 36px rgba(22,38,58,.18); /* dropdown / palette / pinned chrome */ --shadow-4: 0 18px 50px rgba(22,38,58,.26); /* modal / topmost overlay */ /* z-order — the named strata ladder, anchored 1:1 on today's WORKING ad-hoc strata (census 2026-07-16: rail 25 < panels 34-36 < topnav 40 < menus 50-60 < modal 200 < jumpbar/pickers 250-260 < auth 1000 < toast 1100) so migration is mechanical and the proven order (pickers must beat the modal; toast beats everything interactive) is kept. An explicit z-index outside this ladder needs a comment arguing it. */ --z-base: 0; /* flow content */ --z-raised: 1; /* sticky table headers, in-surface pins */ --z-sticky: 10; /* sticky in-view bars */ --z-rail: 25; /* the C·H·A·R·A rail */ --z-panel: 35; /* slide-out layer panels + copilot sidebar */ --z-chrome: 40; /* topnav (above panels by design) */ --z-dropdown: 60; /* menus, popovers, user menu */ --z-modal: 200; /* the one modal overlay (l3-modal-overlay ships at 200 today) */ --z-popover-top: 260; /* pickers/palette that must open OVER a modal (jumpbar today) */ --z-gate: 1000; /* full-screen gates: auth, welcome */ --z-toast: 1100; /* toasts (clear everything, gates included) */ --z-tooltip: 1150; /* the future tooltip atom (nothing may cover a tooltip) */ --z-top: 9999; /* drag ghosts, print/export isolation layers */ } /* Visual-density axis (Foundation): compact retunes the ONE spacing unit by 12.5%. Distinct from data-density (content disclosure) by design - two axes, two attributes. */ html[data-spacing="compact"] { --space-unit: 3.5px; } /* ── Global reduced-motion floor (UX Kit B4) ───────────────────────────────────────────────── ONE floor instead of per-feature allowlists: reduce collapses every transition/animation to a single ~instant frame app-wide, so a new animated surface can never re-drift out of the contract. The existing per-feature @media rules stay (harmless refinements above the floor); JS never needs a matchMedia branch for basic show/hide motion - transitionend still fires. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ── Dark theme ────────────────────────────────────────────────────────────────────────────── Inverts the cool blue-grey ramp (light stops -> dark surfaces, dark stops -> light ink) so the ~1,480 var(--token) usages flip in place, plus the two converted families (--surface, --text-strong) and the status/gap tints. The dark navy BARS (topnav + primary buttons use background:var(--navy)) intentionally stay dark in BOTH modes. Activated by [data-theme="dark"] on . */ [data-theme="dark"]{ color-scheme: dark; --grey-50:#0e1622; --grey-100:#142031; --grey-200:#243248; --grey-300:#33456a; --grey-400:#4a5d82; --grey-500:#8a98b2; --grey-600:#9fadc6; --grey-700:#c1ccdf; --grey-800:#d7deec; --grey-900:#eef2fa; --surface:#16212f; --surface-2:#1d2a3b; --text-strong:#eaf0fa; --accent-tint:#11233b; --accent-light:#9cc2f5; /* elevation ramp, dark (deeper + darker; --shadow keeps aliasing step 2) */ --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 10px 30px rgba(0,0,0,.55); --shadow-3:0 14px 40px rgba(0,0,0,.62); --shadow-4:0 20px 56px rgba(0,0,0,.7); --sev-deal-killer-tint:#3a1d10; --sev-critical-tint:#33280f; --sev-high-tint:#2c2511; --sev-moderate-tint:#1b2333; --sev-positive-tint:#0f2a20; --gap-bg:#2a2410; --gap-border:#5a4d1f; --gap-text:#e8cf7a; /* deliverability choropleth ramp, DARK — the red floor is raised so --choro-0 stays visible on the dark --surface; still red->green and still monotonic dark->light + greyscale-verified. */ --choro-0:#D2503C; --choro-1:#E07A44; --choro-2:#D9A64D; --choro-3:#A9CF66; --choro-4:#8CD98C; --choro-nodata:#565E68; /* tag/pill dark pairs — translucent hue over the dark surface + light hue-matched text. Values match the proven [data-theme=dark] .tws-pill-sg* block this token set replaces, so the flip is visually identical to before while now living in ONE place. */ --tag-violet-bg:rgba(124,58,237,.22); --tag-violet-fg:#c9b6f7; --tag-blue-bg:rgba(45,127,249,.22); --tag-blue-fg:#9cc0ff; --tag-green-bg:rgba(31,171,106,.22); --tag-green-fg:#6ee7b7; --tag-amber-bg:rgba(240,168,40,.22); --tag-amber-fg:#f3cd84; --tag-red-bg:rgba(220,64,64,.22); --tag-red-fg:#f3a0a0; --tag-grape-bg:rgba(124,58,237,.22); --tag-grape-fg:#c9b6f7; --tag-orange-bg:rgba(249,115,22,.20); --tag-orange-fg:#f7b27a; }