@kiefer-tek/sophea-design-system 0.15.0

package/src/tokens/colors_and_type.css

@@ -0,0 +1,1131 @@
+/* ============================================================================
+ *  Sophea Design System — Colors + Type Tokens
+ *  ----------------------------------------------------------------------------
+ *  Source of truth distilled from the codebase
+ *  (web/src/app/css/sophea_v1.css + web/tailwind-themes/tailwind.config.js).
+ *
+ *  Three tiers, same as production:
+ *    1. Primitives   — raw scales (--blue-50, --text-05, --border-02)
+ *    2. Semantic     — intent aliases (--color-fg-primary, --color-link)
+ *    3. Component    — declared by each component, consume the semantic tier
+ *
+ *  Brand voice:  glass-first over a navy aurora, hairline borders, deep
+ *  brand-navy CTAs, vivid brand-light selection. Quietly rounded corners,
+ *  predictable hierarchy.
+ *
+ *  Fonts: Geist Sans for everything (body, UI, headings), DM Mono for code.
+ *  Both are Next.js Google Fonts (next/font/google) in production.
+ * ========================================================================== */
+
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap");
+
+/* ---------- Light mode primitives ---------- */
+:root {
+  color-scheme: light;
+
+  /* ── Hyperion primitive scales (portal parity) ── */
+  --blue-95: #040e25;
+  --blue-90: #091938;
+  --blue-85: #11254e;
+  --blue-80: #173268;
+  --blue-60: #3363c3;
+  --blue-50: #286df8;
+  --blue-45: #397bff;
+  --blue-40: #508afb;
+  --blue-20: #9bbeff;
+  --blue-10: #cddfff;
+  --blue-05: #e7effc;
+  --blue-01: #f8fafe;
+
+  --green-95: #001503;
+  --green-90: #002207;
+  --green-85: #00320d;
+  --green-80: #004214;
+  --green-60: #008933;
+  --green-50: #00a43f;
+  --green-40: #2eaa4d;
+  --green-20: #91d099;
+  --green-10: #c9e8cc;
+  --green-05: #e6f2e7;
+  --green-01: #f8fbf8;
+
+  --red-95: #210504;
+  --red-90: #330b09;
+  --red-85: #481310;
+  --red-80: #5f1a16;
+  --red-60: #b02b27;
+  --red-50: #dc2626;
+  --red-45: #f23a36;
+  --red-40: #e8594e;
+  --red-20: #f8a59b;
+  --red-10: #fed2cc;
+  --red-05: #fceae7;
+  --red-01: #fef7f6;
+
+  --orange-95: #200600;
+  --orange-90: #320d01;
+  --orange-85: #471602;
+  --orange-80: #5d1e01;
+  --orange-60: #b44105;
+  --orange-55: #ce4b05;
+  --orange-50: #ec5b13;
+  --orange-40: #e1642f;
+  --orange-20: #f5a88b;
+  --orange-10: #fcd4c5;
+  --orange-05: #fbeae4;
+  --orange-01: #fef9f7;
+
+  --purple-95: #140921;
+  --purple-90: #211132;
+  --purple-85: #301b47;
+  --purple-80: #41255e;
+  --purple-60: #7e4bb2;
+  --purple-50: #9948e3;
+  --purple-45: #a361e6;
+  --purple-40: #a96fe8;
+  --purple-20: #ccaef2;
+  --purple-10: #e5d6fa;
+  --purple-05: #f1ebfa;
+  --purple-01: #f9f7fd;
+
+  /* ── Brand anchor — Sophea ink scale (most prominent → least) ──
+     Pulled to #2E6DAD per brief. The aurora keeps its specified navy/cyan
+     palette; interactive brand below is the #2E6DAD family. */
+  --sophea-ink-100: #143656;
+  --sophea-ink-95: #1f4f7b;
+  --sophea-ink-90: #2e6dad;
+  --sophea-chrome-20: #cbd5e1;
+  --sophea-chrome-10: #f1f5f9;
+  --sophea-chrome-00: #f8f9fc;
+
+  /* ── Primary blue (interactive) ── 04 hover, 05 idle, 06 pressed */
+  --theme-primary-06: #1f4f7b;
+  --theme-primary-05: #2e6dad;
+  --theme-primary-04: #5891d0;
+  /* 03 is the brightest tier — a tint above the interactive band, reserved as
+     the bright end of text gradients on dark surfaces (where the ramp must
+     climb past 04 to stay readable on the navy/glass aurora). Primitive. */
+  --theme-primary-03: #a9c7ff;
+
+  /* ── Foreground tiers ── 05 strong → 01 muted */
+  --text-05: #0f172a;
+  --text-04: #475569;
+  --text-03: #5f6d82;
+  --text-02: #94a3b8;
+  --text-01: #cbd5e1;
+  --text-inverted-05: #ffffff;
+  --text-inverted-04: #f1f5f9;
+  --text-inverted-03: #cbd5e1;
+  /* Text/icons sitting ON the interactive brand fills (--theme-primary-04/05/06)
+     and the primary CTA gradient. Theme-STABLE — the brand fills don't flip with
+     the theme, so this must not either (unlike --text-inverted-05, which goes
+     near-black in dark). White measures 4.6:1 on primary-05, 8.5:1 on -06. */
+  --text-on-primary: #ffffff;
+
+  /* ── Surfaces — content layers ── */
+  --surface-s1: #eef3fa; /* app backdrop / shell frame */
+  --surface-s2: #ffffff; /* panel — workhorse */
+  --surface-s3: #f4f7fb; /* inset (inputs, hovers) */
+  --surface-s4: #e2e9f5; /* active / selected */
+
+  /* ── Neutral background scale ── */
+  --background-neutral-00: #ffffff;
+  --background-neutral-01: #f8f9fc;
+  --background-neutral-02: #f1f5f9;
+  --background-neutral-03: #e2e8f0;
+  --background-neutral-04: #cbd5e1;
+
+  /* ── Border tiers ── 01 hairline → 04 interactive */
+  --border-01: #f1f5f9;
+  --border-02: #e2e8f0;
+  --border-03: #cbd5e1;
+  --border-04: #7f8da1;
+  --border-05: #0f172a;
+
+  /* ── Interactive accent (link) ── */
+  --action-link-06: #1f4f7b;
+  --action-link-05: #2e6dad;
+  --action-link-04: #5891d0;
+  --action-link-03: #95b8da;
+  --action-link-02: #e5eef6;
+  --action-link-01: #f1f6fb;
+  --action-link-00: #f8fbfd;
+
+  /* ── Danger ── */
+  --action-danger-06: #991b1b;
+  --action-danger-05: #dc2626;
+  --action-danger-04: #ef4444;
+  --action-danger-02: #fee2e2;
+  --action-danger-01: #fef2f2;
+
+  --action-text-link-05: #1f4f7b;
+  --action-text-danger-05: #b91c1c;
+
+  /* ── Status ── */
+  --status-success-05: var(--green-50);
+  --status-success-02: var(--green-20);
+  --status-success-01: var(--green-05);
+  --status-info-05: var(--blue-50);
+  --status-info-02: var(--blue-20);
+  --status-info-01: var(--blue-05);
+  --status-warning-05: var(--orange-50);
+  --status-warning-02: var(--orange-20);
+  --status-warning-01: var(--orange-05);
+  --status-error-05: var(--red-50);
+  --status-error-02: var(--red-20);
+  --status-error-01: var(--red-05);
+
+  /* ── Overlay / scrim ── full-screen dim behind modals, spotlights and
+     dialogs. Derived from the darkest blue primitive (--blue-95 ≈
+     rgb(4 14 37)); kept in the rgb(2 6 23) family per the slate-950 origin.
+     Light theme rides at 0.6 alpha — enough to make white chrome legible. */
+  --overlay-scrim: rgb(2 6 23 / 0.6);
+
+  /* ── Highlights / selections ── */
+  --highlight-selection: #e5eef699;
+  --highlight-accent: #f2ba6a66;
+  --sophea-selection-bg: #e5eef6;
+  --sophea-selection-fg: #143656;
+  --sophea-focus-ring: #2e6dad;
+
+  /* ── Alpha foreground tokens (Atlassian-pattern) ──
+     For text on user-supplied backgrounds (chat-panel-bg-alpha, photos).
+     Use these instead of `--text-0X` when the surface might be tinted. */
+  --text-05-alpha: color-mix(in oklch, currentColor 92%, transparent);
+  --text-04-alpha: color-mix(in oklch, currentColor 80%, transparent);
+  --text-03-alpha: color-mix(in oklch, currentColor 65%, transparent);
+  --text-02-alpha: color-mix(in oklch, currentColor 45%, transparent);
+
+  /* ── Elevation tokens (Atlassian + IBM Carbon pattern) ──
+     Elevation pairs shadow with a surface-colour shift so depth reads
+     visually in light AND dark — instead of shadow alone (which fails on
+     dark backgrounds).
+
+       0  resting   — no shadow, sits on panel
+       1  raised    — sticky chrome, hairline shadow
+       2  popover   — dropdowns, popovers
+       3  modal     — dialogs, sheets
+       4  toast     — top-level transient
+   */
+  --elevation-0-bg: var(--surface-s2);
+  --elevation-0-shadow: 0 0 #0000;
+  --elevation-1-bg: var(--surface-s2);
+  --elevation-1-shadow: 0 1px 2px 0 var(--shadow-01);
+  --elevation-2-bg: var(--surface-s2);
+  --elevation-2-shadow: 0 4px 12px -2px var(--shadow-02), 0 1px 2px 0 var(--shadow-01);
+  --elevation-3-bg: var(--surface-s2);
+  --elevation-3-shadow: 0 12px 32px -8px var(--shadow-02), 0 1px 2px 0 var(--shadow-01);
+  --elevation-4-bg: var(--surface-s2);
+  --elevation-4-shadow: 0 24px 56px -8px var(--shadow-03), 0 1px 2px 0 var(--shadow-01);
+  --shadow-01: rgba(15, 23, 42, 0.05);
+  --shadow-02: rgba(15, 23, 42, 0.1);
+  --shadow-03: rgba(15, 23, 42, 0.2);
+  --shadow-sm: 0 1px 2px 0 var(--shadow-01);
+  --shadow-md: 0 4px 12px -2px var(--shadow-02);
+  --shadow-lg: 0 12px 32px -8px var(--shadow-02);
+
+  /* ── Glass tiers ── chrome only; require non-flat backdrop */
+  --glass-thin-bg: rgba(255, 255, 255, 0.4);
+  --glass-thin-blur: saturate(1.8) blur(28px);
+  --glass-regular-bg: rgba(255, 255, 255, 0.55);
+  --glass-regular-blur: saturate(1.8) blur(40px);
+  --glass-thick-bg: rgba(255, 255, 255, 0.7);
+  --glass-thick-blur: saturate(1.8) blur(40px);
+  --glass-border: rgba(255, 255, 255, 0.4);
+  /* Thinner glass edge for surfaces hinged flush to a viewport edge (e.g. a
+     mobile nav drawer) where the full --glass-border would read too heavy. */
+  --glass-border-thin: rgba(0, 0, 0, 0.15);
+  --glass-tier-overlay: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.18) 0%,
+    rgba(255, 255, 255, 0.04) 50%,
+    rgba(255, 255, 255, 0.1) 100%
+  );
+  --glass-regular-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.12),
+    0 2px 6px rgba(15, 30, 60, 0.06);
+
+  /* ── Signature gradients ──
+     primary-button stays tied to the interactive brand (#2E6DAD family).
+     hero / featured stay tied to the aurora navy/cyan (visual continuity). */
+  --sophea-gradient-primary-button: linear-gradient(102deg, #1f4f7b 3.5%, #2e6dad 130%);
+  --sophea-gradient-featured-card: linear-gradient(159deg, #2e6dad 51%, rgba(88, 145, 208, 0) 118%);
+  --sophea-gradient-hero-sky:
+      /* Aurora-coloured vertical anthem — kept on navy/cyan, not the
+         interactive brand. Used on marketing surfaces. */ linear-gradient(
+    180deg,
+    #5b95ff 0%,
+    #387aff 25%,
+    #001d5c 50%,
+    #387aff 75%,
+    #5b95ff 88%,
+    #cddfff 96%,
+    #ffffff 100%
+  );
+  --sophea-gradient-aurora-light: linear-gradient(135deg, #d6e2f5 0%, #bccfeb 100%);
+
+  --sophea-shadow-primary-button: 0 8px 24px -8px #1f4f7bcc;
+  --sophea-shadow-primary-button-inner: inset 0 4px 18px 0 #5891d0;
+
+  /* ── Background tints (hover/active surfaces on opaque) ── */
+  --background-tint-00: var(--background-neutral-00);
+  --background-tint-01: var(--background-neutral-01);
+  --background-tint-02: var(--background-neutral-02);
+  --background-tint-03: var(--background-neutral-03);
+
+  /* ── Theme-fixed foregrounds (do not flip with the theme) ──
+     `--text-light-05` stays light in both themes (text on saturated fills);
+     `--alpha-grey-00-95` is white at 95% (primary CTA text in dark mode). */
+  --text-light-05: #ffffff;
+  --alpha-grey-00-95: #fffffff2;
+
+  /* ── Inverted tints (opposite-pole hover/selected surfaces, e.g. active
+     filter chips) ── 03 is stronger than 04, mirroring the inverted text scale. */
+  --background-tint-inverted-04: #475569;
+  --background-tint-inverted-03: #334155;
+  --text-inverted-02: #ffffff73;
+
+  /* ── Badge palette (4 vars × tone, light values) ── */
+  --badge-success-bg: var(--green-05);
+  --badge-success-fg: #147334;
+  --badge-success-border: var(--green-20);
+  --badge-success-dot: var(--green-50);
+
+  --badge-info-bg: var(--blue-05);
+  --badge-info-fg: #0a5fb0;
+  --badge-info-border: var(--blue-20);
+  --badge-info-dot: var(--blue-50);
+
+  --badge-warning-bg: var(--orange-05);
+  --badge-warning-fg: #92400e;
+  --badge-warning-border: var(--orange-20);
+  --badge-warning-dot: var(--orange-50);
+
+  --badge-error-bg: var(--red-05);
+  --badge-error-fg: #b91c1c;
+  --badge-error-border: var(--red-20);
+  --badge-error-dot: var(--red-50);
+
+  --badge-purple-bg: var(--purple-05);
+  --badge-purple-fg: #7e4bb2;
+  --badge-purple-border: var(--purple-20);
+  --badge-purple-dot: var(--purple-50);
+
+  --badge-brand-bg: #e5eef6;
+  --badge-brand-fg: var(--theme-primary-06);
+  --badge-brand-border: var(--blue-20);
+  --badge-brand-dot: var(--theme-primary-05);
+
+  --badge-neutral-bg: var(--surface-s3);
+  --badge-neutral-fg: var(--text-03);
+  --badge-neutral-border: var(--border-02);
+  --badge-neutral-dot: var(--text-03);
+
+  /* Bold tone backgrounds (solid pill fill) — theme-stable darks so white
+     text clears AA (≥4.5:1) on each in both light and dark scopes. */
+  --badge-bold-success: #00833a;
+  --badge-bold-info: #1f5fd6;
+  --badge-bold-warning: var(--orange-50);
+  --badge-bold-error: #c63a30;
+  --badge-bold-purple: #8a3fd0;
+  --badge-bold-brand: var(--theme-primary-05);
+  --badge-bold-neutral: var(--text-04);
+
+  /* ── Avatar / categorical palette ── a small hue-spread ramp for
+     participant chips, avatars and any "assign a colour per identity" need.
+     Hues are pulled from the DS primitive families (blue / green / purple /
+     orange / red) at their bold -60 tier, with a teal 6th for spread. Every
+     value clears WCAG AA (≥4.5:1) against WHITE text and is intentionally
+     theme-stable — identity colours must not shift when the theme flips, and
+     these darks read equally well on light and dark surfaces. */
+  --avatar-01: var(--blue-60); /* #3363c3 — 5.66:1 on white */
+  --avatar-02: #15803d; /* green   — 5.02:1 on white */
+  --avatar-03: var(--purple-60); /* #7e4bb2 — 5.94:1 on white */
+  --avatar-04: var(--orange-60); /* #b44105 — 5.68:1 on white */
+  --avatar-05: var(--red-60); /* #b02b27 — 6.52:1 on white */
+  --avatar-06: #0f766e; /* teal    — 5.47:1 on white */
+
+  /* ── Banner palette (in-flow notice) ── */
+  --banner-info-bg: #dbeafe;
+  --banner-info-border: #1d4e8b;
+  --banner-info-fg: #1e3a8a;
+  --banner-warning-bg: #fed7aa;
+  --banner-warning-border: #a04d00;
+  --banner-warning-fg: #7c2d12;
+  --banner-error-bg: #fee2e2;
+  --banner-error-border: #b91c1c;
+  --banner-error-fg: #7f1d1d;
+
+  /* ── App shell ──
+     Chrome for the AppShell pattern (src/patterns/AppShell): the rounded shell
+     card, its activity rail, contextual sidebar, and main column. Values
+     copied verbatim from the live nous/web implementation
+     (staging.nous.sophea.ai, extracted 2026-06-12). */
+  --shell-card-bg:
+    radial-gradient(125% 78% at 50% -8%, #fff 0%, #fff0 52%),
+    linear-gradient(180deg, #eef3fa 0%, #e6edf7 100%);
+  --shell-card-border: #c3d4ec;
+  --shell-top-accent: linear-gradient(
+    90deg,
+    #2e6dad00 0%,
+    #2e6dad 28%,
+    #5891d0 50%,
+    #2e6dad 72%,
+    #2e6dad00 100%
+  );
+  --shell-divider: #d7e1f0;
+  --shell-region-glass: #fff6;
+  --shell-image-frost: #ffffff40;
+  --shell-sidebar-bg: #f4f7fba8;
+  --shell-search-bg: #f4f7fb;
+  --shell-search-bg-open: #fff;
+  --shell-search-kbd-bg: #e2e9f5;
+
+  /* Brand tints — replace the hardcoded rgba(46,109,173,…) literals that lived
+     in nous ActivityBar.tsx / app-layouts.tsx. #2E6DAD === rgb(46, 109, 173). */
+  --shell-rail-item-selected-bg: rgba(46, 109, 173, 0.18);
+  --shell-rail-item-hover-bg: rgba(46, 109, 173, 0.1);
+  --shell-chrome-hover-bg: rgba(46, 109, 173, 0.14);
+
+  /* Mobile drawer surfaces — tokenized from the nous `glass-regular` /
+     `bg-mask-03` utilities so the extracted drawer carries no app-only CSS.
+     The drawer panel applies the full glass-regular recipe (overlay, border,
+     shadow — all existing DS glass tokens); the scrim is nous --mask-03. */
+  --shell-drawer-glass: var(--glass-regular-bg);
+  --shell-drawer-scrim: #1e2d4b57;
+}
+
+/* ---------- Dark mode primitives ---------- */
+.dark,
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  --sophea-ink-100: #f1f5f9;
+  --sophea-ink-95: #cbd5e1;
+  --sophea-ink-90: #7589a3;
+  --sophea-chrome-20: #334155;
+  --sophea-chrome-10: #1e293b;
+  --sophea-chrome-00: #0a0e1a;
+
+  /* In dark mode, brand still climbs from the same #2E6DAD anchor; 06 lifts
+     to the brightest tier so it sits visibly against navy. */
+  --theme-primary-06: #5891d0;
+  --theme-primary-05: #2e6dad;
+  --theme-primary-04: #1f4f7b;
+
+  --text-05: #f1f5f9;
+  --text-04: #cbd5e1;
+  --text-03: #8699b0;
+  --text-02: #475569;
+  --text-01: #334155;
+  --text-inverted-05: #0f172a;
+
+  --surface-s1: #0b1220;
+  --surface-s2: #131c2d;
+  --surface-s3: #1b263f;
+  --surface-s4: #243047;
+
+  --background-neutral-00: #0a0e1a;
+  --background-neutral-01: #111827;
+  --background-neutral-02: #1a2035;
+  --background-neutral-03: #1e2842;
+  --background-neutral-04: #334155;
+
+  /* Inverted tints flip to light surfaces in dark theme */
+  --background-tint-inverted-04: #cbd5e1;
+  --background-tint-inverted-03: #e2e8f0;
+  --text-inverted-02: #0f172a73;
+
+  --border-01: #1e293b;
+  --border-02: #2a3552;
+  --border-03: #334155;
+  --border-04: #6b7a90;
+  --border-05: #f1f5f9;
+
+  --action-link-06: #5891d0;
+  --action-link-05: #2e6dad;
+  --action-link-04: #1f4f7b;
+  --action-link-02: #1d2a45;
+  --action-link-01: #0f2538;
+
+  --action-danger-06: #fca5a5;
+  --action-danger-05: #f87171;
+  --action-danger-02: #3f1414;
+
+  --action-text-link-05: #8ab4e0;
+  --action-text-danger-05: #fca5a5;
+
+  /* Dark theme lifts the scrim opacity (0.6 → 0.72): on an already-dark
+     backdrop a 0.6 dim reads too weak to separate the layered surface. */
+  --overlay-scrim: rgb(2 6 23 / 0.72);
+
+  /* ── Status (dark) ── 01/02 are surface tints; without these the light
+     pastels leak into dark mode and near-white text lands on them.
+     05 stays the shared accent value, which reads on both themes. */
+  --status-success-01: #14291e;
+  --status-success-02: #1f4733;
+  --status-info-01: #16263d;
+  --status-info-02: #2b4a73;
+  --status-warning-01: #2e2412;
+  --status-warning-02: #54401c;
+  --status-error-01: #2e1518;
+  --status-error-02: #5a2329;
+
+  --highlight-selection: #2e6dad66;
+  --highlight-accent: #5891d066;
+
+  /* Elevation — dark mode lifts surface colour with depth (Carbon pattern).
+     Dark panels alternate brighter tints rather than going darker. */
+  --elevation-0-bg: var(--surface-s2);
+  --elevation-1-bg: var(--surface-s3);
+  --elevation-2-bg: var(--surface-s3);
+  --elevation-3-bg: var(--surface-s4);
+  --elevation-4-bg: var(--surface-s4);
+  --elevation-0-shadow: 0 0 #0000;
+  --elevation-1-shadow: 0 1px 2px 0 var(--shadow-01);
+  --elevation-2-shadow: 0 4px 12px -2px var(--shadow-02), 0 1px 2px 0 var(--shadow-01);
+  --elevation-3-shadow: 0 12px 32px -8px var(--shadow-03), 0 1px 2px 0 var(--shadow-02);
+  --elevation-4-shadow: 0 24px 56px -8px var(--shadow-03), 0 2px 4px 0 var(--shadow-02);
+
+  --shadow-01: rgba(0, 0, 0, 0.3);
+  --shadow-02: rgba(0, 0, 0, 0.45);
+  --shadow-03: rgba(0, 0, 0, 0.6);
+
+  --glass-thin-bg: rgba(15, 22, 35, 0.45);
+  --glass-regular-bg: rgba(15, 22, 35, 0.72);
+  --glass-thick-bg: rgba(15, 22, 35, 0.88);
+  --glass-border: rgba(255, 255, 255, 0.18);
+  --glass-border-thin: rgba(255, 255, 255, 0.12);
+  --glass-tier-overlay: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0.03) 50%,
+    rgba(255, 255, 255, 0.06) 100%
+  );
+
+  --sophea-gradient-aurora-dark: linear-gradient(135deg, #001d5c 0%, #0b1220 100%);
+  --sophea-gradient-aurora-dark-blobs:
+    radial-gradient(circle at 15% 25%, rgba(91, 149, 255, 0.55) 0%, transparent 55%),
+    radial-gradient(circle at 80% 65%, rgba(56, 122, 255, 0.45) 0%, transparent 55%),
+    radial-gradient(circle at 50% 90%, rgba(0, 50, 150, 0.55) 0%, transparent 55%),
+    linear-gradient(135deg, #001d5c 0%, #0b1220 100%);
+
+  /* ── Badge palette (4 vars × tone, dark values) ── */
+  --badge-success-bg: #001503;
+  --badge-success-fg: var(--green-20);
+  --badge-success-border: #004214;
+  --badge-success-dot: var(--green-40);
+
+  --badge-info-bg: #040e25;
+  --badge-info-fg: var(--blue-20);
+  --badge-info-border: #173268;
+  --badge-info-dot: var(--blue-40);
+
+  --badge-warning-bg: #200600;
+  --badge-warning-fg: var(--orange-20);
+  --badge-warning-border: #5d1e01;
+  --badge-warning-dot: var(--orange-40);
+
+  --badge-error-bg: #210504;
+  --badge-error-fg: #f8a59b;
+  --badge-error-border: #5f1a16;
+  --badge-error-dot: #e8594e;
+
+  --badge-purple-bg: #140921;
+  --badge-purple-fg: var(--purple-20);
+  --badge-purple-border: #41255e;
+  --badge-purple-dot: #a96fe8;
+
+  --badge-brand-bg: #1a2744;
+  --badge-brand-fg: var(--blue-20);
+  --badge-brand-border: #173268;
+  --badge-brand-dot: var(--theme-primary-06);
+
+  --badge-neutral-bg: var(--surface-s3);
+  --badge-neutral-fg: var(--text-03);
+  --badge-neutral-border: var(--border-02);
+  --badge-neutral-dot: var(--text-03);
+
+  --badge-bold-success: #00833a;
+  --badge-bold-info: #1f5fd6;
+  --badge-bold-warning: var(--orange-40);
+  --badge-bold-error: #c63a30;
+  --badge-bold-purple: #8a3fd0;
+  --badge-bold-brand: var(--theme-primary-05);
+  /* --text-04 is #cbd5e1 in dark (white on it = 1.48 FAIL); pin to a
+     theme-stable slate so white text clears AA (≥7:1). */
+  --badge-bold-neutral: #475569;
+
+  /* ── Banner palette (dark) ── */
+  --banner-info-bg: #0f2238;
+  --banner-info-border: #3b82f6;
+  --banner-info-fg: #bfdbfe;
+  --banner-warning-bg: #3a1f00;
+  --banner-warning-border: #f97316;
+  --banner-warning-fg: #fed7aa;
+  --banner-error-bg: #3a1213;
+  --banner-error-border: #ef4444;
+  --banner-error-fg: #fecaca;
+
+  /* ── Ported from Sophea Meet (adjudicated 2026-06-06): dark refinements
+     that previously lived only in the app's index.css. ── */
+  --text-inverted-04: #1e293b;
+  --text-inverted-03: #334155;
+  --status-success-05: #34d399;
+  --status-success-01: #052e16;
+  --status-warning-05: #f59e0b;
+  --status-warning-01: #1c1207;
+  --status-info-05: #60a5fa;
+  --status-info-01: #0b1e3f;
+  --status-error-05: #f87171;
+  --status-error-01: #3f1414;
+  --sophea-focus-ring: #5891d0;
+  --sophea-shadow-primary-button: 0 8px 24px rgba(0, 0, 0, 0.6);
+  --sophea-shadow-primary-button-inner: inset 0 4px 18px rgba(91, 149, 255, 0.4);
+  --glass-thin-blur: saturate(1.8) blur(28px);
+  --glass-regular-blur: saturate(1.8) blur(40px);
+  --glass-thick-blur: saturate(1.8) blur(40px);
+
+  /* ── App shell (dark) ──
+     Values copied verbatim from the live nous/web implementation
+     (staging.nous.sophea.ai, extracted 2026-06-12). */
+  --shell-card-bg:
+    radial-gradient(125% 78% at 50% -8%, #16294a 0%, #12213c00 52%),
+    linear-gradient(180deg, #0b1426 0%, #080f1e 100%);
+  --shell-card-border: #5891d038;
+  --shell-top-accent: linear-gradient(
+    90deg,
+    #2e6dad00 0%,
+    #2e6dadd9 28%,
+    #5891d0d9 50%,
+    #2e6dadd9 72%,
+    #2e6dad00 100%
+  );
+  --shell-divider: #5891d01f;
+  --shell-region-glass: #141e3473;
+  --shell-image-frost: #0a101e4d;
+  --shell-sidebar-bg: #070d1a6b;
+  --shell-search-bg: #1a25408c;
+  --shell-search-bg-open: #1a2540cc;
+  --shell-search-kbd-bg: #0a101ecc;
+
+  /* The brand rgba tints are theme-static in nous (same class string in both
+     themes); kept identical to the light values intentionally. */
+  --shell-rail-item-selected-bg: rgba(46, 109, 173, 0.18);
+  --shell-rail-item-hover-bg: rgba(46, 109, 173, 0.1);
+  --shell-chrome-hover-bg: rgba(46, 109, 173, 0.14);
+
+  --shell-drawer-glass: var(--glass-regular-bg);
+  /* nous --mask-03 dark: var(--alpha-grey-100-40) → #0006 */
+  --shell-drawer-scrim: rgba(0, 0, 0, 0.4);
+}
+
+/* ---------- Semantic alias tier ---------- */
+:root,
+.dark {
+  --color-fg-primary: var(--text-05);
+  --color-fg-secondary: var(--text-04);
+  --color-fg-tertiary: var(--text-03);
+  --color-fg-muted: var(--text-02);
+  --color-fg-disabled: var(--text-01);
+  --color-fg-on-accent: var(--text-inverted-05);
+
+  --color-surface-app: var(--surface-s1);
+  --color-surface-panel: var(--surface-s2);
+  --color-surface-inset: var(--surface-s3);
+  --color-surface-active: var(--surface-s4);
+
+  --color-border-subtle: var(--border-01);
+  --color-border-default: var(--border-02);
+  --color-border-strong: var(--border-03);
+  --color-border-interactive: var(--border-04);
+
+  --color-link: var(--action-link-05);
+  --color-link-hover: var(--action-link-06);
+  --color-danger: var(--action-danger-05);
+
+  --color-status-success: var(--status-success-05);
+  --color-status-info: var(--status-info-05);
+  --color-status-warning: var(--status-warning-05);
+  --color-status-error: var(--status-error-05);
+}
+
+/* ---------- Spacing / radius / motion / z-index ---------- */
+:root {
+  --space-0: 0;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --app-frame-inset: var(--space-2);
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px; /* cards & surfaces */
+  --radius-xl: 16px; /* outer chrome (header, rail) */
+  --radius-2xl: 24px;
+  --radius-full: 9999px;
+
+  --duration-instant: 0ms;
+  --duration-fast: 120ms;
+  --duration-base: 200ms;
+  --duration-slow: 320ms;
+  --duration-deliberate: 480ms;
+
+  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  --z-base: 0;
+  --z-raised: 10;
+  --z-sticky: 20;
+  --z-popover: 40;
+  --z-modal: 50;
+  --z-toast: 60;
+  --z-tooltip: 70;
+
+  /* Density mode tokens (default = comfortable). Switching density only
+     changes these five values; components read them instead of hard-coding. */
+  --density-row: 36px;
+  --density-tap: 40px;
+  --density-x-pad: 12px;
+  --density-y-pad: 8px;
+  --density-gap: 8px;
+}
+
+[data-density="compact"] {
+  --density-row: 28px;
+  --density-tap: 32px;
+  --density-x-pad: 8px;
+  --density-y-pad: 4px;
+  --density-gap: 4px;
+}
+
+/* ============================================================================
+ *  ACCESSIBILITY MODES
+ *  prefers-contrast: more  → climbs text + border contrast, removes glass
+ *  forced-colors           → honour OS high-contrast palette
+ * ========================================================================== */
+@media (prefers-contrast: more) {
+  :root {
+    --text-04: #000000;
+    --text-03: #1f2937;
+    --text-02: #1f2937;
+    --border-01: #94a3b8;
+    --border-02: #64748b;
+    --border-03: #334155;
+    --sophea-focus-ring: #143656;
+  }
+  .dark,
+  [data-theme="dark"] {
+    --text-04: #ffffff;
+    --text-03: #f1f5f9;
+    --text-02: #cbd5e1;
+    --border-01: #475569;
+    --border-02: #94a3b8;
+    --border-03: #cbd5e1;
+    --sophea-focus-ring: #5891d0;
+  }
+  .glass-thin,
+  .glass-regular,
+  .glass-thick {
+    background-image: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background-color: var(--surface-s2);
+    border-color: var(--border-02);
+  }
+}
+
+@media (forced-colors: active) {
+  .glass-thin,
+  .glass-regular,
+  .glass-thick {
+    background-image: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    border: 1px solid CanvasText;
+    background-color: Canvas;
+  }
+}
+
+/* ============================================================================
+ *  TYPOGRAPHY
+ *  Codebase uses named font presets (TextFont in Opal). Each preset bundles
+ *  family + size + weight + leading. The grid below mirrors what the React
+ *  Text component renders.
+ * ========================================================================== */
+:root {
+  --font-family-sans:
+    "Geist", "Geist Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  --font-family-mono:
+    "DM Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
+    monospace;
+  /* Small monospace pairing for secondary/metadata mono text (IDs, timestamps,
+     token counts). Alias of the mono stack so consumers can theme it apart from
+     code/pre if needed. */
+  --font-secondary-mono: var(--font-family-mono);
+
+  /* numeric scale */
+  --font-size-xs: 0.75rem; /* 12 */
+  --font-size-sm: 0.875rem; /* 14 */
+  --font-size-base: 1rem; /* 16 */
+  --font-size-lg: 1.125rem; /* 18 */
+  --font-size-xl: 1.25rem; /* 20 */
+  --font-size-2xl: 1.5rem; /* 24 */
+  --font-size-3xl: 1.875rem; /* 30 */
+  --font-size-4xl: 2.25rem; /* 36 */
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --line-height-tight: 1.2;
+  --line-height-base: 1.5;
+  --line-height-loose: 1.75;
+
+  --letter-spacing-tight: -0.01em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.04em;
+}
+
+/* Body default — set on app shell */
+body,
+.sn-body {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-base);
+  letter-spacing: var(--letter-spacing-tight);
+  color: var(--color-fg-secondary);
+}
+
+/* ── Opal-style named presets ───────────────────────────────────────────────
+   Production renders <Text font="…"/> using these named bundles. */
+
+.font-heading-h1 {
+  font-family: var(--font-family-sans);
+  font-size: 2.25rem; /* 36px */
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  color: var(--color-fg-primary);
+}
+.font-heading-h2 {
+  font-family: var(--font-family-sans);
+  font-size: 1.75rem; /* 28px */
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.2;
+  letter-spacing: -0.015em;
+  color: var(--color-fg-primary);
+}
+.font-heading-h3 {
+  font-family: var(--font-family-sans);
+  font-size: 1.25rem; /* 20px */
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--color-fg-primary);
+}
+.font-heading-h4 {
+  font-family: var(--font-family-sans);
+  font-size: 1rem; /* 16px */
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.35;
+  color: var(--color-fg-primary);
+}
+.font-main-ui-body {
+  font-family: var(--font-family-sans);
+  font-size: 0.875rem; /* 14px — the most common body weight */
+  font-weight: var(--font-weight-regular);
+  line-height: 1.45;
+  color: var(--color-fg-secondary);
+}
+.font-main-ui-action {
+  font-family: var(--font-family-sans);
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-medium);
+  line-height: 1.4;
+  color: var(--color-fg-primary);
+}
+.font-main-content {
+  font-family: var(--font-family-sans);
+  font-size: 1rem; /* 16px — long-form content (chat msgs) */
+  font-weight: var(--font-weight-regular);
+  line-height: 1.55;
+  color: var(--color-fg-primary);
+}
+.font-secondary-body {
+  font-family: var(--font-family-sans);
+  font-size: 0.8125rem; /* 13px — captions, helper text */
+  font-weight: var(--font-weight-regular);
+  line-height: 1.4;
+  color: var(--color-fg-tertiary);
+}
+.font-secondary-action {
+  font-family: var(--font-family-sans);
+  font-size: 0.8125rem;
+  font-weight: var(--font-weight-medium);
+  line-height: 1.35;
+  color: var(--color-fg-secondary);
+}
+.font-section-title {
+  /* Sidebar section labels — Greek-aware uppercase strips tonos.
+     Letterform: small, all-caps, tracked-out. */
+  font-family: var(--font-family-sans);
+  font-size: 0.6875rem; /* 11px */
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.4;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-fg-tertiary);
+}
+.font-code,
+code,
+kbd,
+pre {
+  font-family: var(--font-family-mono);
+  font-size: 0.8125rem;
+  font-weight: var(--font-weight-regular);
+  line-height: 1.5;
+}
+.font-secondary-mono {
+  /* Small monospace for secondary/metadata text — IDs, timestamps, token
+     counts. Smaller and tertiary-colored vs `.font-code`. */
+  font-family: var(--font-secondary-mono);
+  font-size: 0.75rem; /* 12px */
+  font-weight: var(--font-weight-regular);
+  line-height: 1.4;
+  color: var(--color-fg-tertiary);
+}
+
+/* ── Semantic element defaults ──────────────────────────────────────────────
+   So plain HTML stays on-system without classes. */
+h1,
+.sn-h1 {
+  @apply font-heading-h1;
+}
+h2,
+.sn-h2 {
+  @apply font-heading-h2;
+}
+h3,
+.sn-h3 {
+  @apply font-heading-h3;
+}
+h4,
+.sn-h4 {
+  @apply font-heading-h4;
+}
+
+/* For non-Tailwind contexts (preview cards), duplicate via direct rules: */
+h1 {
+  font: 600 2.25rem/1.15 var(--font-family-sans);
+  letter-spacing: -0.02em;
+  color: var(--color-fg-primary);
+}
+h2 {
+  font: 600 1.75rem/1.2 var(--font-family-sans);
+  letter-spacing: -0.015em;
+  color: var(--color-fg-primary);
+}
+h3 {
+  font: 600 1.25rem/1.3 var(--font-family-sans);
+  letter-spacing: -0.01em;
+  color: var(--color-fg-primary);
+}
+h4 {
+  font: 600 1rem/1.35 var(--font-family-sans);
+  color: var(--color-fg-primary);
+}
+p {
+  font: 400 0.9375rem/1.55 var(--font-family-sans);
+  color: var(--color-fg-secondary);
+}
+
+/* ============================================================================
+ *  UTILITY CLASSES — Glass + Surface
+ *  (Mirrors web/src/app/css/sophea_v1.css so previews look like production.)
+ * ========================================================================== */
+.surface-s1 {
+  background-color: var(--surface-s1);
+}
+.surface-s2 {
+  background-color: var(--surface-s2);
+}
+.surface-s3 {
+  background-color: var(--surface-s3);
+}
+.surface-s4 {
+  background-color: var(--surface-s4);
+}
+
+.glass-thin,
+.glass-regular,
+.glass-thick {
+  isolation: isolate;
+  background-image: var(--glass-tier-overlay);
+  border: 0.5px solid var(--glass-border);
+}
+.glass-thin {
+  background-color: var(--glass-thin-bg);
+  -webkit-backdrop-filter: var(--glass-thin-blur);
+  backdrop-filter: var(--glass-thin-blur);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.55),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
+}
+.glass-regular {
+  background-color: var(--glass-regular-bg);
+  -webkit-backdrop-filter: var(--glass-regular-blur);
+  backdrop-filter: var(--glass-regular-blur);
+  box-shadow: var(--glass-regular-shadow);
+}
+.glass-thick {
+  background-color: var(--glass-thick-bg);
+  -webkit-backdrop-filter: var(--glass-thick-blur);
+  backdrop-filter: var(--glass-thick-blur);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.6),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
+    0 8px 24px rgba(15, 30, 60, 0.1);
+}
+
+/* Aurora backdrop — exact 3-layer recipe from the production app
+   (web/src/app/css/sophea_v1.css). Layer order, top → bottom:
+     1. body::before — spinning conic-gradient, blur 80px, 120s rotation
+     2. body bg-image — radial blobs (dark only) + diagonal gradient
+     3. body background-color base
+   Required so glass tiers above have color variation to refract. */
+@keyframes sophea-aurora-spin {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+/* ---------- Glass tier shadows · dark variant + extra UI-kit tokens ----- */
+.dark,
+[data-theme="dark"] {
+  --glass-regular-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.4),
+    0 2px 6px rgba(0, 0, 0, 0.4);
+}
+.dark .glass-thin,
+[data-theme="dark"] .glass-thin {
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.16),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
+}
+.dark .glass-thick,
+[data-theme="dark"] .glass-thick {
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
+    0 8px 24px rgba(0, 0, 0, 0.5);
+}
+
+/* When the OS asks for reduced transparency, glass collapses to a flat opaque
+   surface — drop the live blur + refraction overlay so chrome stays legible. */
+@media (prefers-reduced-transparency: reduce) {
+  .glass-thin,
+  .glass-regular,
+  .glass-thick {
+    background-image: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background-color: var(--surface-s2);
+  }
+}
+
+/* Brand-mark foreground — owl mask colour, flips with theme. */
+:root {
+  --brand-mark-fg: #0f172a;
+}
+.dark,
+[data-theme="dark"] {
+  --brand-mark-fg: #ffffff;
+}
+
+/* Soft focus halo for inputs. */
+:root {
+  --sophea-focus-halo: rgba(46, 109, 173, 0.15);
+}
+.dark,
+[data-theme="dark"] {
+  --sophea-focus-halo: rgba(88, 145, 208, 0.18);
+}
+.sn-aurora-backdrop {
+  position: relative;
+  background-color: #d6e2f5;
+  background-image: linear-gradient(135deg, #d6e2f5 0%, #bccfeb 100%);
+  background-attachment: fixed;
+  isolation: isolate;
+}
+.sn-aurora-backdrop::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 200vmax;
+  height: 200vmax;
+  background-image: conic-gradient(
+    from 0deg,
+    rgba(80, 138, 251, 0.45) 0deg,
+    rgba(60, 188, 242, 0.35) 60deg,
+    rgba(234, 242, 255, 0) 120deg,
+    rgba(40, 109, 248, 0.4) 180deg,
+    rgba(51, 99, 195, 0.35) 240deg,
+    rgba(234, 242, 255, 0) 300deg,
+    rgba(80, 138, 251, 0.45) 360deg
+  );
+  filter: blur(80px);
+  z-index: -1;
+  pointer-events: none;
+  animation: sophea-aurora-spin 120s linear infinite;
+}
+.dark .sn-aurora-backdrop,
+[data-theme="dark"] .sn-aurora-backdrop {
+  background-color: #001d5c;
+  background-image:
+    radial-gradient(circle at 15% 25%, rgba(91, 149, 255, 0.55) 0%, transparent 55%),
+    radial-gradient(circle at 80% 65%, rgba(56, 122, 255, 0.45) 0%, transparent 55%),
+    radial-gradient(circle at 50% 90%, rgba(0, 50, 150, 0.55) 0%, transparent 55%),
+    linear-gradient(135deg, #001d5c 0%, #0b1220 100%);
+}
+.dark .sn-aurora-backdrop::before,
+[data-theme="dark"] .sn-aurora-backdrop::before {
+  background-image: conic-gradient(
+    from 0deg,
+    rgba(80, 138, 251, 0.6) 0deg,
+    rgba(60, 188, 242, 0.45) 60deg,
+    rgba(5, 13, 34, 0) 120deg,
+    rgba(40, 109, 248, 0.55) 180deg,
+    rgba(23, 50, 104, 0.7) 240deg,
+    rgba(5, 13, 34, 0) 300deg,
+    rgba(80, 138, 251, 0.6) 360deg
+  );
+}
+/* Flat fallback colors if static / no JS / no transparency support. */
+@media (prefers-reduced-transparency: reduce) {
+  .sn-aurora-backdrop {
+    background: #cfdcef !important;
+  }
+  .dark .sn-aurora-backdrop,
+  [data-theme="dark"] .sn-aurora-backdrop {
+    background: #0a1736 !important;
+  }
+  .sn-aurora-backdrop::before {
+    display: none !important;
+  }
+}