/* Shared design tokens */

:root {
  --rd-font-sans: "Inter", "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rd-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --rd-font-size-11: 0.6875rem;
  --rd-font-size-12: 0.75rem;
  --rd-font-size-13: 0.8125rem;
  --rd-font-size-14: 0.875rem;
  --rd-font-size-16: 1rem;
  --rd-font-size-20: 1.25rem;
  --rd-font-size-24: 1.5rem;
  --rd-font-size-28: 1.75rem;
  --rd-line-height-tight: 1.2;
  --rd-line-height-snug: 1.35;
  --rd-line-height-normal: 1.5;
  --rd-line-height-relaxed: 1.7;
  --rd-font-weight-regular: 400;
  --rd-font-weight-medium: 500;
  --rd-font-weight-semibold: 600;
  --rd-font-weight-bold: 700;
  --rd-space-0: 0;
  --rd-space-1: 0.25rem;
  --rd-space-2: 0.5rem;
  --rd-space-3: 0.75rem;
  --rd-space-4: 1rem;
  --rd-space-5: 1.25rem;
  --rd-space-6: 1.5rem;
  --rd-space-8: 2rem;
  --rd-space-10: 2.5rem;
  --rd-space-12: 3rem;
  --rd-space-16: 4rem;
  /* Radii — tight "serious workflow" scale. Kept in sync with the canonical
     --radius-* tokens below; these --rd-radius-* names are legacy aliases.
     The scale is capped at 12px on purpose: operational surfaces should read
     precise, not inflated. */
  --rd-radius-sm: var(--radius-sm);   /* 8px  — card        */
  --rd-radius-md: var(--radius-md);   /* 10px — panel       */
  --rd-radius-lg: var(--radius-lg);   /* 12px — dialog      */
  --rd-radius-xl: var(--radius-lg);   /* 12px — capped      */
  --rd-radius-pill: 999px;

  /*
   * Shared breakpoint registry. The current stack serves CSS files directly, so
   * width-based `@media` rules cannot consume `var()`. Keep responsive queries
   * aligned to this literal scale and update this registry before adding a new
   * breakpoint value.
   */
  --rd-breakpoint-380: 380px;
  --rd-breakpoint-420: 420px;
  --rd-breakpoint-480: 480px;
  --rd-breakpoint-520: 520px;
  --rd-breakpoint-521: 521px;
  --rd-breakpoint-560: 560px;
  --rd-breakpoint-580: 580px;
  --rd-breakpoint-600: 600px;
  --rd-breakpoint-640: 640px;
  --rd-breakpoint-680: 680px;
  --rd-breakpoint-700: 700px;
  --rd-breakpoint-719: 719px;
  --rd-breakpoint-720: 720px;
  --rd-breakpoint-721: 721px;
  --rd-breakpoint-760: 760px;
  --rd-breakpoint-768: 768px;
  --rd-breakpoint-780: 780px;
  --rd-breakpoint-800: 800px;
  --rd-breakpoint-820: 820px;
  --rd-breakpoint-821: 821px;
  --rd-breakpoint-860: 860px;
  --rd-breakpoint-861: 861px;
  --rd-breakpoint-900: 900px;
  --rd-breakpoint-920: 920px;
  --rd-breakpoint-960: 960px;
  --rd-breakpoint-980: 980px;
  --rd-breakpoint-1023: 1023px;
  --rd-breakpoint-1024: 1024px;
  --rd-breakpoint-1040: 1040px;
  --rd-breakpoint-1080: 1080px;
  --rd-breakpoint-1100: 1100px;
  --rd-breakpoint-1120: 1120px;
  --rd-breakpoint-1160: 1160px;
  --rd-breakpoint-1180: 1180px;
  --rd-breakpoint-1240: 1240px;
  --rd-breakpoint-1280: 1280px;
  --rd-breakpoint-1380: 1380px;
  --rd-breakpoint-1460: 1460px;

}

/* RecruiterDocs shared primitives: cards, tables, lists */

/* ─── Design token system ─── */
/*
 * Deprecated compatibility palette. These hex-named aliases keep legacy
 * bundles rendering while color usage migrates to the semantic tokens above.
 * Do not add new `--rd-color-<hex>` entries; add or reuse semantic tokens
 * instead and delete dead aliases as they go dark.
 */
:root {
  color-scheme: light dark;

  /* Semantic color tokens */
  --color-canvas: #f3f5f7;
  --color-canvas-muted: #eef2f7;
  --color-canvas-glow: rgba(148, 163, 184, 0.14);
  --color-brand-glow: rgba(191, 219, 254, 0.16);
  --color-surface: rgba(255, 255, 255, 0.94);
  --color-surface-elevated: rgba(255, 255, 255, 0.98);
  --color-surface-muted: rgba(246, 248, 251, 0.92);
  --color-surface-header: rgba(249, 250, 251, 0.92);
  --color-border-subtle: rgba(15, 23, 42, 0.09);
  --color-border-soft: rgba(15, 23, 42, 0.06);
  --color-border-strong: rgba(15, 23, 42, 0.14);
  --color-text: #101828;
  --color-text-soft: #475467;
  --color-text-muted: #667085;
  --color-text-inverse: #ffffff;
  --color-brand-rgb: 38, 79, 118;
  --color-brand-strong-rgb: 22, 57, 91;
  --color-brand: #264f76;
  --color-brand-strong: #16395b;
  --color-brand-soft: rgba(38, 79, 118, 0.12);
  --color-brand-border: rgba(38, 79, 118, 0.22);
  --color-focus-ring: rgba(38, 79, 118, 0.22);
  --color-success-surface: #ecfdf5;
  --color-success-text: #166534;
  --color-success-border: rgba(22, 163, 74, 0.28);
  --color-warning-surface: #fff7ed;
  --color-warning-text: #9a5610;
  --color-warning-border: rgba(245, 158, 11, 0.35);
  --color-danger-surface: #fef2f2;
  --color-danger-text: #b42318;
  --color-danger-border: rgba(220, 38, 38, 0.3);
  --color-info-surface: #eff6ff;
  --color-info-text: var(--color-brand-strong);
  --color-info-border: rgba(var(--color-brand-rgb), 0.32);
  --color-text-strong: color-mix(in srgb, #0f172a 92%, transparent);
  --color-text-stronger: color-mix(in srgb, #0f172a 94%, transparent);
  --color-text-soft: #475467;
  --color-text-inverse-muted: color-mix(in srgb, #e2e8f0 82%, transparent);

  /* ── Semantic intent contract ──────────────────────────────────────────
     BLUE (brand) is reserved for ACTION + identity. Passive chrome —
     current-tab markers, nav underlines, index/order/step badges, list
     selection — uses NEUTRAL ink so it reads as structure, not as a click
     target. STATUS keeps success/warn/neutral. RISK is its own escalating
     scale (attention → critical), kept distinct from incidental info-blue.
     Neutral values are mixed from --color-text so they flip with the theme
     automatically (dark ink on light surfaces, light ink on dark). */
  --chrome-selected-line: var(--color-text-soft);
  --chrome-selected-fill: var(--color-text);
  --chrome-selected-fill-text: var(--color-canvas);
  --chrome-selected-soft: color-mix(in srgb, var(--color-text) 7%, transparent);
  --chrome-selected-soft-border: color-mix(in srgb, var(--color-text) 14%, transparent);
  --badge-index-surface: color-mix(in srgb, var(--color-text) 7%, transparent);
  --badge-index-text: var(--color-text-soft);

  /* Risk = escalating attention, deliberately NOT blue. */
  --risk-attention-surface: var(--color-warning-surface);
  --risk-attention-text: var(--color-warning-text);
  --risk-attention-border: var(--color-warning-border);
  --risk-attention-accent: var(--tone-amber-500);
  --risk-critical-surface: var(--color-danger-surface);
  --risk-critical-text: var(--color-danger-text);
  --risk-critical-border: var(--color-danger-border);
  --risk-critical-accent: var(--tone-red-500);

  /* Shared overlays and translucent surfaces for legacy hybrid pages */
  --overlay-ink-02: color-mix(in srgb, #0f172a 2%, transparent);
  --overlay-frost-90-2: color-mix(in srgb, #f8fafc 90%, transparent);
  --overlay-haze-90: color-mix(in srgb, #f1f5f9 90%, transparent);
  --overlay-ceff6ff-94: color-mix(in srgb, #eff6ff 94%, transparent);
  --overlay-frost-96: color-mix(in srgb, #f8fafc 96%, transparent);
  --overlay-white-98-2: color-mix(in srgb, #ffffff 98%, transparent);
  --overlay-frost-98-2: color-mix(in srgb, #f8fafc 98%, transparent);
  --overlay-ink-13: color-mix(in srgb, #0f172a 13%, transparent);
  --overlay-slate-05: color-mix(in srgb, #94a3b8 5%, transparent);
  --overlay-white-94-2: color-mix(in srgb, #ffffff 94%, transparent);
  --overlay-black-06: color-mix(in srgb, #000000 6%, transparent);
  --overlay-black-08: color-mix(in srgb, #000000 8%, transparent);
  --overlay-black-10: color-mix(in srgb, #000000 10%, transparent);
  --overlay-black-12: color-mix(in srgb, #000000 12%, transparent);
  --overlay-c059669-08: color-mix(in srgb, #059669 8%, transparent);
  --overlay-c059669-16: color-mix(in srgb, #059669 16%, transparent);
  --overlay-c065f46-96: color-mix(in srgb, #065f46 96%, transparent);
  --overlay-c0d9488-09: color-mix(in srgb, #0d9488 9%, transparent);
  --overlay-c0d9488-12: color-mix(in srgb, #0d9488 12%, transparent);
  --overlay-ink-025: color-mix(in srgb, #0f172a 2.5%, transparent);
  --overlay-ink-028: color-mix(in srgb, #0f172a 2.8%, transparent);
  --overlay-ink-035: color-mix(in srgb, #0f172a 3.5%, transparent);
  --overlay-ink-038: color-mix(in srgb, #0f172a 3.8%, transparent);
  --overlay-ink-065: color-mix(in srgb, #0f172a 6.5%, transparent);
  --overlay-ink-075: color-mix(in srgb, #0f172a 7.5%, transparent);
  --overlay-ink-30: color-mix(in srgb, #0f172a 30%, transparent);
  --overlay-ink-40: color-mix(in srgb, #0f172a 40%, transparent);
  --overlay-ink-45: color-mix(in srgb, #0f172a 45%, transparent);
  --overlay-ink-58: color-mix(in srgb, #0f172a 58%, transparent);
  --overlay-ink-78: color-mix(in srgb, #0f172a 78%, transparent);
  --overlay-c0f766e-12: color-mix(in srgb, #0f766e 12%, transparent);
  --overlay-c0f766e-26: color-mix(in srgb, #0f766e 26%, transparent);
  --overlay-c0f766e-42: color-mix(in srgb, #0f766e 42%, transparent);
  --overlay-emerald-10: color-mix(in srgb, #10b981 10%, transparent);
  --overlay-emerald-24: color-mix(in srgb, #10b981 24%, transparent);
  --overlay-c12b76a-08: color-mix(in srgb, #12b76a 8%, transparent);
  --overlay-c12b76a-13: color-mix(in srgb, #12b76a 13%, transparent);
  --overlay-c12b76a-18: color-mix(in srgb, #12b76a 18%, transparent);
  --overlay-teal-07: color-mix(in srgb, #14b8a6 7%, transparent);
  --overlay-teal-08: color-mix(in srgb, #14b8a6 8%, transparent);
  --overlay-teal-16: color-mix(in srgb, #14b8a6 16%, transparent);
  --overlay-teal-18: color-mix(in srgb, #14b8a6 18%, transparent);
  --overlay-teal-20: color-mix(in srgb, #14b8a6 20%, transparent);
  --overlay-teal-22: color-mix(in srgb, #14b8a6 22%, transparent);
  --overlay-teal-24: color-mix(in srgb, #14b8a6 24%, transparent);
  --overlay-c1e3a8a-85: color-mix(in srgb, #1e3a8a 85%, transparent);
  --overlay-green-07: color-mix(in srgb, #22c55e 7%, transparent);
  --overlay-green-12: color-mix(in srgb, #22c55e 12%, transparent);
  --overlay-green-18: color-mix(in srgb, #22c55e 18%, transparent);
  --overlay-brand-04: color-mix(in srgb, #264f76 4%, transparent);
  --overlay-brand-20: color-mix(in srgb, #264f76 20%, transparent);
  --overlay-brand-32: color-mix(in srgb, #264f76 32%, transparent);
  --overlay-steel-90: color-mix(in srgb, #475569 90%, transparent);
  --overlay-muted-07: color-mix(in srgb, #64748b 7%, transparent);
  --overlay-muted-08: color-mix(in srgb, #64748b 8%, transparent);
  --overlay-muted-10: color-mix(in srgb, #64748b 10%, transparent);
  --overlay-muted-12: color-mix(in srgb, #64748b 12%, transparent);
  --overlay-muted-18: color-mix(in srgb, #64748b 18%, transparent);
  --overlay-muted-22: color-mix(in srgb, #64748b 22%, transparent);
  --overlay-muted-24: color-mix(in srgb, #64748b 24%, transparent);
  --overlay-muted-28: color-mix(in srgb, #64748b 28%, transparent);
  --overlay-c92400e-98: color-mix(in srgb, #92400e 98%, transparent);
  --overlay-maroon-98: color-mix(in srgb, #991b1b 98%, transparent);
  --overlay-brick-08: color-mix(in srgb, #b42318 8%, transparent);
  --overlay-brick-10: color-mix(in srgb, #b42318 10%, transparent);
  --overlay-brick-14: color-mix(in srgb, #b42318 14%, transparent);
  --overlay-brick-18: color-mix(in srgb, #b42318 18%, transparent);
  --overlay-brick-22: color-mix(in srgb, #b42318 22%, transparent);
  --overlay-cb45309-16: color-mix(in srgb, #b45309 16%, transparent);
  --overlay-cbfdbfe-28: color-mix(in srgb, #bfdbfe 28%, transparent);
  --overlay-cc27803-12: color-mix(in srgb, #c27803 12%, transparent);
  --overlay-cc27803-18: color-mix(in srgb, #c27803 18%, transparent);
  --overlay-cccfbf1-92: color-mix(in srgb, #ccfbf1 92%, transparent);
  --overlay-amber-08: color-mix(in srgb, #d97706 8%, transparent);
  --overlay-amber-09: color-mix(in srgb, #d97706 9%, transparent);
  --overlay-amber-18: color-mix(in srgb, #d97706 18%, transparent);
  --overlay-amber-20: color-mix(in srgb, #d97706 20%, transparent);
  --overlay-amber-22: color-mix(in srgb, #d97706 22%, transparent);
  --overlay-amber-30: color-mix(in srgb, #d97706 30%, transparent);
  --overlay-amber-40: color-mix(in srgb, #d97706 40%, transparent);
  --overlay-amber-75: color-mix(in srgb, #d97706 75%, transparent);
  --overlay-cdbeafe-94: color-mix(in srgb, #dbeafe 94%, transparent);
  --overlay-danger-16: color-mix(in srgb, #dc2626 16%, transparent);
  --overlay-ce4f0fc-76: color-mix(in srgb, #e4f0fc 76%, transparent);
  --overlay-ce8f5e9-90: color-mix(in srgb, #e8f5e9 90%, transparent);
  --overlay-cecfdf5-94: color-mix(in srgb, #ecfdf5 94%, transparent);
  --overlay-cef4444-12: color-mix(in srgb, #ef4444 12%, transparent);
  --overlay-cef4444-18: color-mix(in srgb, #ef4444 18%, transparent);
  --overlay-ceff6ff-72: color-mix(in srgb, #eff6ff 72%, transparent);
  --overlay-ceff6ff-92: color-mix(in srgb, #eff6ff 92%, transparent);
  --overlay-ceff6ff-100: color-mix(in srgb, #eff6ff 100%, transparent);
  --overlay-cf0fdf4-98: color-mix(in srgb, #f0fdf4 98%, transparent);
  --overlay-cf4f6f8-90: color-mix(in srgb, #f4f6f8 90%, transparent);
  --overlay-warning-05: color-mix(in srgb, #f59e0b 5%, transparent);
  --overlay-warning-06: color-mix(in srgb, #f59e0b 6%, transparent);
  --overlay-warning-08: color-mix(in srgb, #f59e0b 8%, transparent);
  --overlay-warning-14: color-mix(in srgb, #f59e0b 14%, transparent);
  --overlay-warning-15: color-mix(in srgb, #f59e0b 15%, transparent);
  --overlay-frostcool-84: color-mix(in srgb, #f7f9fc 84%, transparent);
  --overlay-frostcool-97: color-mix(in srgb, #f7f9fc 97%, transparent);
  --overlay-salmon-12: color-mix(in srgb, #f87171 12%, transparent);
  --overlay-salmon-24: color-mix(in srgb, #f87171 24%, transparent);
  --overlay-salmon-34: color-mix(in srgb, #f87171 34%, transparent);
  --overlay-frost-75: color-mix(in srgb, #f8fafc 75%, transparent);
  --overlay-frost-92-2: color-mix(in srgb, #f8fafc 92%, transparent);
  --overlay-cfacc15-16: color-mix(in srgb, #facc15 16%, transparent);
  --overlay-cfacc15-30: color-mix(in srgb, #facc15 30%, transparent);
  --overlay-cfcfcfd-92: color-mix(in srgb, #fcfcfd 92%, transparent);
  --overlay-cfef2f2-94: color-mix(in srgb, #fef2f2 94%, transparent);
  --overlay-cfef3c7-92: color-mix(in srgb, #fef3c7 92%, transparent);
  --overlay-cream-96: color-mix(in srgb, #fff7ed 96%, transparent);
  --overlay-cream-98: color-mix(in srgb, #fff7ed 98%, transparent);
  --overlay-cfffbeb-72: color-mix(in srgb, #fffbeb 72%, transparent);
  --overlay-cfffbeb-94: color-mix(in srgb, #fffbeb 94%, transparent);
  --overlay-cfffbfa-98: color-mix(in srgb, #fffbfa 98%, transparent);
  --overlay-white-36: color-mix(in srgb, #ffffff 36%, transparent);
  --overlay-white-54: color-mix(in srgb, #ffffff 54%, transparent);
  --overlay-white-76-2: color-mix(in srgb, #ffffff 76%, transparent);
  --overlay-white-86: color-mix(in srgb, #ffffff 86%, transparent);
  --overlay-white-100-2: color-mix(in srgb, #ffffff 100%, transparent);
  --overlay-ink-03: color-mix(in srgb, #0f172a 3%, transparent);
  --overlay-ink-04: color-mix(in srgb, #0f172a 4%, transparent);
  --overlay-ink-05: color-mix(in srgb, #0f172a 5%, transparent);
  --overlay-ink-055: color-mix(in srgb, #0f172a 5.5%, transparent);
  --overlay-ink-06: color-mix(in srgb, #0f172a 6%, transparent);
  --overlay-ink-07: color-mix(in srgb, #0f172a 7%, transparent);
  --overlay-ink-08: color-mix(in srgb, #0f172a 8%, transparent);
  --overlay-ink-09: color-mix(in srgb, #0f172a 9%, transparent);
  --overlay-ink-10: color-mix(in srgb, #0f172a 10%, transparent);
  --overlay-ink-11: color-mix(in srgb, #0f172a 11%, transparent);
  --overlay-ink-12: color-mix(in srgb, #0f172a 12%, transparent);
  --overlay-ink-14: color-mix(in srgb, #0f172a 14%, transparent);
  --overlay-ink-15: color-mix(in srgb, #0f172a 15%, transparent);
  --overlay-ink-16: color-mix(in srgb, #0f172a 16%, transparent);
  --overlay-ink-18: color-mix(in srgb, #0f172a 18%, transparent);
  --overlay-ink-20: color-mix(in srgb, #0f172a 20%, transparent);
  --overlay-ink-22: color-mix(in srgb, #0f172a 22%, transparent);
  --overlay-ink-25: color-mix(in srgb, #0f172a 25%, transparent);
  --overlay-ink-35: color-mix(in srgb, #0f172a 35%, transparent);
  --overlay-ink-42: color-mix(in srgb, #0f172a 42%, transparent);
  --overlay-ink-55: color-mix(in srgb, #0f172a 55%, transparent);
  --overlay-ink-88: color-mix(in srgb, #0f172a 88%, transparent);
  --overlay-ink-92: color-mix(in srgb, #0f172a 92%, transparent);
  --overlay-ink-94: color-mix(in srgb, #0f172a 94%, transparent);
  --overlay-ink-96: color-mix(in srgb, #0f172a 96%, transparent);

  --overlay-slate-06: color-mix(in srgb, #94a3b8 6%, transparent);
  --overlay-slate-08: color-mix(in srgb, #94a3b8 8%, transparent);
  --overlay-slate-10: color-mix(in srgb, #94a3b8 10%, transparent);
  --overlay-slate-12: color-mix(in srgb, #94a3b8 12%, transparent);
  --overlay-slate-14: color-mix(in srgb, #94a3b8 14%, transparent);
  --overlay-slate-15: color-mix(in srgb, #94a3b8 15%, transparent);
  --overlay-slate-16: color-mix(in srgb, #94a3b8 16%, transparent);
  --overlay-slate-18: color-mix(in srgb, #94a3b8 18%, transparent);
  --overlay-slate-20: color-mix(in srgb, #94a3b8 20%, transparent);
  --overlay-slate-22: color-mix(in srgb, #94a3b8 22%, transparent);
  --overlay-slate-24: color-mix(in srgb, #94a3b8 24%, transparent);
  --overlay-slate-25: color-mix(in srgb, #94a3b8 25%, transparent);
  --overlay-slate-26: color-mix(in srgb, #94a3b8 26%, transparent);
  --overlay-slate-28: color-mix(in srgb, #94a3b8 28%, transparent);
  --overlay-slate-30: color-mix(in srgb, #94a3b8 30%, transparent);
  --overlay-slate-32: color-mix(in srgb, #94a3b8 32%, transparent);
  --overlay-slate-35: color-mix(in srgb, #94a3b8 35%, transparent);
  --overlay-slate-40: color-mix(in srgb, #94a3b8 40%, transparent);
  --overlay-slate-45: color-mix(in srgb, #94a3b8 45%, transparent);
  --overlay-slate-60: color-mix(in srgb, #94a3b8 60%, transparent);
  --overlay-slate-80: color-mix(in srgb, #94a3b8 80%, transparent);

  --surface-white-03: color-mix(in srgb, #ffffff 3%, transparent);
  --surface-white-04: color-mix(in srgb, #ffffff 4%, transparent);
  --surface-white-05: color-mix(in srgb, #ffffff 5%, transparent);
  --surface-white-06: color-mix(in srgb, #ffffff 6%, transparent);
  --surface-white-07: color-mix(in srgb, #ffffff 7%, transparent);
  --surface-white-08: color-mix(in srgb, #ffffff 8%, transparent);
  --surface-white-10: color-mix(in srgb, #ffffff 10%, transparent);
  --surface-white-12: color-mix(in srgb, #ffffff 12%, transparent);
  --surface-white-14: color-mix(in srgb, #ffffff 14%, transparent);
  --surface-white-16: color-mix(in srgb, #ffffff 16%, transparent);
  --surface-white-18: color-mix(in srgb, #ffffff 18%, transparent);
  --surface-white-42: color-mix(in srgb, #ffffff 42%, transparent);
  --surface-white-60: color-mix(in srgb, #ffffff 60%, transparent);
  --surface-white-70: color-mix(in srgb, #ffffff 70%, transparent);
  --surface-white-72: color-mix(in srgb, #ffffff 72%, transparent);
  --surface-white-74: color-mix(in srgb, #ffffff 74%, transparent);
  --surface-white-76: color-mix(in srgb, #ffffff 76%, transparent);
  --surface-white-78: color-mix(in srgb, #ffffff 78%, transparent);
  --surface-white-80: color-mix(in srgb, #ffffff 80%, transparent);
  --surface-white-82: color-mix(in srgb, #ffffff 82%, transparent);
  --surface-white-84: color-mix(in srgb, #ffffff 84%, transparent);
  --surface-white-86: color-mix(in srgb, #ffffff 86%, transparent);
  --surface-white-88: color-mix(in srgb, #ffffff 88%, transparent);
  --surface-white-90: color-mix(in srgb, #ffffff 90%, transparent);
  --surface-white-92: color-mix(in srgb, #ffffff 92%, transparent);
  --surface-white-94: color-mix(in srgb, #ffffff 94%, transparent);
  --surface-white-96: color-mix(in srgb, #ffffff 96%, transparent);
  --surface-white-97: color-mix(in srgb, #ffffff 97%, transparent);
  --surface-white-98: color-mix(in srgb, #ffffff 98%, transparent);
  --surface-white-99: color-mix(in srgb, #ffffff 99%, transparent);

  --surface-slate-60: color-mix(in srgb, #f8fafc 60%, transparent);
  --surface-slate-70: color-mix(in srgb, #f8fafc 70%, transparent);
  --surface-slate-72: color-mix(in srgb, #f8fafc 72%, transparent);
  --surface-slate-80: color-mix(in srgb, #f8fafc 80%, transparent);
  --surface-slate-82: color-mix(in srgb, #f8fafc 82%, transparent);
  --surface-slate-86: color-mix(in srgb, #f8fafc 86%, transparent);
  --surface-slate-88: color-mix(in srgb, #f8fafc 88%, transparent);
  --surface-slate-90: color-mix(in srgb, #f8fafc 90%, transparent);
  --surface-slate-92: color-mix(in srgb, #f8fafc 92%, transparent);
  --surface-slate-94: color-mix(in srgb, #f8fafc 94%, transparent);
  --surface-slate-95: color-mix(in srgb, #f8fafc 95%, transparent);
  --surface-slate-96: color-mix(in srgb, #f8fafc 96%, transparent);
  --surface-slate-98: color-mix(in srgb, #f8fafc 98%, transparent);
  --surface-cloud-94: color-mix(in srgb, #f7f9fc 94%, transparent);
  --surface-brand-90: color-mix(in srgb, var(--color-brand) 10%, white);
  --surface-brand-92: color-mix(in srgb, var(--color-brand) 8%, white);
  --surface-danger-92: color-mix(in srgb, #fef2f2 92%, transparent);
  --surface-info-96: color-mix(in srgb, #eff6ff 96%, transparent);
  --surface-success-96: color-mix(in srgb, #f0fdfa 96%, transparent);
  --surface-warning-96: color-mix(in srgb, #fffbeb 96%, transparent);
  --surface-warning-98: color-mix(in srgb, #fffbeb 98%, transparent);

  --overlay-brand-08: color-mix(in srgb, #264f76 8%, transparent);
  --overlay-brand-12: color-mix(in srgb, #264f76 12%, transparent);
  --overlay-brand-14: color-mix(in srgb, #264f76 14%, transparent);
  --overlay-brand-16: color-mix(in srgb, #264f76 16%, transparent);
  --overlay-brand-18: color-mix(in srgb, #264f76 18%, transparent);
  --overlay-brand-22: color-mix(in srgb, #264f76 22%, transparent);
  --overlay-brand-28: color-mix(in srgb, #264f76 28%, transparent);
  --overlay-brand-34: color-mix(in srgb, #264f76 34%, transparent);
  --overlay-brand-strong-24: color-mix(in srgb, #16395b 24%, transparent);

  --overlay-brand-bright-06: color-mix(in srgb, var(--color-brand) 6%, transparent);
  --overlay-brand-bright-08: color-mix(in srgb, var(--color-brand) 8%, transparent);
  --overlay-brand-bright-10: color-mix(in srgb, var(--color-brand) 10%, transparent);
  --overlay-brand-bright-12: color-mix(in srgb, var(--color-brand) 12%, transparent);
  --overlay-brand-bright-14: color-mix(in srgb, var(--color-brand) 14%, transparent);
  --overlay-brand-bright-15: color-mix(in srgb, var(--color-brand) 15%, transparent);
  --overlay-brand-bright-18: color-mix(in srgb, var(--color-brand) 18%, transparent);
  --overlay-brand-bright-22: color-mix(in srgb, var(--color-brand) 22%, transparent);
  --overlay-brand-bright-25: color-mix(in srgb, var(--color-brand) 25%, transparent);
  --overlay-brand-bright-24: color-mix(in srgb, var(--color-brand) 24%, transparent);
  --overlay-brand-bright-30: color-mix(in srgb, var(--color-brand) 30%, transparent);
  --overlay-brand-bright-45: color-mix(in srgb, var(--color-brand) 45%, transparent);

  --overlay-info-08: color-mix(in srgb, var(--color-brand) 8%, transparent);
  --overlay-info-12: color-mix(in srgb, var(--color-brand) 12%, transparent);
  --overlay-info-14: color-mix(in srgb, var(--color-brand) 14%, transparent);
  --overlay-info-16: color-mix(in srgb, var(--color-brand) 16%, transparent);
  --overlay-info-20: color-mix(in srgb, var(--color-brand) 20%, transparent);
  --overlay-info-25: color-mix(in srgb, var(--color-brand) 25%, transparent);
  --overlay-info-32: color-mix(in srgb, var(--color-brand) 32%, transparent);
  --overlay-sky-08: color-mix(in srgb, #60a5fa 8%, transparent);
  --overlay-sky-18: color-mix(in srgb, #60a5fa 18%, transparent);
  --overlay-sky-26: color-mix(in srgb, #60a5fa 26%, transparent);

  --overlay-success-08: color-mix(in srgb, #22c55e 8%, transparent);
  --overlay-success-12: color-mix(in srgb, #10b981 12%, transparent);
  --overlay-success-16: color-mix(in srgb, #22c55e 16%, transparent);
  --overlay-success-30: color-mix(in srgb, #22c55e 30%, transparent);
  --overlay-warning-20: color-mix(in srgb, #f59e0b 20%, transparent);
  --overlay-warning-16: color-mix(in srgb, #f59e0b 16%, transparent);
  --overlay-warning-18: color-mix(in srgb, #eab308 18%, transparent);
  --overlay-warning-24: color-mix(in srgb, #f59e0b 24%, transparent);
  --overlay-warning-38: color-mix(in srgb, #eab308 38%, transparent);
  --overlay-warning-40: color-mix(in srgb, #f59e0b 40%, transparent);
  --overlay-danger-08: color-mix(in srgb, #dc2626 8%, transparent);

  --overlay-violet-06: color-mix(in srgb, #6366f1 6%, transparent);
  --overlay-violet-08: color-mix(in srgb, #6366f1 8%, transparent);
  --overlay-violet-12: color-mix(in srgb, #6366f1 12%, transparent);
  --overlay-violet-14: color-mix(in srgb, #6366f1 14%, transparent);
  --overlay-violet-16: color-mix(in srgb, #6366f1 16%, transparent);
  --overlay-violet-18: color-mix(in srgb, #6366f1 18%, transparent);
  --overlay-violet-22: color-mix(in srgb, #6366f1 22%, transparent);
  --overlay-violet-28: color-mix(in srgb, #6366f1 28%, transparent);
  --overlay-violet-40: color-mix(in srgb, #6366f1 40%, transparent);

  --overlay-cloud-76: color-mix(in srgb, #e2e8f0 76%, transparent);
  --overlay-cloud-82: color-mix(in srgb, #e2e8f0 82%, transparent);
  --overlay-muted-95: color-mix(in srgb, #64748b 95%, transparent);
  --overlay-frost-blue-88: color-mix(in srgb, #eff6ff 88%, transparent);
  --overlay-mist-98: color-mix(in srgb, #f0f4f8 98%, transparent);
  --overlay-haze-86: color-mix(in srgb, #f1f5f9 86%, transparent);
  --overlay-white-99: color-mix(in srgb, #ffffff 99%, transparent);
  --overlay-brand-00: color-mix(in srgb, #264f76 0%, transparent);
  --overlay-frost-93: color-mix(in srgb, #f8fafc 93%, transparent);
  --overlay-frost-94: color-mix(in srgb, #f8fafc 94%, transparent);
  --overlay-frost-cool-92: color-mix(in srgb, #f7f9fc 92%, transparent);
  --overlay-frost-cool-94: color-mix(in srgb, #f7f9fc 94%, transparent);
  --overlay-white-100: color-mix(in srgb, #ffffff 100%, transparent);
  --overlay-white-95: color-mix(in srgb, #ffffff 95%, transparent);
  --overlay-white-96: color-mix(in srgb, #ffffff 96%, transparent);

  /* Overlay tokens added to retire raw color literals (auto-tokenized) */
  --overlay-amber-14: color-mix(in srgb, #d97706 14%, transparent);
  --overlay-amber-strong-10: color-mix(in srgb, #b45309 10%, transparent);
  --overlay-ash-50: color-mix(in srgb, #788496 50%, transparent);
  --overlay-azure-09: color-mix(in srgb, #1e40af 9%, transparent);
  --overlay-blush-70: color-mix(in srgb, #fef2f2 70%, transparent);
  --overlay-blush-72: color-mix(in srgb, #fef2f2 72%, transparent);
  --overlay-brand-10: color-mix(in srgb, #264f76 10%, transparent);
  --overlay-brand-24: color-mix(in srgb, #264f76 24%, transparent);
  --overlay-brand-bright-55: color-mix(in srgb, var(--color-brand) 55%, transparent);
  --overlay-carbon-92: color-mix(in srgb, #101828 92%, transparent);
  --overlay-cloud-18: color-mix(in srgb, #e2e8f0 18%, transparent);
  --overlay-cloud-56: color-mix(in srgb, #e2e8f0 56%, transparent);
  --overlay-cloud-90: color-mix(in srgb, #e2e8f0 90%, transparent);
  --overlay-cream-74: color-mix(in srgb, #fff7ed 74%, transparent);
  --overlay-cream-76: color-mix(in srgb, #fff7ed 76%, transparent);
  --overlay-danger-14: color-mix(in srgb, #dc2626 14%, transparent);
  --overlay-rose-16: color-mix(in srgb, #f43f5e 16%, transparent);
  --overlay-pewter-34: color-mix(in srgb, #bbc6d6 34%, transparent);
  --overlay-pewter-36: color-mix(in srgb, #bbc6d6 36%, transparent);
  --overlay-frost-34: color-mix(in srgb, #f8fafc 34%, transparent);
  --overlay-frost-62: color-mix(in srgb, #f8fafc 62%, transparent);
  --overlay-frost-82: color-mix(in srgb, #f8fafc 82%, transparent);
  --overlay-frost-88: color-mix(in srgb, #f8fafc 88%, transparent);
  --overlay-frost-90: color-mix(in srgb, #f8fafc 90%, transparent);
  --overlay-frost-92: color-mix(in srgb, #f8fafc 92%, transparent);
  --overlay-frost-98: color-mix(in srgb, #f8fafc 98%, transparent);
  --overlay-frost-99: color-mix(in srgb, #f8fafc 99%, transparent);
  --overlay-frost-cool-99: color-mix(in srgb, #f7f9fc 99%, transparent);
  --overlay-frost-warm-94: color-mix(in srgb, #f9fafb 94%, transparent);
  --overlay-graphite-92: color-mix(in srgb, #2e3848 92%, transparent);
  --overlay-haze-94: color-mix(in srgb, #f1f5f9 94%, transparent);
  --overlay-indigo-10: color-mix(in srgb, var(--color-brand) 10%, transparent);
  --overlay-indigo-25: color-mix(in srgb, var(--color-brand) 25%, transparent);
  --overlay-muted-58: color-mix(in srgb, #64748b 58%, transparent);
  --overlay-navy-92: color-mix(in srgb, #22344e 92%, transparent);
  --overlay-night-22: color-mix(in srgb, #020817 22%, transparent);
  --overlay-powder-20: color-mix(in srgb, #bfdbfe 20%, transparent);
  --overlay-slate-46: color-mix(in srgb, #94a3b8 46%, transparent);
  --overlay-slate-64: color-mix(in srgb, #94a3b8 64%, transparent);
  --overlay-slate-82: color-mix(in srgb, #94a3b8 82%, transparent);
  --overlay-slate-deep-08: color-mix(in srgb, #1e293b 8%, transparent);
  --overlay-steel-46: color-mix(in srgb, #6084aa 46%, transparent);
  --overlay-violet-45: color-mix(in srgb, #6366f1 45%, transparent);
  --overlay-white-64: color-mix(in srgb, #ffffff 64%, transparent);
  --overlay-white-72: color-mix(in srgb, #ffffff 72%, transparent);
  --overlay-white-76: color-mix(in srgb, #ffffff 76%, transparent);
  --overlay-white-84: color-mix(in srgb, #ffffff 84%, transparent);
  --overlay-white-88: color-mix(in srgb, #ffffff 88%, transparent);
  --overlay-white-90: color-mix(in srgb, #ffffff 90%, transparent);
  --overlay-white-94: color-mix(in srgb, #ffffff 94%, transparent);
  --overlay-white-97: color-mix(in srgb, #ffffff 97%, transparent);
  --overlay-white-975: color-mix(in srgb, #ffffff 97.5%, transparent);
  --overlay-white-98: color-mix(in srgb, #ffffff 98%, transparent);
  --overlay-white-995: color-mix(in srgb, #ffffff 99.5%, transparent);

  /* Shadows — de-puffed. Page content (panel/card) carries a hairline + a
     short, low-spread shadow so surfaces read as paper on a desk, not as
     floating glass. The deeper lift/float ramps are reserved for genuine
     overlays (menus, drawers, sticky toolbars) and trimmed, not removed. */
  --shadow-panel-soft: 0 1px 2px var(--overlay-ink-03), 0 4px 12px var(--overlay-ink-04);
  --shadow-panel-card: 0 1px 2px var(--overlay-ink-04), 0 5px 14px var(--overlay-ink-05);
  --shadow-lift-soft: 0 6px 16px var(--overlay-ink-06);
  --shadow-lift-hover: 0 10px 24px var(--overlay-ink-10);
  --shadow-lift-strong: 0 16px 44px var(--overlay-ink-14);
  --shadow-float-36: 0 12px 28px var(--overlay-ink-14);
  --shadow-float-45: 0 14px 32px var(--overlay-ink-10);

  /* Spacing (8px grid with a 4px half-step) */
  --space-0: 0px;
  --space-05: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
  --space-10: 80px;
  --space-12: 96px;

  /* Typography */
  --text-label: 11px;
  --text-meta: 12px;
  --text-sm: 13px;
  --text-body: 14px;
  --text-title: 20px;
  --text-display: 28px;

  /* Radii — canonical tight scale (control 6 / card 8 / panel 10 / dialog 12).
     Surfaces should reach for the semantic aliases below, not the raw steps. */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  /* Semantic radius aliases — prefer these in new/edited code. */
  --radius-control: var(--radius-xs);  /* 6px  — buttons, inputs, chips    */
  --radius-card: var(--radius-sm);     /* 8px  — repeated cards / tiles     */
  --radius-panel: var(--radius-md);    /* 10px — main sections / panels     */
  --radius-dialog: var(--radius-lg);   /* 12px — modals / drawers / dialogs */

  /* Elevation — page content stays shallow; only overlays earn real depth. */
  --shadow-card-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.06);
  --shadow-card-elevated: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 26px rgba(15, 23, 42, 0.10);
  --shadow-focus: 0 0 0 4px var(--color-focus-ring);

  /* Legacy rd-* mappings */
  --rd-text-h1: var(--text-display);
  --rd-text-h2: var(--text-title);
  --rd-text-body: var(--text-body);
  --rd-text-small: var(--text-sm);
  --rd-text-meta: var(--text-meta);
  --rd-text-label: var(--text-label);
  --rd-space-0: var(--space-05);
  --rd-space-1: var(--space-1);
  --rd-space-2: var(--space-2);
  --rd-space-3: var(--space-3);
  --rd-space-4: var(--space-4);
  --rd-space-5: var(--space-5);
  --rd-control-h: 40px;
  --rd-control-h-sm: 32px;
  --rd-tap-min: 44px;
  --rd-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rd-tabbar-h: 56px;
  --rd-radius-xs: var(--radius-xs);
  --rd-radius-sm: var(--radius-sm);
  --rd-radius-md: var(--radius-md);
  --rd-radius-lg: var(--radius-lg);
  --card-radius-xl: var(--radius-dialog);
  --card-shadow-soft: var(--shadow-card-soft);
  --card-shadow-elevated: var(--shadow-card-elevated);
  --rd-border-subtle: var(--color-border-subtle);
  --rd-border-faint: var(--color-border-soft);
  --rd-border-strong: var(--color-border-strong);
  --rd-surface: var(--color-surface);
  --rd-surface-elevated: var(--color-surface-elevated);
  --rd-surface-muted: var(--color-surface-muted);
  --rd-surface-header: var(--color-surface-header);
  --rd-canvas: var(--color-canvas);
  --rd-canvas-tint: var(--color-canvas-muted);
  --rd-ink: var(--color-text);
  --rd-ink-soft: var(--color-text-soft);
  --rd-ink-muted: var(--color-text-muted);
  --rd-accent: var(--color-brand);
  --rd-accent-strong: var(--color-brand-strong);
  --rd-accent-soft: var(--color-brand-soft);
  --rd-accent-border: var(--color-brand-border);
  --rd-indigo: var(--color-brand);
  --rd-indigo-soft: var(--color-brand-soft);
}

/*
 * Shared dark theme. The app now remaps the legacy "white/frost" surface
 * tokens as well as the semantic colors so existing gradients and chrome
 * inherit a dark palette instead of staying bright against dark text.
 */
:root[data-theme-resolved="dark"] {
    color-scheme: dark;
    --color-canvas: #101214;
    --color-canvas-muted: #151719;
    --color-canvas-glow: rgba(148, 163, 184, 0.08);
    --color-brand-glow: rgba(20, 184, 166, 0.07);
    --color-surface: rgba(24, 26, 30, 0.84);
    --color-surface-elevated: rgba(29, 31, 36, 0.94);
    --color-surface-muted: rgba(22, 24, 28, 0.78);
    --color-surface-header: rgba(26, 28, 32, 0.9);
    --color-border-subtle: rgba(226, 232, 240, 0.14);
    --color-border-soft: rgba(226, 232, 240, 0.09);
    --color-border-strong: rgba(226, 232, 240, 0.24);
    --color-text: #e5edf7;
    --color-text-soft: #c0ccdc;
    --color-text-muted: #94a3b8;
    --color-text-inverse: #f8fafc;
    --color-brand-rgb: 147, 197, 253;
    --color-brand-strong-rgb: 96, 165, 250;
    --color-brand: #93c5fd;
    --color-brand-strong: #60a5fa;
    --color-brand-soft: rgba(147, 197, 253, 0.16);
    --color-brand-border: rgba(147, 197, 253, 0.28);
    --color-focus-ring: rgba(147, 197, 253, 0.28);
    --color-success-surface: rgba(6, 95, 70, 0.32);
    --color-success-text: #86efac;
    --color-success-border: rgba(74, 222, 128, 0.28);
    --color-warning-surface: rgba(146, 64, 14, 0.34);
    --color-warning-text: #fde68a;
    --color-warning-border: rgba(251, 191, 36, 0.3);
    --color-danger-surface: rgba(127, 29, 29, 0.38);
    --color-danger-text: #fda4af;
    --color-danger-border: rgba(248, 113, 113, 0.3);
    --color-info-surface: rgba(30, 64, 175, 0.34);
    --color-info-text: var(--color-brand);
    --color-info-border: rgba(var(--color-brand-rgb), 0.32);
    --color-text-strong: color-mix(in srgb, #f8fafc 92%, transparent);
    --color-text-stronger: color-mix(in srgb, #f8fafc 96%, transparent);
    --color-text-soft: #c0ccdc;
    --color-text-inverse-muted: color-mix(in srgb, #e2e8f0 86%, transparent);

    --surface-white-03: color-mix(in srgb, #0f172a 3%, transparent);
    --surface-white-04: color-mix(in srgb, #0f172a 4%, transparent);
    --surface-white-05: color-mix(in srgb, #0f172a 5%, transparent);
    --surface-white-06: color-mix(in srgb, #0f172a 6%, transparent);
    --surface-white-07: color-mix(in srgb, #0f172a 7%, transparent);
    --surface-white-08: color-mix(in srgb, #0f172a 8%, transparent);
    --surface-white-10: color-mix(in srgb, #0f172a 10%, transparent);
    --surface-white-12: color-mix(in srgb, #0f172a 12%, transparent);
    --surface-white-14: color-mix(in srgb, #0f172a 14%, transparent);
    --surface-white-16: color-mix(in srgb, #0f172a 16%, transparent);
    --surface-white-18: color-mix(in srgb, #0f172a 18%, transparent);
    --surface-white-42: color-mix(in srgb, #0f172a 42%, transparent);
    --surface-white-60: color-mix(in srgb, #0f172a 60%, transparent);
    --surface-white-70: color-mix(in srgb, #0f172a 70%, transparent);
    --surface-white-72: color-mix(in srgb, #0f172a 72%, transparent);
    --surface-white-74: color-mix(in srgb, #0f172a 74%, transparent);
    --surface-white-76: color-mix(in srgb, #0f172a 76%, transparent);
    --surface-white-78: color-mix(in srgb, #0f172a 78%, transparent);
    --surface-white-80: color-mix(in srgb, #0f172a 80%, transparent);
    --surface-white-82: color-mix(in srgb, #0f172a 82%, transparent);
    --surface-white-84: color-mix(in srgb, #0f172a 84%, transparent);
    --surface-white-86: color-mix(in srgb, #0f172a 86%, transparent);
    --surface-white-88: color-mix(in srgb, #0f172a 88%, transparent);
    --surface-white-90: color-mix(in srgb, #0f172a 90%, transparent);
    --surface-white-92: color-mix(in srgb, #0f172a 92%, transparent);
    --surface-white-94: color-mix(in srgb, #0f172a 94%, transparent);
    --surface-white-96: color-mix(in srgb, #0f172a 96%, transparent);
    --surface-white-97: color-mix(in srgb, #0f172a 97%, transparent);
    --surface-white-98: color-mix(in srgb, #0f172a 98%, transparent);
    --surface-white-99: color-mix(in srgb, #0f172a 99%, transparent);

    --surface-slate-60: color-mix(in srgb, #1e293b 60%, transparent);
    --surface-slate-70: color-mix(in srgb, #1e293b 70%, transparent);
    --surface-slate-72: color-mix(in srgb, #1e293b 72%, transparent);
    --surface-slate-80: color-mix(in srgb, #1e293b 80%, transparent);
    --surface-slate-82: color-mix(in srgb, #1e293b 82%, transparent);
    --surface-slate-86: color-mix(in srgb, #1e293b 86%, transparent);
    --surface-slate-88: color-mix(in srgb, #1e293b 88%, transparent);
    --surface-slate-90: color-mix(in srgb, #1e293b 90%, transparent);
    --surface-slate-92: color-mix(in srgb, #1e293b 92%, transparent);
    --surface-slate-94: color-mix(in srgb, #1e293b 94%, transparent);
    --surface-slate-95: color-mix(in srgb, #1e293b 95%, transparent);
    --surface-slate-96: color-mix(in srgb, #1e293b 96%, transparent);
    --surface-slate-98: color-mix(in srgb, #1e293b 98%, transparent);
    --surface-cloud-94: color-mix(in srgb, #1a2638 94%, transparent);

    --overlay-frost-blue-88: color-mix(in srgb, #102a43 88%, transparent);
    --overlay-mist-98: color-mix(in srgb, #182538 98%, transparent);
    --overlay-haze-86: color-mix(in srgb, #1d2838 86%, transparent);
    --overlay-white-99: color-mix(in srgb, #1e293b 99%, transparent);
    --overlay-frost-93: color-mix(in srgb, #1e293b 93%, transparent);
    --overlay-frost-94: color-mix(in srgb, #1e293b 94%, transparent);
    --overlay-frost-cool-92: color-mix(in srgb, #162033 92%, transparent);
    --overlay-frost-cool-94: color-mix(in srgb, #162033 94%, transparent);
    --overlay-white-100: color-mix(in srgb, #1e293b 100%, transparent);
    --overlay-white-95: color-mix(in srgb, #1e293b 95%, transparent);
    --overlay-white-96: color-mix(in srgb, #1e293b 96%, transparent);
    --overlay-frost-34: color-mix(in srgb, #1e293b 34%, transparent);
    --overlay-frost-62: color-mix(in srgb, #1e293b 62%, transparent);
    --overlay-frost-82: color-mix(in srgb, #1e293b 82%, transparent);
    --overlay-frost-88: color-mix(in srgb, #1e293b 88%, transparent);
    --overlay-frost-90: color-mix(in srgb, #1e293b 90%, transparent);
    --overlay-frost-92: color-mix(in srgb, #1e293b 92%, transparent);
    --overlay-frost-98: color-mix(in srgb, #1e293b 98%, transparent);
    --overlay-frost-99: color-mix(in srgb, #1e293b 99%, transparent);
    --overlay-frost-cool-99: color-mix(in srgb, #162033 99%, transparent);
    --overlay-frost-warm-94: color-mix(in srgb, #1a2032 94%, transparent);
    --overlay-haze-94: color-mix(in srgb, #1d2838 94%, transparent);
    --overlay-white-64: color-mix(in srgb, #1e293b 64%, transparent);
    --overlay-white-72: color-mix(in srgb, #1e293b 72%, transparent);
    --overlay-white-76: color-mix(in srgb, #1e293b 76%, transparent);
    --overlay-white-84: color-mix(in srgb, #1e293b 84%, transparent);
    --overlay-white-88: color-mix(in srgb, #1e293b 88%, transparent);
    --overlay-white-90: color-mix(in srgb, #1e293b 90%, transparent);
    --overlay-white-94: color-mix(in srgb, #1e293b 94%, transparent);
    --overlay-white-97: color-mix(in srgb, #1e293b 97%, transparent);
    --overlay-white-975: color-mix(in srgb, #1e293b 97.5%, transparent);
    --overlay-white-98: color-mix(in srgb, #1e293b 98%, transparent);
    --overlay-white-995: color-mix(in srgb, #1e293b 99.5%, transparent);

    --shadow-card-soft: 0 1px 2px rgba(2, 6, 23, 0.28), 0 14px 38px rgba(2, 6, 23, 0.42);
    --shadow-card-elevated: 0 1px 2px rgba(2, 6, 23, 0.36), 0 24px 56px rgba(2, 6, 23, 0.52);
}

/* ── Overlay "light island" ────────────────────────────────────────────────
   In dark mode, floating overlays (modals, menus, filter popovers) stay a
   light "elevated card" instead of half-flipping to dark. This re-pins every
   token the dark block above overrides back to its light value, so overlay
   chrome AND nested content (text, inputs, status chips) render light and
   readable. Scrims/wrappers (.rd-modal, .rd-cmdk, .approval-drawer,
   .rd-drawer-backdrop) are NOT targeted, so the backdrop stays dark. Slide-in
   drawers target their inner card (.approval-drawer__panel, .rd-drawer-panel,
   .snippet-panel). Excluded on purpose: .rd-work-detail-panel — it is an inline
   page panel (not a floating overlay) with its own deliberate dark styling in
   shell.css, so it stays dark-native.
   MUST mirror the dark block token-for-token — enforced by
   scripts/check_overlay_light_island.py. */
:root[data-theme-resolved="dark"] :is(
  .rd-modal-dialog,
  .rd-preview-modal-dialog,
  .rd-cmdk-panel,
  .rd-shortcuts-panel,
  .rd-split-menu-body,
  .rd-inline-menu-panel,
  .rd-bulk-brand-menu,
  .rd-bulk-brand-panel,
  .rd-approver-picker-list,
  .rd-filter-panel,
  .rd-v2-filter-panel,
  .approval-drawer__panel,
  .rd-drawer-panel,
  .snippet-panel
) {
  color-scheme: light;
  --color-canvas: #f3f5f7;
  --color-canvas-muted: #eef2f7;
  --color-canvas-glow: rgba(148, 163, 184, 0.14);
  --color-brand-glow: rgba(191, 219, 254, 0.16);
  --color-surface: rgba(255, 255, 255, 0.94);
  --color-surface-elevated: rgba(255, 255, 255, 0.98);
  --color-surface-muted: rgba(246, 248, 251, 0.92);
  --color-surface-header: rgba(249, 250, 251, 0.92);
  --color-border-subtle: rgba(15, 23, 42, 0.09);
  --color-border-soft: rgba(15, 23, 42, 0.06);
  --color-border-strong: rgba(15, 23, 42, 0.14);
  --color-text: #101828;
  --color-text-soft: #475467;
  --color-text-muted: #667085;
  --color-text-inverse: #ffffff;
  --color-brand-rgb: 38, 79, 118;
  --color-brand-strong-rgb: 22, 57, 91;
  --color-brand: #264f76;
  --color-brand-strong: #16395b;
  --color-brand-soft: rgba(38, 79, 118, 0.12);
  --color-brand-border: rgba(38, 79, 118, 0.22);
  --color-focus-ring: rgba(38, 79, 118, 0.22);
  --color-success-surface: #ecfdf5;
  --color-success-text: #166534;
  --color-success-border: rgba(22, 163, 74, 0.28);
  --color-warning-surface: #fff7ed;
  --color-warning-text: #9a5610;
  --color-warning-border: rgba(245, 158, 11, 0.35);
  --color-danger-surface: #fef2f2;
  --color-danger-text: #b42318;
  --color-danger-border: rgba(220, 38, 38, 0.3);
  --color-info-surface: #eff6ff;
  --color-info-text: var(--color-brand-strong);
  --color-info-border: rgba(var(--color-brand-rgb), 0.32);
  --color-text-strong: color-mix(in srgb, #0f172a 92%, transparent);
  --color-text-stronger: color-mix(in srgb, #0f172a 94%, transparent);
  --color-text-inverse-muted: color-mix(in srgb, #e2e8f0 82%, transparent);
  --surface-white-03: color-mix(in srgb, #ffffff 3%, transparent);
  --surface-white-04: color-mix(in srgb, #ffffff 4%, transparent);
  --surface-white-05: color-mix(in srgb, #ffffff 5%, transparent);
  --surface-white-06: color-mix(in srgb, #ffffff 6%, transparent);
  --surface-white-07: color-mix(in srgb, #ffffff 7%, transparent);
  --surface-white-08: color-mix(in srgb, #ffffff 8%, transparent);
  --surface-white-10: color-mix(in srgb, #ffffff 10%, transparent);
  --surface-white-12: color-mix(in srgb, #ffffff 12%, transparent);
  --surface-white-14: color-mix(in srgb, #ffffff 14%, transparent);
  --surface-white-16: color-mix(in srgb, #ffffff 16%, transparent);
  --surface-white-18: color-mix(in srgb, #ffffff 18%, transparent);
  --surface-white-42: color-mix(in srgb, #ffffff 42%, transparent);
  --surface-white-60: color-mix(in srgb, #ffffff 60%, transparent);
  --surface-white-70: color-mix(in srgb, #ffffff 70%, transparent);
  --surface-white-72: color-mix(in srgb, #ffffff 72%, transparent);
  --surface-white-74: color-mix(in srgb, #ffffff 74%, transparent);
  --surface-white-76: color-mix(in srgb, #ffffff 76%, transparent);
  --surface-white-78: color-mix(in srgb, #ffffff 78%, transparent);
  --surface-white-80: color-mix(in srgb, #ffffff 80%, transparent);
  --surface-white-82: color-mix(in srgb, #ffffff 82%, transparent);
  --surface-white-84: color-mix(in srgb, #ffffff 84%, transparent);
  --surface-white-86: color-mix(in srgb, #ffffff 86%, transparent);
  --surface-white-88: color-mix(in srgb, #ffffff 88%, transparent);
  --surface-white-90: color-mix(in srgb, #ffffff 90%, transparent);
  --surface-white-92: color-mix(in srgb, #ffffff 92%, transparent);
  --surface-white-94: color-mix(in srgb, #ffffff 94%, transparent);
  --surface-white-96: color-mix(in srgb, #ffffff 96%, transparent);
  --surface-white-97: color-mix(in srgb, #ffffff 97%, transparent);
  --surface-white-98: color-mix(in srgb, #ffffff 98%, transparent);
  --surface-white-99: color-mix(in srgb, #ffffff 99%, transparent);
  --surface-slate-60: color-mix(in srgb, #f8fafc 60%, transparent);
  --surface-slate-70: color-mix(in srgb, #f8fafc 70%, transparent);
  --surface-slate-72: color-mix(in srgb, #f8fafc 72%, transparent);
  --surface-slate-80: color-mix(in srgb, #f8fafc 80%, transparent);
  --surface-slate-82: color-mix(in srgb, #f8fafc 82%, transparent);
  --surface-slate-86: color-mix(in srgb, #f8fafc 86%, transparent);
  --surface-slate-88: color-mix(in srgb, #f8fafc 88%, transparent);
  --surface-slate-90: color-mix(in srgb, #f8fafc 90%, transparent);
  --surface-slate-92: color-mix(in srgb, #f8fafc 92%, transparent);
  --surface-slate-94: color-mix(in srgb, #f8fafc 94%, transparent);
  --surface-slate-95: color-mix(in srgb, #f8fafc 95%, transparent);
  --surface-slate-96: color-mix(in srgb, #f8fafc 96%, transparent);
  --surface-slate-98: color-mix(in srgb, #f8fafc 98%, transparent);
  --surface-cloud-94: color-mix(in srgb, #f7f9fc 94%, transparent);
  --overlay-frost-blue-88: color-mix(in srgb, #eff6ff 88%, transparent);
  --overlay-mist-98: color-mix(in srgb, #f0f4f8 98%, transparent);
  --overlay-haze-86: color-mix(in srgb, #f1f5f9 86%, transparent);
  --overlay-white-99: color-mix(in srgb, #ffffff 99%, transparent);
  --overlay-frost-93: color-mix(in srgb, #f8fafc 93%, transparent);
  --overlay-frost-94: color-mix(in srgb, #f8fafc 94%, transparent);
  --overlay-frost-cool-92: color-mix(in srgb, #f7f9fc 92%, transparent);
  --overlay-frost-cool-94: color-mix(in srgb, #f7f9fc 94%, transparent);
  --overlay-white-100: color-mix(in srgb, #ffffff 100%, transparent);
  --overlay-white-95: color-mix(in srgb, #ffffff 95%, transparent);
  --overlay-white-96: color-mix(in srgb, #ffffff 96%, transparent);
  --overlay-frost-34: color-mix(in srgb, #f8fafc 34%, transparent);
  --overlay-frost-62: color-mix(in srgb, #f8fafc 62%, transparent);
  --overlay-frost-82: color-mix(in srgb, #f8fafc 82%, transparent);
  --overlay-frost-88: color-mix(in srgb, #f8fafc 88%, transparent);
  --overlay-frost-90: color-mix(in srgb, #f8fafc 90%, transparent);
  --overlay-frost-92: color-mix(in srgb, #f8fafc 92%, transparent);
  --overlay-frost-98: color-mix(in srgb, #f8fafc 98%, transparent);
  --overlay-frost-99: color-mix(in srgb, #f8fafc 99%, transparent);
  --overlay-frost-cool-99: color-mix(in srgb, #f7f9fc 99%, transparent);
  --overlay-frost-warm-94: color-mix(in srgb, #f9fafb 94%, transparent);
  --overlay-haze-94: color-mix(in srgb, #f1f5f9 94%, transparent);
  --overlay-white-64: color-mix(in srgb, #ffffff 64%, transparent);
  --overlay-white-72: color-mix(in srgb, #ffffff 72%, transparent);
  --overlay-white-76: color-mix(in srgb, #ffffff 76%, transparent);
  --overlay-white-84: color-mix(in srgb, #ffffff 84%, transparent);
  --overlay-white-88: color-mix(in srgb, #ffffff 88%, transparent);
  --overlay-white-90: color-mix(in srgb, #ffffff 90%, transparent);
  --overlay-white-94: color-mix(in srgb, #ffffff 94%, transparent);
  --overlay-white-97: color-mix(in srgb, #ffffff 97%, transparent);
  --overlay-white-975: color-mix(in srgb, #ffffff 97.5%, transparent);
  --overlay-white-98: color-mix(in srgb, #ffffff 98%, transparent);
  --overlay-white-995: color-mix(in srgb, #ffffff 99.5%, transparent);
  --shadow-card-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.06);
  --shadow-card-elevated: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 26px rgba(15, 23, 42, 0.10);
}


:root {
  /* Descriptive tone palette replacing the rd-color/rd-rgba compatibility aliases. */
  --tone-amber-100: #fef3c7;
  --tone-amber-200: #fde68a;
  --tone-amber-300: #fcd34d;
  --tone-amber-400: #fbbf24;
  --tone-amber-50: #fffbeb;
  --tone-amber-50-alt1: #fffcf0;
  --tone-amber-500: #f59e0b;
  --tone-amber-600: #d97706;
  --tone-amber-700: #b45309;
  --tone-amber-800: #92400e;
  --tone-amber-900: #78350f;
  --tone-blue-100: #dbeafe;
  --tone-blue-200: #bfdbfe;
  --tone-blue-300: #93c5fd;
  --tone-blue-400: #60a5fa;
  --tone-blue-50: #eef6ff;
  --tone-blue-50-alt1: #eff4ff;
  --tone-blue-50-alt2: #f0f4ff;
  --tone-blue-50-alt3: #edf6fb;
  --tone-blue-50-alt4: #f0f7ff;
  --tone-blue-500: #4f8dff;
  --tone-blue-500-alt1: #3182ce;
  --tone-blue-600: #155eef;
  --tone-blue-600-alt1: #2f54eb;
  --tone-blue-700: #175cd3;
  --tone-blue-800: #1e40af;
  --tone-blue-800-alt1: #1d39c4;
  --tone-blue-900: #1d4f91;
  --tone-blue-950: #24344e;
  --tone-cloud: #f9fafb;
  --tone-cyan-400: #22d3ee;
  --tone-cyan-50: #e6fffb;
  --tone-cyan-700: #0e7490;
  --tone-cyan-800: #155e75;
  --tone-cyan-800-alt1: #2c567f;
  --tone-cyan-800-alt2: #2a557e;
  --tone-cyan-800-alt3: #2d5b84;
  --tone-cyan-800-alt4: #2d567c;
  --tone-cyan-800-alt5: #315f8f;
  --tone-cyan-900: #164e63;
  --tone-cyan-900-alt1: #203f62;
  --tone-cyan-900-alt2: #1a4266;
  --tone-cyan-900-alt3: #1f3f5b;
  --tone-cyan-900-alt4: #1f4d73;
  --tone-cyan-900-alt5: #1d3d5c;
  --tone-cyan-900-alt6: #183d61;
  --tone-cyan-900-alt7: #21496f;
  --tone-cyan-900-alt8: #274d72;
  --tone-cyan-900-alt9: #1e405f;
  --tone-emerald-200: #abefc6;
  --tone-emerald-50: #ecfdf3;
  --tone-emerald-50-alt1: #e9f8f0;
  --tone-emerald-500: #10b981;
  --tone-emerald-600: #059669;
  --tone-emerald-700: #047857;
  --tone-emerald-700-alt1: #067647;
  --tone-emerald-800: #065f46;
  --tone-frost: #f8fafc;
  --tone-gray-100: #f3f4f6;
  --tone-gray-100-alt1: #f2f4f7;
  --tone-gray-100-alt2: #eef4f3;
  --tone-gray-100-alt3: #f2f8f5;
  --tone-gray-200: #e5e7eb;
  --tone-gray-300: #d1d5db;
  --tone-gray-300-alt1: #d0d5dd;
  --tone-gray-400: #98a2b3;
  --tone-gray-400-alt1: #8a97a7;
  --tone-gray-400-alt2: #b0bec5;
  --tone-gray-50: #fdfdff;
  --tone-gray-50-alt1: #f9fdfa;
  --tone-gray-50-alt2: #f9fffb;
  --tone-gray-50-alt3: #f7fcf9;
  --tone-gray-50-alt4: #fcfcfd;
  --tone-gray-50-alt5: #fbfcfd;
  --tone-gray-500: #6b7280;
  --tone-gray-500-alt1: #5d6c7e;
  --tone-gray-500-alt2: #556579;
  --tone-gray-500-alt3: #5b6473;
  --tone-gray-600: #4b5563;
  --tone-gray-700: #374151;
  --tone-gray-800: #162033;
  --tone-gray-800-alt1: #1a2032;
  --tone-gray-800-alt2: #1e2336;
  --tone-gray-900: #111827;
  --tone-gray-900-alt1: #0c1120;
  --tone-gray-900-alt2: #0d1522;
  --tone-gray-900-alt3: #141928;
  --tone-gray-900-alt4: #0b1220;
  --tone-gray-900-alt5: #101726;
  --tone-gray-950: #090d16;
  --tone-gray-950-alt1: #050911;
  --tone-green-100: #dcfce7;
  --tone-green-200: #bbf7d0;
  --tone-green-200-alt1: #b7dfc3;
  --tone-green-300: #86efac;
  --tone-green-400: #4ade80;
  --tone-green-50: #f0fdf4;
  --tone-green-500: #22c55e;
  --tone-green-600: #16a34a;
  --tone-green-700: #15803d;
  --tone-green-800: #276749;
  --tone-green-900: #14532d;
  --tone-green-950: #052e16;
  --tone-indigo-100: #dbe4ff;
  --tone-indigo-100-alt1: #e0ebff;
  --tone-indigo-200: #cbd5f5;
  --tone-indigo-200-alt1: #cdd9f8;
  --tone-indigo-300: #a5b4fc;
  --tone-indigo-400: #7c83ff;
  --tone-indigo-50: #eef4ff;
  --tone-indigo-50-alt1: #ecf3ff;
  --tone-indigo-50-alt2: #edf2ff;
  --tone-indigo-50-alt3: #edf1ff;
  --tone-indigo-50-alt4: #ecf4ff;
  --tone-indigo-500: #6366f1;
  --tone-indigo-500-alt1: #5b73ff;
  --tone-indigo-700: #4338ca;
  --tone-indigo-800: #3730a3;
  --tone-indigo-900: #312e81;
  --tone-ink-soft: #475467;
  --tone-neutral-100: #f7f7f6;
  --tone-neutral-100-alt1: #f5f6f8;
  --tone-neutral-100-alt2: #f5f5f7;
  --tone-neutral-200: #d9e6de;
  --tone-neutral-200-alt1: #e0e0e0;
  --tone-neutral-50: #fafafa;
  --tone-neutral-900: #0d111a;
  --tone-orange-100: #ffedd5;
  --tone-orange-200: #f3c4a2;
  --tone-orange-200-alt1: #f2d7a1;
  --tone-orange-300: #fdba74;
  --tone-orange-400: #fb923c;
  --tone-orange-50: #fff6e8;
  --tone-orange-50-alt1: #fff7ef;
  --tone-orange-50-alt2: #fffaf3;
  --tone-orange-50-alt3: #fffaf0;
  --tone-orange-50-alt4: #fff4e8;
  --tone-orange-50-alt5: #fff4e5;
  --tone-orange-500: #f97316;
  --tone-orange-600: #e8510a;
  --tone-orange-700: #c2410c;
  --tone-orange-800: #9a3412;
  --tone-orange-900: #7c2d12;
  --tone-pink-50: #fff4f6;
  --tone-pink-500: #ec4899;
  --tone-purple-100: #f3e8ff;
  --tone-purple-800: #6b21a8;
  --tone-red-100: #fee2e2;
  --tone-red-100-alt1: #fed7de;
  --tone-red-200: #fecaca;
  --tone-red-200-alt1: #fecdca;
  --tone-red-400: #ff5f56;
  --tone-red-50: #fef1ef;
  --tone-red-50-alt1: #fef3f2;
  --tone-red-500: #ef4444;
  --tone-red-600: #dc2626;
  --tone-red-700: #b91c1c;
  --tone-red-800: #991b1b;
  --tone-red-800-alt1: #9f1d14;
  --tone-red-900: #7f1d1d;
  --tone-red-950: #450a0a;
  --tone-rose-100: #ffe4e6;
  --tone-rose-300: #fda4af;
  --tone-rose-50: #fff1f2;
  --tone-rose-500: #f43f5e;
  --tone-rose-700: #be123c;
  --tone-rose-800: #9f1239;
  --tone-rose-900: #881337;
  --tone-sky-100: #e0f2fe;
  --tone-sky-100-alt1: #e0edff;
  --tone-sky-200: #b2ddff;
  --tone-sky-300: #7dd3fc;
  --tone-sky-400: #38bdf8;
  --tone-sky-50: #f3f8fc;
  --tone-sky-50-alt1: #eff8ff;
  --tone-sky-500: #0ea5e9;
  --tone-sky-600: #0284c7;
  --tone-sky-700: #0369a1;
  --tone-sky-800: #0f5b94;
  --tone-sky-900: #0b4f6c;
  --tone-sky-950: #102a43;
  --tone-sky-950-alt1: #103c52;
  --tone-sky-950-alt2: #0f2f4d;
  --tone-slate-100: #f1f5f9;
  --tone-slate-100-alt1: #f2f6f9;
  --tone-slate-100-alt10: #f4f6fb;
  --tone-slate-100-alt11: #eef1f7;
  --tone-slate-100-alt12: #f5f7fa;
  --tone-slate-100-alt13: #f2f7fa;
  --tone-slate-100-alt14: #f4f7fb;
  --tone-slate-100-alt15: #f4f7fa;
  --tone-slate-100-alt16: #f3f7fa;
  --tone-slate-100-alt2: #f3f6fb;
  --tone-slate-100-alt3: #eef3f8;
  --tone-slate-100-alt4: #eef4f8;
  --tone-slate-100-alt5: #edf2f7;
  --tone-slate-100-alt6: #ecf1f5;
  --tone-slate-100-alt7: #f3f5f8;
  --tone-slate-100-alt8: #eef2f8;
  --tone-slate-100-alt9: #f0f2f7;
  --tone-slate-200: #e2e8f0;
  --tone-slate-200-alt1: #dbe3ef;
  --tone-slate-200-alt10: #dce4ee;
  --tone-slate-200-alt2: #dce4ec;
  --tone-slate-200-alt3: #e3eaf0;
  --tone-slate-200-alt4: #dce7ef;
  --tone-slate-200-alt5: #dce5f5;
  --tone-slate-200-alt6: #e5e9f5;
  --tone-slate-200-alt7: #e5e7f5;
  --tone-slate-200-alt8: #dbe7f5;
  --tone-slate-200-alt9: #e2e6ef;
  --tone-slate-300: #cbd5e1;
  --tone-slate-300-alt1: #b3bfcc;
  --tone-slate-300-alt2: #d0dae5;
  --tone-slate-300-alt3: #c8d4e0;
  --tone-slate-400: #94a3b8;
  --tone-slate-400-alt1: #7c8da6;
  --tone-slate-50: #f8fbff;
  --tone-slate-50-alt1: #f7fafc;
  --tone-slate-50-alt10: #f9fbff;
  --tone-slate-50-alt11: #f7f9fc;
  --tone-slate-50-alt12: #fafbfe;
  --tone-slate-50-alt13: #f5f7fd;
  --tone-slate-50-alt14: #f5f8ff;
  --tone-slate-50-alt15: #f6f9fd;
  --tone-slate-50-alt16: #f6f8fb;
  --tone-slate-50-alt17: #f5f8fc;
  --tone-slate-50-alt18: #f5f8fb;
  --tone-slate-50-alt2: #f7fbff;
  --tone-slate-50-alt3: #fcfcff;
  --tone-slate-50-alt4: #f8f9fb;
  --tone-slate-50-alt5: #f8fbfd;
  --tone-slate-50-alt6: #f9fbfd;
  --tone-slate-50-alt7: #fafcfe;
  --tone-slate-50-alt8: #fbfdff;
  --tone-slate-50-alt9: #f5f7fb;
  --tone-slate-500: #64748b;
  --tone-slate-500-alt1: #6b7a91;
  --tone-slate-500-alt10: #5f6f86;
  --tone-slate-500-alt11: #3e6c99;
  --tone-slate-500-alt2: #6a7790;
  --tone-slate-500-alt3: #55647d;
  --tone-slate-500-alt4: #67758d;
  --tone-slate-500-alt5: #718096;
  --tone-slate-500-alt6: #77859a;
  --tone-slate-500-alt7: #677489;
  --tone-slate-500-alt8: #7a869a;
  --tone-slate-500-alt9: #5f8db7;
  --tone-slate-600: #526173;
  --tone-slate-600-alt1: #536273;
  --tone-slate-600-alt10: #465568;
  --tone-slate-600-alt11: #335c81;
  --tone-slate-600-alt12: #3b5f84;
  --tone-slate-600-alt2: #365785;
  --tone-slate-600-alt3: #445468;
  --tone-slate-600-alt4: #506174;
  --tone-slate-600-alt5: #52627d;
  --tone-slate-600-alt6: #42536c;
  --tone-slate-600-alt7: #40506b;
  --tone-slate-600-alt8: #52637b;
  --tone-slate-600-alt9: #516173;
  --tone-slate-700: #344054;
  --tone-slate-700-alt1: #304255;
  --tone-slate-700-alt2: #21384f;
  --tone-slate-700-alt3: #35455f;
  --tone-slate-800: #1e293b;
  --tone-slate-800-alt1: #24364a;
  --tone-slate-800-alt2: #132238;
  --tone-slate-800-alt3: #13203a;
  --tone-slate-800-alt4: #1f2a3d;
  --tone-slate-800-alt5: #1d2939;
  --tone-slate-900: #122033;
  --tone-slate-900-alt1: #111c33;
  --tone-slate-900-alt2: #102033;
  --tone-slate-900-alt3: #161f31;
  --tone-slate-900-alt4: #0b1224;
  --tone-slate-900-alt5: #0f1728;
  --tone-slate-950: #0b0f1a;
  --tone-slate-950-alt1: #08111d;
  --tone-slate-950-alt2: #09101b;
  --tone-slate-950-alt3: #09111d;
  --tone-slate-950-alt4: #08101c;
  --tone-stone-100: #f6f6f2;
  --tone-stone-100-alt1: #f1f3ef;
  --tone-stone-100-alt2: #f4f7f4;
  --tone-stone-50: #fffaf4;
  --tone-stone-50-alt1: #fffcf4;
  --tone-stone-50-alt2: #fffdf9;
  --tone-stone-50-alt3: #fffef7;
  --tone-stone-50-alt4: #fff8f8;
  --tone-stone-50-alt5: #f7fdf8;
  --tone-stone-50-alt6: #fffdf7;
  --tone-stone-50-alt7: #fffaf5;
  --tone-stone-50-alt8: #f6fbf8;
  --tone-teal-50: #f0fdfa;
  --tone-teal-500: #14b8a6;
  --tone-teal-600: #1d9a8f;
  --tone-teal-700: #0f766e;
  --tone-teal-800: #115e59;
  --tone-violet-100: #ede9fe;
  --tone-violet-50: #f3f4ff;
  --tone-violet-50-alt1: #f3f6ff;
  --tone-violet-50-alt2: #f5f0ff;
  --tone-violet-500: #8b5cf6;
  --tone-violet-600: #7c3aed;
  --tone-violet-700: #6d28d9;
  --tone-violet-900: #4c1d95;
  --tone-white: #ffffff;
  --tone-yellow-100: #fef9c3;
  --tone-yellow-400: #facc15;
  --tone-yellow-50: #fff4df;
  --tone-yellow-50-alt1: #fff7e6;
  --tone-yellow-600: #ca8a04;
  --tone-yellow-700: #a16207;
  --tone-yellow-800: #854d0e;
  --tone-yellow-950: #422006;
  --tone-zinc-100: #f0f0f0;
  --tone-zinc-50: #fcfcfb;
  --tone-zinc-50-alt1: #fffafb;
  --alpha-amber-400-14: rgba(251, 191, 36, 0.14);
  --alpha-amber-50-92: rgba(255, 251, 235, 0.92);
  --alpha-amber-50-95: rgba(255, 251, 235, 0.95);
  --alpha-amber-50-96: rgba(255, 251, 235, 0.96);
  --alpha-amber-50-alt1-94: rgba(255, 252, 240, 0.94);
  --alpha-amber-500-12: rgba(245, 158, 11, 0.12);
  --alpha-amber-500-16: rgba(245, 158, 11, 0.16);
  --alpha-amber-500-24: rgba(245, 158, 11, 0.24);
  --alpha-amber-600-11: rgba(217, 119, 6, 0.11);
  --alpha-amber-600-12: rgba(217, 119, 6, 0.12);
  --alpha-amber-600-16: rgba(217, 119, 6, 0.16);
  --alpha-amber-600-18: rgba(217, 119, 6, 0.18);
  --alpha-amber-600-2: rgba(217, 119, 6, 0.2);
  --alpha-amber-600-22: rgba(217, 119, 6, 0.22);
  --alpha-amber-600-24: rgba(217, 119, 6, 0.24);
  --alpha-amber-600-55: rgba(217, 119, 6, 0.55);
  --alpha-amber-700-38: rgba(180, 83, 9, 0.38);
  --alpha-blue-200-0: rgba(191, 219, 254, 0);
  --alpha-blue-200-18: rgba(191, 219, 254, 0.18);
  --alpha-blue-200-38: rgba(191, 219, 254, 0.38);
  --alpha-blue-200-46: rgba(191, 219, 254, 0.46);
  --alpha-blue-300-12: rgba(147, 197, 253, 0.12);
  --alpha-blue-50-alt4-95: rgba(240, 247, 255, 0.95);
  --alpha-blue-600-08: rgba(21, 94, 239, 0.08);
  --alpha-blue-600-2: rgba(21, 94, 239, 0.2);
  --alpha-blue-600-22: rgba(21, 94, 239, 0.22);
  --alpha-brand-0: rgba(var(--color-brand-rgb), 0);
  --alpha-brand-08: rgba(var(--color-brand-rgb), 0.08);
  --alpha-brand-09: rgba(var(--color-brand-rgb), 0.09);
  --alpha-brand-1: rgba(var(--color-brand-rgb), 0.1);
  --alpha-brand-14: rgba(var(--color-brand-rgb), 0.14);
  --alpha-brand-18: rgba(var(--color-brand-rgb), 0.18);
  --alpha-brand-2: rgba(var(--color-brand-rgb), 0.2);
  --alpha-brand-24: rgba(var(--color-brand-rgb), 0.24);
  --alpha-brand-28: rgba(var(--color-brand-rgb), 0.28);
  --alpha-brand-34: rgba(var(--color-brand-rgb), 0.34);
  --alpha-brand-38: rgba(var(--color-brand-rgb), 0.38);
  --alpha-brand-42: rgba(var(--color-brand-rgb), 0.42);
  --alpha-brand-5: rgba(var(--color-brand-rgb), 0.5);
  --alpha-brand-7: rgba(var(--color-brand-rgb), 0.7);
  --alpha-cloud-94: rgba(249, 250, 251, 0.94);
  --alpha-cloud-98: rgba(249, 250, 251, 0.98);
  --alpha-cyan-700-12: rgba(14, 116, 144, 0.12);
  --alpha-cyan-700-16: rgba(14, 116, 144, 0.16);
  --alpha-emerald-500-12: rgba(16, 185, 129, 0.12);
  --alpha-frost-6: rgba(248, 250, 252, 0.6);
  --alpha-frost-7: rgba(248, 250, 252, 0.7);
  --alpha-frost-72: rgba(248, 250, 252, 0.72);
  --alpha-frost-78: rgba(248, 250, 252, 0.78);
  --alpha-frost-84: rgba(248, 250, 252, 0.84);
  --alpha-frost-86: rgba(248, 250, 252, 0.86);
  --alpha-frost-88: rgba(248, 250, 252, 0.88);
  --alpha-frost-9: rgba(248, 250, 252, 0.9);
  --alpha-frost-94: rgba(248, 250, 252, 0.94);
  --alpha-frost-96: rgba(248, 250, 252, 0.96);
  --alpha-frost-97: rgba(248, 250, 252, 0.97);
  --alpha-gray-100-alt3-96: rgba(242, 248, 245, 0.96);
  --alpha-green-200-2: rgba(187, 247, 208, 0.2);
  --alpha-green-50-78: rgba(240, 253, 244, 0.78);
  --alpha-green-50-92: rgba(240, 253, 244, 0.92);
  --alpha-green-500-1: rgba(34, 197, 94, 0.1);
  --alpha-green-500-12: rgba(34, 197, 94, 0.12);
  --alpha-green-600-12: rgba(22, 163, 74, 0.12);
  --alpha-green-600-18: rgba(22, 163, 74, 0.18);
  --alpha-green-600-24: rgba(22, 163, 74, 0.24);
  --alpha-green-700-2: rgba(21, 128, 61, 0.2);
  --alpha-indigo-50-88: rgba(238, 242, 255, 0.88);
  --alpha-indigo-50-alt4-98: rgba(236, 244, 255, 0.98);
  --alpha-indigo-500-0: rgba(99, 102, 241, 0);
  --alpha-indigo-500-05: rgba(99, 102, 241, 0.05);
  --alpha-indigo-500-14: rgba(99, 102, 241, 0.14);
  --alpha-orange-100-88: rgba(255, 237, 213, 0.88);
  --alpha-orange-50-alt2-95: rgba(255, 250, 243, 0.95);
  --alpha-orange-500-1: rgba(249, 115, 22, 0.1);
  --alpha-orange-500-16: rgba(249, 115, 22, 0.16);
  --alpha-pink-50-94: rgba(255, 244, 246, 0.94);
  --alpha-red-100-84: rgba(254, 226, 226, 0.84);
  --alpha-red-400-22: rgba(248, 113, 113, 0.22);
  --alpha-red-500-1: rgba(239, 68, 68, 0.1);
  --alpha-red-500-14: rgba(239, 68, 68, 0.14);
  --alpha-red-600-16: rgba(220, 38, 38, 0.16);
  --alpha-red-600-18: rgba(220, 38, 38, 0.18);
  --alpha-red-700-22: rgba(185, 28, 28, 0.22);
  --alpha-red-700-28: rgba(185, 28, 28, 0.28);
  --alpha-red-900-08: rgba(127, 29, 29, 0.08);
  --alpha-role-brand-05: rgba(38, 79, 118, 0.05);
  --alpha-role-brand-08: rgba(38, 79, 118, 0.08);
  --alpha-role-brand-34: rgba(38, 79, 118, 0.34);
  --alpha-role-brand-strong-18: rgba(22, 57, 91, 0.18);
  --alpha-role-brand-strong-2: rgba(22, 57, 91, 0.2);
  --alpha-role-brand-strong-22: rgba(22, 57, 91, 0.22);
  --alpha-role-danger-surface-7: rgba(254, 242, 242, 0.7);
  --alpha-role-danger-surface-88: rgba(254, 242, 242, 0.88);
  --alpha-role-danger-surface-94: rgba(254, 242, 242, 0.94);
  --alpha-role-danger-surface-95: rgba(254, 242, 242, 0.95);
  --alpha-role-danger-surface-98: rgba(254, 242, 242, 0.98);
  --alpha-role-info-surface-7: rgba(239, 246, 255, 0.7);
  --alpha-role-info-surface-74: rgba(239, 246, 255, 0.74);
  --alpha-role-info-surface-78: rgba(239, 246, 255, 0.78);
  --alpha-role-info-surface-8: rgba(239, 246, 255, 0.8);
  --alpha-role-info-surface-92: rgba(239, 246, 255, 0.92);
  --alpha-role-info-surface-94: rgba(239, 246, 255, 0.94);
  --alpha-role-info-surface-98: rgba(239, 246, 255, 0.98);
  --alpha-role-success-surface-8: rgba(236, 253, 245, 0.8);
  --alpha-role-success-text-36: rgba(22, 101, 52, 0.36);
  --alpha-role-warning-surface-55: rgba(255, 247, 237, 0.55);
  --alpha-role-warning-surface-65: rgba(255, 247, 237, 0.65);
  --alpha-role-warning-surface-72: rgba(255, 247, 237, 0.72);
  --alpha-role-warning-surface-76: rgba(255, 247, 237, 0.76);
  --alpha-role-warning-surface-82: rgba(255, 247, 237, 0.82);
  --alpha-role-warning-surface-84: rgba(255, 247, 237, 0.84);
  --alpha-role-warning-surface-88: rgba(255, 247, 237, 0.88);
  --alpha-role-warning-surface-92: rgba(255, 247, 237, 0.92);
  --alpha-role-warning-surface-94: rgba(255, 247, 237, 0.94);
  --alpha-sky-100-alt1-42: rgba(224, 237, 255, 0.42);
  --alpha-sky-200-36: rgba(186, 230, 253, 0.36);
  --alpha-sky-400-25: rgba(56, 189, 248, 0.25);
  --alpha-sky-50-92: rgba(240, 249, 255, 0.92);
  --alpha-sky-500-05: rgba(14, 165, 233, 0.05);
  --alpha-sky-500-1: rgba(14, 165, 233, 0.1);
  --alpha-sky-700-12: rgba(3, 105, 161, 0.12);
  --alpha-sky-800-12: rgba(15, 91, 148, 0.12);
  --alpha-slate-100-5: rgba(241, 245, 249, 0.5);
  --alpha-slate-100-72: rgba(241, 245, 249, 0.72);
  --alpha-slate-100-84: rgba(241, 245, 249, 0.84);
  --alpha-slate-100-88: rgba(241, 245, 249, 0.88);
  --alpha-slate-100-9: rgba(241, 245, 249, 0.9);
  --alpha-slate-100-92: rgba(241, 245, 249, 0.92);
  --alpha-slate-100-94: rgba(241, 245, 249, 0.94);
  --alpha-slate-100-96: rgba(241, 245, 249, 0.96);
  --alpha-slate-100-alt1-94: rgba(242, 246, 249, 0.94);
  --alpha-slate-100-alt13-96: rgba(242, 247, 250, 0.96);
  --alpha-slate-100-alt15-9: rgba(244, 247, 250, 0.9);
  --alpha-slate-100-alt16-94: rgba(243, 247, 250, 0.94);
  --alpha-slate-200-92: rgba(226, 232, 240, 0.92);
  --alpha-slate-200-alt10-86: rgba(220, 228, 238, 0.86);
  --alpha-slate-400-0: rgba(148, 163, 184, 0);
  --alpha-slate-400-03: rgba(148, 163, 184, 0.03);
  --alpha-slate-400-04: rgba(148, 163, 184, 0.04);
  --alpha-slate-400-05: rgba(148, 163, 184, 0.05);
  --alpha-slate-400-1: rgba(148, 163, 184, 0.1);
  --alpha-slate-400-12: rgba(148, 163, 184, 0.12);
  --alpha-slate-400-18: rgba(148, 163, 184, 0.18);
  --alpha-slate-400-2: rgba(148, 163, 184, 0.2);
  --alpha-slate-400-22: rgba(148, 163, 184, 0.22);
  --alpha-slate-400-24: rgba(148, 163, 184, 0.24);
  --alpha-slate-400-28: rgba(148, 163, 184, 0.28);
  --alpha-slate-400-3: rgba(148, 163, 184, 0.3);
  --alpha-slate-400-32: rgba(148, 163, 184, 0.32);
  --alpha-slate-400-5: rgba(148, 163, 184, 0.5);
  --alpha-slate-50-alt1-86: rgba(247, 250, 252, 0.86);
  --alpha-slate-50-alt1-9: rgba(247, 250, 252, 0.9);
  --alpha-slate-50-alt1-92: rgba(247, 250, 252, 0.92);
  --alpha-slate-50-alt1-96: rgba(247, 250, 252, 0.96);
  --alpha-slate-50-alt11-92: rgba(247, 249, 252, 0.92);
  --alpha-slate-50-alt11-94: rgba(247, 249, 252, 0.94);
  --alpha-slate-50-alt14-98: rgba(245, 248, 255, 0.98);
  --alpha-slate-50-alt15-84: rgba(246, 249, 253, 0.84);
  --alpha-slate-50-alt15-86: rgba(246, 249, 253, 0.86);
  --alpha-slate-50-alt15-9: rgba(246, 249, 253, 0.9);
  --alpha-slate-50-alt16-94: rgba(246, 248, 251, 0.94);
  --alpha-slate-50-alt17-94: rgba(245, 248, 252, 0.94);
  --alpha-slate-50-alt18-93: rgba(245, 248, 251, 0.93);
  --alpha-slate-500-04: rgba(100, 116, 139, 0.04);
  --alpha-slate-500-12: rgba(100, 116, 139, 0.12);
  --alpha-slate-500-16: rgba(100, 116, 139, 0.16);
  --alpha-slate-500-26: rgba(100, 116, 139, 0.26);
  --alpha-slate-600-92: rgba(71, 85, 105, 0.92);
  --alpha-slate-800-92: rgba(30, 41, 59, 0.92);
  --alpha-slate-900-04: rgba(15, 23, 42, 0.04);
  --alpha-slate-900-05: rgba(15, 23, 42, 0.05);
  --alpha-slate-900-07: rgba(15, 23, 42, 0.07);
  --alpha-slate-900-08: rgba(15, 23, 42, 0.08);
  --alpha-slate-900-12: rgba(15, 23, 42, 0.12);
  --alpha-slate-900-13: rgba(15, 23, 42, 0.13);
  --alpha-slate-900-18: rgba(15, 23, 42, 0.18);
  --alpha-slate-900-24: rgba(15, 23, 42, 0.24);
  --alpha-slate-900-4: rgba(15, 23, 42, 0.4);
  --alpha-slate-900-5: rgba(15, 23, 42, 0.5);
  --alpha-slate-900-58: rgba(15, 23, 42, 0.58);
  --alpha-slate-900-6: rgba(15, 23, 42, 0.6);
  --alpha-slate-950-2: rgba(2, 6, 23, 0.2);
  --alpha-stone-50-98: rgba(255, 250, 244, 0.98);
  --alpha-stone-50-alt1-98: rgba(255, 252, 244, 0.98);
  --alpha-teal-50-92: rgba(241, 253, 249, 0.92);
  --alpha-teal-50-98: rgba(240, 253, 250, 0.98);
  --alpha-white-01: rgba(255, 255, 255, 0.01);
  --alpha-white-012: rgba(255, 255, 255, 0.012);
  --alpha-white-015: rgba(255, 255, 255, 0.015);
  --alpha-white-035: rgba(255, 255, 255, 0.035);
  --alpha-white-1: rgba(255, 255, 255, 0.1);
  --alpha-white-11: rgba(255, 255, 255, 0.11);
  --alpha-white-38: rgba(255, 255, 255, 0.38);
  --alpha-white-52: rgba(255, 255, 255, 0.52);
  --alpha-white-55: rgba(255, 255, 255, 0.55);
  --alpha-white-56: rgba(255, 255, 255, 0.56);
  --alpha-white-66: rgba(255, 255, 255, 0.66);
  --alpha-white-68: rgba(255, 255, 255, 0.68);
  --alpha-white-7: rgba(255, 255, 255, 0.7);
  --alpha-white-72: rgba(255, 255, 255, 0.72);
  --alpha-white-74: rgba(255, 255, 255, 0.74);
  --alpha-white-75: rgba(255, 255, 255, 0.75);
  --alpha-white-76: rgba(255, 255, 255, 0.76);
  --alpha-white-78: rgba(255, 255, 255, 0.78);
  --alpha-white-8: rgba(255, 255, 255, 0.8);
  --alpha-white-82: rgba(255, 255, 255, 0.82);
  --alpha-white-84: rgba(255, 255, 255, 0.84);
  --alpha-white-86: rgba(255, 255, 255, 0.86);
  --alpha-white-88: rgba(255, 255, 255, 0.88);
  --alpha-white-9: rgba(255, 255, 255, 0.9);
  --alpha-white-92: rgba(255, 255, 255, 0.92);
  --alpha-white-96: rgba(255, 255, 255, 0.96);

  /* ── Palette extensions (theme-invariant) ──
     Base hues and alpha steps referenced by component re-pins and gradient
     stops that previously hardcoded raw literals. Defined once (never
     theme-flipped) so a re-pin that needs a fixed light/dark base keeps it in
     both themes. Suffix = the alpha's fractional digits, matching the existing
     --alpha-* convention (e.g. --alpha-green-200-2 == 0.2). */
  --tone-ink: #0f172a;
  --tone-ink-deep: #020617;
  --alpha-ink-94: rgba(15, 23, 42, 0.94);
  --alpha-ink-deep-42: rgba(2, 6, 23, 0.42);
  --alpha-ink-deep-06: rgba(2, 6, 23, 0.06);
  --alpha-ink-deep-04: rgba(2, 6, 23, 0.04);
  --alpha-black-3: rgba(0, 0, 0, 0.3);
  --alpha-white-06: rgba(255, 255, 255, 0.06);
  --alpha-white-072: rgba(255, 255, 255, 0.072);
  --alpha-white-04: rgba(255, 255, 255, 0.04);
  --alpha-white-03: rgba(255, 255, 255, 0.03);
  --alpha-frost-98: rgba(248, 250, 252, 0.98);
  --alpha-slate-200-66: rgba(226, 232, 240, 0.66);
  --alpha-slate-100-9: rgba(236, 241, 246, 0.9);
  --alpha-slate-50-98: rgba(242, 246, 250, 0.98);
  --alpha-brand-navy-24: rgba(38, 79, 118, 0.24);
  --alpha-brand-navy-18: rgba(38, 79, 118, 0.18);
  --alpha-brand-navy-2: rgba(38, 79, 118, 0.2);
  --alpha-brand-navy-16: rgba(38, 79, 118, 0.16);
  --alpha-amber-800-6: rgba(146, 64, 14, 0.6);
  --alpha-amber-800-34: rgba(146, 64, 14, 0.34);
  --alpha-amber-50-98: rgba(255, 251, 235, 0.98);
  --alpha-amber-50-82: rgba(255, 251, 235, 0.82);
  --alpha-emerald-800-6: rgba(6, 95, 70, 0.6);
  --alpha-emerald-800-32: rgba(6, 95, 70, 0.32);
  --alpha-red-900-7: rgba(127, 29, 29, 0.7);
  --alpha-red-900-32: rgba(127, 29, 29, 0.32);
  --alpha-rose-50-68: rgba(255, 241, 242, 0.68);
  --alpha-green-600-2: rgba(22, 163, 74, 0.2);
  --alpha-role-info-surface-96: rgba(239, 246, 255, 0.96);
  --alpha-violet-50-96: rgba(245, 243, 255, 0.96);
}