/* =============================================================
   saaha-base.css  —  Saaha Fabric OS · ROOT BASE (v2, brand-per-file)
   Compiled from tokens/saaha.tokens.json. DO NOT hand-edit values; edit the
   token file and recompile. See RECONCILIATION_REPORT.md + CLAUDE.md.

   MODE MODEL (v2): modes are LIGHT / DARK and REGION-SCOPABLE.
     :root, [data-mode="light"]   = light contract (default + re-assertable)
     [data-mode="dark"]           = dark contract
   Both are plain attribute selectors and custom props inherit, so a mode set
   on ANY element themes that subtree — a dark sidebar can live in a light page
   (the "hybrid"). No third mode: hybrid = composition.

   BRAND is the FILE, not a mode key. This file is Saaha only. Innovo / Army are
   separate brand-delta files authored in the MSGP project (their collapsed
   values were set aside in migration/innovo-army-delta-input.json).

   DEPRECATION WINDOW: the legacy compound-mode + [data-theme] selectors are kept
   aliased onto light/dark for one release so existing call sites keep resolving.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Primitives · Saaha color */
  --saaha-alpha-black-10: rgba(0,0,0,0.1);
  --saaha-alpha-black-05: rgba(0,0,0,0.05);
  --saaha-alpha-black-08: rgba(0,0,0,0.08);
  --saaha-alpha-black-25: rgba(0,0,0,0.25);
  --saaha-alpha-black-50: rgba(0,0,0,0.5);
  --saaha-alpha-black-75: rgba(0,0,0,0.75);
  --saaha-alpha-teal-10: rgba(13,115,119,0.1);
  --saaha-alpha-teal-20: rgba(13,115,119,0.2);
  --saaha-alpha-violet-15: rgba(107,91,201,0.15);
  --saaha-alpha-white-08: rgba(255,255,255,0.078);
  --saaha-alpha-white-12: rgba(255,255,255,0.12);
  --saaha-alpha-white-16: rgba(255,255,255,0.161);
  --saaha-alpha-white-28: rgba(255,255,255,0.278);
  --saaha-base-black: #000000;
  --saaha-base-white: #FFFFFF;
  --saaha-gold-700: #B89100; /* promoted from army-gold-700 during v2 migration — value unchanged */
  --saaha-alpha-white-14: rgba(255,255,255,0.14);
  --saaha-alpha-teal-500-14: rgba(58,167,170,0.14);
  --saaha-alpha-teal-500-10: rgba(58,167,170,0.10);
  --saaha-alpha-white-72: rgba(255,255,255,0.72);
  --saaha-alpha-white-65: rgba(245,243,238,0.65);
  --saaha-alpha-white-10: rgba(255,255,255,0.10);
  --saaha-alpha-white-16: rgba(255,255,255,0.16);
  --saaha-alpha-teal-700-50: rgba(13,115,119,0.5);
  --saaha-olive-500: #8B9B7A;
  --saaha-gray-400: #A0AAB8; /* completes gray ramp; skeleton use */
  --saaha-coral-100: #FAE9DE;
  --saaha-coral-300: #F3C3A5;
  --saaha-coral-500: #E89A6F;
  --saaha-coral-600: #CD8157;
  --saaha-coral-700: #A86642;
  --saaha-gray-100: #EDF2F7;
  --saaha-gray-200: #E2E8F0;
  --saaha-gray-300: #CBD5E0;
  --saaha-gray-500: #718096;
  --saaha-ink-600: #4A5568;
  --saaha-ink-700: #2D3748;
  --saaha-navy-600: #3A4762;
  --saaha-navy-700: #25304A;
  --saaha-navy-800: #1A2332;
  --saaha-navy-900: #0F1620;
  --saaha-navy-950: #0A101A;
  --saaha-parchment-100: #F7F5F0;
  --saaha-parchment-200: #EFECE3;
  --saaha-sage-100: #EEF1E8;
  --saaha-sage-300: #C4CEB3;
  --saaha-sage-500: #8B9B7A;
  --saaha-sage-600: #6D7D5E;
  --saaha-sage-800: #47543C;
  --saaha-sand-100: #F5EDD7;
  --saaha-sand-300: #E2CE97;
  --saaha-sand-500: #C4A35A;
  --saaha-sand-600: #A88A45;
  --saaha-sand-700: #91773B;
  --saaha-sand-800: #7A6430;
  --saaha-slate-200: #D8DEE8;
  --saaha-slate-300: #94A3B8;
  --saaha-slate-400: #9CA3AF;
  --saaha-slate-450: #A4AEC2;
  --saaha-slate-500: #6B7280;
  --saaha-slate-550: #7B8699;
  --saaha-slate-600: #687083;
  --saaha-slate-700: #5A6576;
  --saaha-status-danger: #C53030;
  --saaha-status-danger-bright: #F56565;
  --saaha-status-danger-deep: #9B2C2C;
  --saaha-status-success: #2F855A;
  --saaha-status-success-bright: #48BB78;
  --saaha-status-warning: #B7791F;
  --saaha-status-warning-bright: #D69E2E;
  --saaha-status-warning-deep: #975A16;
  --saaha-teal-100: #E0F0F1;
  --saaha-teal-200: #5EEAD4;
  --saaha-teal-300: #9CD1D3;
  --saaha-teal-400: #2DD4BF;
  --saaha-teal-500: #3AA7AA;
  --saaha-teal-600: #1A8A8E;
  --saaha-teal-700: #0D7377;
  --saaha-teal-800: #0A5C5F;
  --saaha-teal-900: #062E2F;
  --saaha-violet-100: #E8E5F5;
  --saaha-violet-300: #D2CDE8;
  --saaha-violet-500: #6B5BC9;
  --saaha-violet-700: #4C3F8B;

  /* Primitives · State-tonal (governance-badge pastels — light-mode values, mode-invariant) */
  --saaha-state-tonal-allowed-bg: #E8F3EC;
  --saaha-state-tonal-allowed-border: #C8E6D2;
  --saaha-state-tonal-denied-bg: #FBE3E3;
  --saaha-state-tonal-denied-border: #F1BCBC;
  --saaha-state-tonal-denied-fg: #9B2C2C;
  --saaha-state-tonal-pending-bg: #FAEFD8;
  --saaha-state-tonal-pending-border: #F0DCA4;
  --saaha-state-tonal-pending-fg: #8B5A0B;
  --saaha-state-tonal-review-border: #B9DCDE;

  /* Primitives · Vendor (third-party model-vendor brand marks — NON-SEMANTIC; never themed, never a UI role) */
  --vendor-openai: #10B981;
  --vendor-anthropic: #D97757;
  --vendor-google: #4285F4;
  --vendor-meta: #1877F2;
  --vendor-mistral: #FA5C2A;
  --vendor-cohere: #39594D;

  /* Primitives · Radius */
  --radius-lg: 10px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --radius-sm: 4px;
  --radius-xl: 14px;
  --radius-xs: 2px;

  /* Primitives · Spacing (4pt multiplier scale + 2px sub-grid) */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-0-5: 2px;
  --space-1-5: 6px;
  --space-2-5: 10px;
  --space-3-5: 14px;
  --space-4-5: 18px;

  /* Type */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-size-body: 15px;
  --font-size-display: 56px;
  --font-size-h1: 40px;
  --font-size-h2: 30px;
  --font-size-h3: 22px;
  --font-size-h4: 18px;
  --font-size-micro: 11px;
  --font-size-small: 13px;
  --lh-normal: 1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */
  --lh-snug: 1.3; /* @kind font */
  --lh-tight: 1.15; /* @kind font */
  --ls-caps: 0.09em;
  --ls-normal: 0em;
  --ls-snug: -0.01em;
  --ls-tight: -0.02em;
  --ls-tightest: -0.005em;
  --ls-wide: 0.04em;
  --weight-black: 800;
  --weight-bold: 700;
  --weight-medium: 500;
  --weight-regular: 400;
  --weight-semibold: 600;

  /* Brand-fixed · Control sizes (semantic.size.control-*) */
  --size-control-sm: var(--space-8);
  --size-control-compact: var(--space-9);
  --size-control-default: var(--space-10);

  /* Brand-fixed · Border widths */
  --border-thin: 1px;
  --border-med: 1.5px;
  --border-thick: 2px;

  /* Brand-fixed · Motion */
  --dur-fast: 120ms; /* @kind other */
  --dur-med: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */

  /* Brand-fixed · Elevation */
  --shadow-xs: 0 1px 2px rgba(15,22,32,0.06);
  --shadow-sm: 0 2px 4px rgba(15,22,32,0.06), 0 1px 2px rgba(15,22,32,0.04);
  --shadow-md: 0 4px 12px rgba(15,22,32,0.08), 0 2px 4px rgba(15,22,32,0.04);
  --shadow-lg: 0 12px 32px rgba(15,22,32,0.12), 0 4px 8px rgba(15,22,32,0.06);
  --shadow-focus: 0 0 0 3px rgba(13,115,119,0.28);

  /* v2 fold — inverse-panel family: MODE-INVARIANT fixed-dark chrome (:root only; never flips) */
  --panel-inverse-bg: var(--saaha-navy-800);
  --panel-inverse-bg-deep: var(--saaha-navy-900);
  --panel-inverse-bg-rail: var(--saaha-navy-700);
  --panel-inverse-fg: var(--saaha-parchment-100);
  --panel-inverse-fg-strong: var(--saaha-base-white);
  --panel-inverse-accent: var(--saaha-teal-300);
  --panel-inverse-muted: var(--saaha-slate-450);
  --panel-inverse-faint: var(--saaha-slate-550);
  --panel-inverse-muted-alpha: var(--saaha-alpha-white-72);
  --panel-inverse-faint-alpha: var(--saaha-alpha-white-65);
  --panel-inverse-hover: var(--saaha-alpha-white-08);
  --panel-inverse-divider: var(--saaha-alpha-white-10);
  --panel-inverse-divider-strong: var(--saaha-alpha-white-16);
  --panel-inverse-icon-border: var(--saaha-alpha-teal-700-50);

  /* Component tier (tier 3) — defaults to brand-invariant; a brand delta MAY reshape */
  /* Control geometry. --control-radius is the single "control roundness" knob
     (buttons + form controls consume it). --control-radius-pill stays separate
     for genuinely pill-shaped controls (search, etc.) — do not fold into it.
     Default = --radius-md (6px), the current Saaha control value → no visual drift. */
  --control-radius: var(--radius-md);
  --control-radius-pill: var(--radius-pill);
  --btn-radius: var(--control-radius);
  --btn-border-width: var(--border-med);
  /* Segmented control (.sdt-vsw view switcher + .sdt-density density toggle).
     Shared shell + skin; defaults reproduce the current floating-pill look, so
     existing consumers are pixel-identical. A tenant/brand delta overrides these
     to reshape BOTH controls. Color vars alias themed roles → inherit light/dark.
     Source: tokens/saaha.tokens.json → component.segment / component.view-switcher. */
  --segment-height: var(--size-control-sm); /* @kind spacing */ /* shared control-height → toolbar-aligned */
  --segment-padding: var(--space-0-5); /* @kind spacing */
  --segment-radius: 8px; /* @kind radius */ /* off-scale shell radius — matches current */
  --segment-bg: var(--bg-surface); /* @kind color */
  --segment-border: var(--border-default); /* @kind color */
  --segment-btn-radius: var(--radius-md); /* @kind radius */
  --segment-btn-divider: 0 solid transparent; /* @kind other */ /* 0 width = no wall (pill) */
  --segment-fg: var(--text-muted); /* @kind color */
  --segment-fg-hover: var(--text-primary); /* @kind color */
  --segment-active-bg: var(--bg-canvas); /* @kind color */
  --segment-active-fg: var(--text-primary); /* @kind color */
  --view-switcher-btn-width: 30px; /* @kind spacing */
  --view-switcher-icon-size: var(--space-4); /* @kind spacing */

  /* DataTable reskin hooks (.sdt controls) — Fabric Admin Portal themeability CR.
     Defaults reproduce today's render. Radii split the shared pill/checkbox corners
     off the global scale so a rectilinear brand can flip table controls alone; color
     roles alias themed semantic roles → they inherit light/dark (a tenant inverts a
     pair, e.g. ink-fill/gold-text primary, by overriding under [data-mode]). The
     badge-fg pair is FIXED because the label tracks the FILL's luminance and the
     state fills are mode-invariant primitives. Source: tokens/saaha.tokens.json →
     component.table. Consumed by components/data-table/data-table.css. */
  --table-badge-radius: var(--radius-pill); /* @kind radius */
  --table-filter-pill-radius: var(--radius-pill); /* @kind radius */
  --table-qf-radius: var(--radius-pill); /* @kind radius */
  --table-checkbox-radius: 3px; /* @kind radius */ /* off-scale — matches current 3px */
  --table-command-bg: var(--action-primary); /* @kind color */
  --table-command-bg-hover: var(--action-primary-hover); /* @kind color */
  --table-command-fg: var(--text-on-brand); /* @kind color */
  --table-checkbox-fill: var(--action-primary); /* @kind color */
  --table-checkbox-check: var(--text-on-brand); /* @kind color */
  --table-badge-fg-on-dark: var(--saaha-base-white); /* @kind color */
  --table-badge-fg-on-light: var(--saaha-navy-900); /* @kind color */
  --table-avatar-mono-bg: var(--action-primary); /* @kind color */
  --table-avatar-mono-fg: var(--text-on-brand); /* @kind color */
  --table-btn-active-bg: var(--text-primary); /* @kind color */
  --table-btn-active-fg: var(--bg-surface); /* @kind color */
  --table-pill-on-bg: var(--chip-selected-bg); /* @kind color */
  --table-pill-on-border: var(--chip-selected-border); /* @kind color */
  --table-pill-on-fg: var(--chip-selected-fg); /* @kind color */ /* = text.primary; reproduces today's render (CR named text.body — see JSON note) */
  --table-pill-on-accent: var(--action-primary); /* @kind color */

  /* Inline bulk bar (.sdt-bulk) — component.table.bulk-*. Every default reproduces
     today's render (chip-selected-bg surface + action-primary accents + border-faint);
     the CR's 'transparent surface' description is inaccurate for the base. A brand
     retheme (MSGP-Army: ink/gold, reusing --table-fbulk-* values) overrides these. */
  --table-bulk-bg: var(--chip-selected-bg); /* @kind color */
  --table-bulk-fg: var(--text-muted); /* @kind color */
  --table-bulk-accent: var(--action-primary); /* @kind color */
  --table-bulk-pill-bg: var(--bg-surface); /* @kind color */
  --table-bulk-pill-fg: var(--action-primary-text); /* @kind color */
  --table-bulk-border: var(--border-faint); /* @kind color */
  --table-bulk-divider: var(--border-default); /* @kind color */

  /* In-bar bulk-action buttons (.sdt-bulk .sdt-btn) — component.table.bulk-btn-*.
     Defaults reproduce the base .sdt-btn render (white fill, primary label, default
     border, canvas hover) so plain Saaha is pixel-identical; a brand whose bulk bar is
     a command surface repoints these. -danger-fg replaces a former inline style. */
  --table-bulk-btn-bg: var(--bg-surface); /* @kind color */
  --table-bulk-btn-fg: var(--text-primary); /* @kind color */
  --table-bulk-btn-border: var(--border-default); /* @kind color */
  --table-bulk-btn-bg-hover: var(--bg-canvas); /* @kind color */
  --table-bulk-btn-danger-fg: var(--state-denied); /* @kind color */
  --table-bulk-btn-danger-bg: transparent; /* @kind color */ /* default = today's text-only danger button; set solid → filled destructive button (danger-fg = on-fill label, must clear AA 4.5). Border stays --table-bulk-btn-border. */

  /* Badge STATUS-chip skin — component.chip.*. Four families (success / warning /
     error / neutral), each bg/fg/dot/border. MODE-INVARIANT: each references the
     primitive that IS today's badge hex, so Saaha status pills are pixel-identical
     while a brand delta can reskin any family. Border slot is `-border`. */
  --chip-success-bg: var(--saaha-state-tonal-allowed-bg); /* @kind color */
  --chip-success-fg: var(--saaha-status-success); /* @kind color */
  --chip-success-dot: var(--saaha-status-success); /* @kind color */
  --chip-success-border: var(--saaha-state-tonal-allowed-border); /* @kind color */
  --chip-warning-bg: var(--saaha-state-tonal-pending-bg); /* @kind color */
  --chip-warning-fg: var(--saaha-state-tonal-pending-fg); /* @kind color */
  --chip-warning-dot: var(--saaha-status-warning); /* @kind color */
  --chip-warning-border: var(--saaha-state-tonal-pending-border); /* @kind color */
  --chip-error-bg: var(--saaha-state-tonal-denied-bg); /* @kind color */
  --chip-error-fg: var(--saaha-state-tonal-denied-fg); /* @kind color */
  --chip-error-dot: var(--saaha-status-danger); /* @kind color */
  --chip-error-border: var(--saaha-state-tonal-denied-border); /* @kind color */
  --chip-neutral-bg: var(--saaha-gray-100); /* @kind color */
  --chip-neutral-fg: var(--saaha-ink-600); /* @kind color */
  --chip-neutral-dot: var(--saaha-gray-500); /* @kind color */
  --chip-neutral-border: var(--saaha-gray-200); /* @kind color */
  /* Active/selected chip surface (component.chip.selected-*). fg/border theme via
     the referenced roles; -bg is a themed literal set in the light/dark contracts. */
  --chip-selected-fg: var(--text-primary); /* @kind color */
  --chip-selected-border: var(--border-brand-soft); /* @kind color */

/* Legacy primitive aliases (deprecated) */
  --saaha-parchment: var(--saaha-parchment-100);
  --saaha-parchment-2: var(--saaha-parchment-200);
  --saaha-ink: var(--saaha-ink-700);
  --saaha-ink-mute: var(--saaha-ink-600);
  --saaha-gradient: var(--gradient-brand);
  --saaha-gradient-soft: var(--gradient-brand-soft); /* deprecated alias → gradient.brand-soft */

  /* Legacy semantic aliases (deprecated → new roles) */
  --fg-1: var(--text-primary);
  --fg-2: var(--text-body);
  --fg-3: var(--text-muted);
  --fg-4: var(--text-faint);
  --fg-inverse: var(--text-inverse);
  --fg-on-brand: var(--text-on-brand);
  --interactive: var(--action-primary);
  --interactive-hover: var(--action-primary-hover);
  --interactive-subtle: var(--action-primary-subtle);
  --color-brand: var(--brand-default);
  --color-brand-hover: var(--brand-hover);
  --color-brand-active: var(--brand-active);
  --color-accent-sand: var(--brand-accent-sand);
  --color-accent-coral: var(--brand-accent-coral);
  --color-success: var(--status-success);
  --color-warning: var(--status-warning);
  --color-danger: var(--status-danger);
  --color-info: var(--status-info);
  --color-state-allowed: var(--state-allowed);
  --color-state-denied: var(--state-denied);
  --color-state-pending: var(--state-pending);
  --color-state-review: var(--state-review);
  /* Tonal governance-badge roles (mode-invariant) — quieter chip surfaces beside the solid --state-* */
  --state-allowed-bg: var(--saaha-state-tonal-allowed-bg);
  --state-allowed-border: var(--saaha-state-tonal-allowed-border);
  --state-allowed-fg: var(--saaha-status-success);
  --state-denied-bg: var(--saaha-state-tonal-denied-bg);
  --state-denied-border: var(--saaha-state-tonal-denied-border);
  --state-denied-fg: var(--saaha-state-tonal-denied-fg);
  --state-pending-bg: var(--saaha-state-tonal-pending-bg);
  --state-pending-border: var(--saaha-state-tonal-pending-border);
  --state-pending-fg: var(--saaha-state-tonal-pending-fg);
  --state-review-bg: var(--saaha-teal-100);
  --state-review-border: var(--saaha-state-tonal-review-border);
  --state-review-fg: var(--saaha-teal-800);
  --border-1: var(--border-faint);
  --border-2: var(--border-default);
  --status-danger-text: var(--saaha-status-danger-deep);
  --tone-federal: var(--saaha-violet-500);
  --tone-federal-bg: var(--saaha-violet-100);
  --tone-federal-border: var(--saaha-violet-300);
  --tone-federal-fg: var(--saaha-violet-700);
  /* Categorical identity ramp — sibling-distinguishing marks (avatars, operator groups, chart series). Brand-invariant. */
  --categorical-1: var(--saaha-sand-500);
  --categorical-2: var(--saaha-coral-500);
  --categorical-3: var(--saaha-navy-800);
  --categorical-4: var(--saaha-teal-700);
  --categorical-5: var(--saaha-gold-700);
  --categorical-6: var(--saaha-sage-500);
}

/* ---- LIGHT contract (default at :root; region-re-assertable) ----
   Legacy aliases folded into the selector list for the deprecation window. */
:root,
[data-mode="light"],
[data-brand="saaha"][data-mode="warp-weft"], [data-mode="saaha-warp-weft"],
[data-theme="warp-weft"] {
  --status-danger-text: var(--saaha-status-danger-deep);
  --tone-federal: var(--saaha-violet-500);
  --tone-federal-bg: var(--saaha-violet-100);
  --tone-federal-border: var(--saaha-violet-300);
  --tone-federal-fg: var(--saaha-violet-700);
  --action-primary: var(--saaha-teal-700);
  --action-primary-hover: var(--saaha-teal-800);
  --action-primary-subtle: var(--saaha-teal-100);
  --chip-selected-bg: var(--saaha-teal-100); /* @kind color */ /* solid selected surface — replaces action-primary-subtle in the DataTable */
  --action-primary-text: var(--saaha-base-white);
  --avatar-coral: var(--saaha-coral-500);
  --avatar-fg: var(--saaha-base-white);
  --avatar-gold: var(--saaha-gold-700);
  --avatar-navy: var(--saaha-navy-800);
  --avatar-olive: var(--saaha-sage-500);
  --avatar-sand: var(--saaha-sand-500);
  --avatar-teal: var(--saaha-teal-700);
  --bg-accent: var(--saaha-teal-700);
  --bg-brand: var(--saaha-navy-900);
  --bg-canvas: var(--saaha-parchment-100);
  --bg-inverse: var(--saaha-navy-800);
  --bg-selected: var(--saaha-alpha-teal-10);
  --bg-selected-warm: var(--saaha-sand-500);
  --bg-sunken: var(--saaha-parchment-200);
  --bg-surface: var(--saaha-base-white);
  --bg-surface-2: var(--saaha-parchment-100);
  --bg-hover: var(--saaha-alpha-black-05);
  --bg-press: var(--saaha-alpha-black-08);
  --bg-warm: var(--saaha-parchment-200);
  --border-brand: var(--saaha-teal-700);
  --border-default: var(--saaha-slate-500);
  --border-faint: var(--saaha-gray-200);
  --border-focus: var(--saaha-teal-700);
  --border-strong: var(--saaha-ink-600);
  --border-subtle: var(--saaha-parchment-200);
  --brand-accent-coral: var(--saaha-coral-500);
  --brand-accent-sand: var(--saaha-sand-500);
  --brand-accent-tan: var(--saaha-sand-500);
  --brand-active: var(--saaha-teal-900);
  --brand-default: var(--saaha-teal-700);
  --brand-hover: var(--saaha-teal-800);
  --overlay-ai-tint: var(--saaha-alpha-teal-10);
  --overlay-image-darken: var(--saaha-alpha-black-25);
  --overlay-scrim: var(--saaha-alpha-black-75);
  --portal-fabric-admin: var(--saaha-ink-700);
  --portal-loom: var(--saaha-sage-500);
  --portal-org-admin: var(--saaha-teal-700);
  --portal-tapestry: var(--saaha-coral-500);
  --state-allowed: var(--saaha-status-success);
  --state-denied: var(--saaha-status-danger);
  --state-pending: var(--saaha-status-warning);
  --state-review: var(--saaha-teal-700);
  --status-ai: var(--saaha-teal-700);
  --status-danger: var(--saaha-status-danger);
  --status-info: var(--saaha-teal-700);
  --status-success: var(--saaha-status-success);
  --status-warning: var(--saaha-status-warning-deep);
  --text-body: var(--saaha-ink-700);
  --text-brand: var(--saaha-teal-700);
  --text-faint: var(--saaha-gray-500);
  --text-inverse: var(--saaha-parchment-100);
  --text-muted: var(--saaha-slate-600);
  --text-muted-on-inverse: var(--saaha-slate-300);
  --text-on-accent: var(--saaha-base-white);
  --text-on-brand: var(--saaha-base-white);
  --text-on-inverse: var(--saaha-base-white);
  --text-primary: var(--saaha-navy-800);
  --text-secondary: var(--saaha-slate-700);
  --gradient-brand: linear-gradient(95deg, var(--saaha-teal-600) 0%, var(--saaha-teal-500) 22%, var(--saaha-sand-500) 60%, var(--saaha-coral-500) 100%);
  --gradient-brand-mark: linear-gradient(135deg, var(--saaha-teal-700) 0%, var(--saaha-sage-500) 100%);
  --gradient-brand-panel: linear-gradient(135deg, var(--saaha-teal-700) 0%, var(--saaha-navy-800) 65%, var(--saaha-navy-800) 100%);
  --gradient-brand-soft: linear-gradient(95deg, var(--saaha-teal-700) 0%, var(--saaha-sand-600) 55%, #D16238 100%);
  /* v2 fold — accent (canonical name; brand-accent-* kept as aliases) + promoted dark-tier roles */
  --accent-coral: var(--saaha-coral-500);
  --accent-sand: var(--saaha-sand-500);
  --text-brand-soft: var(--saaha-teal-700);
  --text-muted-strong: var(--saaha-ink-600);
  --text-faint-strong: var(--saaha-gray-500);
  --text-faint-soft: var(--saaha-gray-500);
  --text-on-brand-chip: var(--saaha-base-white);
  --bg-selected-brand: var(--saaha-teal-100);
  --bg-selected-brand-subtle: var(--saaha-teal-100);
  --bg-brand-chip: var(--saaha-teal-700);
  --border-divider-strong: var(--saaha-gray-300);
  --bg-chrome: var(--saaha-parchment-100);
  --bg-command: var(--saaha-teal-900);
  --bg-on-command-fill: var(--saaha-alpha-white-08);
  --text-on-command: rgba(255,255,255,0.92);
  --text-on-command-muted: rgba(255,255,255,0.75);
  --border-on-command: var(--saaha-alpha-white-08);
  --border-on-command-divider: var(--saaha-alpha-white-14);
  --border-brand-soft: var(--saaha-teal-300);

  /* ---------------------------------------------------------------------------
     shadcn/ui + Tailwind compatibility layer (LIGHT).
     Additive compat exports — aliases of the semantic roles above, emitted as
     HSL triplets (H S% L%) so `hsl(var(--token) / <alpha>)` works. Source of
     truth: tokens/saaha.tokens.json → "shadcn". Do not hand-edit values; keep
     in sync with the JSON. See CLAUDE.md.
     --------------------------------------------------------------------------- */
  --background: 43 30% 95%;              /* @kind color */ /* ← background.canvas */
  --foreground: 218 32% 15%;            /* @kind color */ /* ← text.primary */
  --card: 0 0% 100%;                    /* @kind color */ /* ← background.surface */
  --card-foreground: 218 32% 15%;       /* @kind color */ /* ← text.primary */
  --popover: 0 0% 100%;                 /* @kind color */ /* ← background.surface */
  --popover-foreground: 218 32% 15%;    /* @kind color */ /* ← text.primary */
  --primary: 182 80% 26%;               /* @kind color */ /* ← action.primary (teal-700) */
  --primary-foreground: 0 0% 100%;      /* @kind color */ /* ← text.on-brand (white in light) */
  --secondary: 45 27% 91%;              /* @kind color */ /* ← background.sunken */
  --secondary-foreground: 218 32% 15%;  /* @kind color */ /* ← text.primary */
  --muted: 45 27% 91%;                  /* @kind color */ /* ← background.sunken */
  --muted-foreground: 216 13% 41%;      /* @kind color */ /* ← text.secondary (AA 5.0:1 on muted; text.muted was 4.2) */
  --accent: 0 0% 95%;                   /* @kind color */ /* ← background.hover, solidified over surface */
  --accent-foreground: 218 32% 15%;     /* @kind color */ /* ← text.primary */
  --destructive: 0 61% 48%;             /* @kind color */ /* ← status.danger (white AA 5.47:1) */
  --destructive-foreground: 0 0% 100%;  /* @kind color */ /* ← base.white */
  --border: 220 9% 46%;                 /* @kind color */ /* ← border.default */
  --input: 220 9% 46%;                  /* @kind color */ /* ← border.default */
  --ring: 182 80% 26%;                  /* @kind color */ /* ← border.focus */
  --radius: 0.375rem;                   /* @kind radius */ /* ← control.radius (6px), length not triplet */
  --chart-1: 41 47% 56%;                /* @kind color */ /* ← categorical.1 (sand) */
  --chart-2: 21 72% 67%;                /* @kind color */ /* ← categorical.2 (coral) */
  --chart-3: 218 32% 15%;               /* @kind color */ /* ← categorical.3 (navy) */
  --chart-4: 182 80% 26%;               /* @kind color */ /* ← categorical.4 (teal) */
  --chart-5: 47 100% 36%;               /* @kind color */ /* ← categorical.5 (gold) */
  --sidebar: 218 32% 15%;                       /* @kind color */ /* ← inverse-panel.bg (always-navy rail) */
  --sidebar-foreground: 43 30% 95%;             /* @kind color */ /* ← inverse-panel.fg */
  --sidebar-primary: 182 38% 72%;               /* @kind color */ /* ← inverse-panel.accent */
  --sidebar-primary-foreground: 218 32% 15%;    /* @kind color */ /* ← inverse-panel.bg (fixed navy; AA ~10.8:1) */
  --sidebar-accent: 218 20% 22%;                /* @kind color */ /* ← inverse-panel.hover, solidified */
  --sidebar-accent-foreground: 43 30% 95%;      /* @kind color */ /* ← inverse-panel.fg */
  --sidebar-border: 218 18% 23%;                /* @kind color */ /* ← inverse-panel.divider, solidified */
  --sidebar-ring: 182 80% 26%;                  /* @kind color */ /* ← border.focus */
}

/* ---- DARK contract (region-scopable: themes any subtree it's set on) ----
   Legacy aliases folded into the selector list for the deprecation window. */
[data-mode="dark"],
[data-brand="saaha"][data-mode="sidebar-rail"], [data-mode="saaha-sidebar-rail"],
[data-theme="sidebar-rail"] {
  --status-danger-text: var(--saaha-status-danger-bright);
  --tone-federal: var(--saaha-violet-300);
  --tone-federal-bg: var(--saaha-alpha-violet-15);
  --tone-federal-border: var(--saaha-violet-500);
  --tone-federal-fg: var(--saaha-violet-300);
  --action-primary: var(--saaha-teal-400);
  --action-primary-hover: var(--saaha-teal-200);
  --action-primary-subtle: var(--saaha-teal-800);
  --chip-selected-bg: var(--saaha-teal-800); /* @kind color */ /* solid selected surface (dark) */
  --action-primary-text: var(--saaha-base-white);
  --avatar-coral: var(--saaha-coral-500);
  --avatar-fg: var(--saaha-base-white);
  --avatar-gold: var(--saaha-gold-700);
  --avatar-navy: var(--saaha-navy-800);
  --avatar-olive: var(--saaha-sage-500);
  --avatar-sand: var(--saaha-sand-500);
  --avatar-teal: var(--saaha-teal-700);
  --bg-accent: var(--saaha-teal-400);
  --bg-brand: var(--saaha-navy-900);
  --bg-canvas: var(--saaha-navy-900);
  --bg-inverse: var(--saaha-parchment-100);
  --bg-selected: var(--saaha-alpha-teal-20);
  --bg-selected-warm: var(--saaha-sand-500);
  --bg-sunken: var(--saaha-navy-900);
  --bg-surface: var(--saaha-navy-800);
  --bg-surface-2: var(--saaha-navy-700);
  --bg-hover: var(--saaha-alpha-white-08);
  --bg-press: var(--saaha-alpha-white-12);
  --bg-warm: var(--saaha-parchment-200);
  --border-brand: var(--saaha-teal-500);
  --border-default: var(--saaha-slate-500);
  --border-faint: var(--saaha-alpha-white-08);
  --border-focus: var(--saaha-teal-400);
  --border-strong: var(--saaha-slate-300);
  --border-subtle: var(--saaha-alpha-white-08);
  --brand-accent-coral: var(--saaha-coral-500);
  --brand-accent-sand: var(--saaha-sand-500);
  --brand-accent-tan: var(--saaha-sand-500);
  --brand-active: var(--saaha-teal-300);
  --brand-default: var(--saaha-teal-400);
  --brand-hover: var(--saaha-teal-200);
  --overlay-ai-tint: var(--saaha-alpha-teal-10);
  --overlay-image-darken: var(--saaha-alpha-black-25);
  --overlay-scrim: var(--saaha-alpha-black-75);
  --portal-fabric-admin: var(--saaha-ink-700);
  --portal-loom: var(--saaha-sage-500);
  --portal-org-admin: var(--saaha-teal-700);
  --portal-tapestry: var(--saaha-coral-500);
  --state-allowed: var(--saaha-status-success);
  --state-denied: var(--saaha-status-danger);
  --state-pending: var(--saaha-status-warning);
  --state-review: var(--saaha-teal-500);
  --status-ai: var(--saaha-teal-400);
  --status-danger: var(--saaha-status-danger-bright);
  --status-info: var(--saaha-teal-500);
  --status-success: var(--saaha-status-success-bright);
  --status-warning: var(--saaha-status-warning-bright);
  --text-body: var(--saaha-gray-200);
  --text-brand: var(--saaha-teal-400);
  --text-faint: var(--saaha-slate-300);
  --text-inverse: var(--saaha-navy-800);
  --text-muted: var(--saaha-slate-450);
  --text-muted-on-inverse: var(--saaha-slate-600);
  --text-on-accent: var(--saaha-base-white);
  --text-on-brand: var(--saaha-navy-900);
  --text-on-inverse: var(--saaha-navy-900);
  --text-primary: var(--saaha-parchment-100);
  --text-secondary: var(--saaha-slate-400);
  --gradient-brand: linear-gradient(95deg, var(--saaha-teal-600) 0%, var(--saaha-teal-500) 22%, var(--saaha-sand-500) 60%, var(--saaha-coral-500) 100%);
  /* v2 fold — promoted dark-tier overrides */
  --text-brand-soft: var(--saaha-teal-300);
  --text-muted-strong: var(--saaha-slate-450);
  --text-faint-strong: var(--saaha-slate-550);
  --text-faint-soft: var(--saaha-slate-450);
  --text-on-brand-chip: var(--saaha-teal-300);
  --bg-selected-brand: var(--saaha-alpha-teal-500-14);
  --bg-selected-brand-subtle: var(--saaha-alpha-teal-500-10);
  --bg-brand-chip: var(--saaha-teal-800);
  --border-divider-strong: var(--saaha-alpha-white-14);
  --bg-chrome: var(--saaha-navy-800);

  /* ---------------------------------------------------------------------------
     shadcn/ui + Tailwind compatibility layer (DARK).
     Aliases of the DARK semantic roles, emitted as HSL triplets. Source of
     truth: tokens/saaha.tokens.json → "shadcn". Keep in sync with the JSON.
     --------------------------------------------------------------------------- */
  --background: 215 36% 9%;             /* @kind color */ /* ← background.canvas (navy-900) */
  --foreground: 43 30% 95%;             /* @kind color */ /* ← text.primary (parchment) */
  --card: 218 32% 15%;                  /* @kind color */ /* ← background.surface (navy-800) */
  --card-foreground: 43 30% 95%;        /* @kind color */ /* ← text.primary */
  --popover: 218 32% 15%;               /* @kind color */ /* ← background.surface */
  --popover-foreground: 43 30% 95%;     /* @kind color */ /* ← text.primary */
  --primary: 172 66% 50%;               /* @kind color */ /* ← action.primary (teal-400) */
  --primary-foreground: 215 36% 9%;     /* @kind color */ /* ← text.on-brand (navy-900 in dark; AA 9.76:1) */
  --secondary: 215 36% 9%;              /* @kind color */ /* ← background.sunken */
  --secondary-foreground: 43 30% 95%;   /* @kind color */ /* ← text.primary */
  --muted: 215 36% 9%;                  /* @kind color */ /* ← background.sunken */
  --muted-foreground: 218 11% 65%;      /* @kind color */ /* ← text.secondary (AA 7.16:1 on muted) */
  --accent: 218 20% 22%;                /* @kind color */ /* ← background.hover, solidified over surface */
  --accent-foreground: 43 30% 95%;      /* @kind color */ /* ← text.primary */
  --destructive: 0 56% 39%;             /* @kind color */ /* ← status.danger-DEEP (white AA 7.53:1; not bright red) */
  --destructive-foreground: 0 0% 100%;  /* @kind color */ /* ← base.white */
  --border: 220 9% 46%;                 /* @kind color */ /* ← border.default */
  --input: 220 9% 46%;                  /* @kind color */ /* ← border.default */
  --ring: 172 66% 50%;                  /* @kind color */ /* ← border.focus (teal-400) */
  --radius: 0.375rem;                   /* @kind radius */ /* ← control.radius (6px) */
  --chart-1: 41 47% 56%;                /* @kind color */ /* ← categorical.1 (mode-invariant) */
  --chart-2: 21 72% 67%;                /* @kind color */ /* ← categorical.2 */
  --chart-3: 218 32% 15%;               /* @kind color */ /* ← categorical.3 */
  --chart-4: 182 80% 26%;               /* @kind color */ /* ← categorical.4 */
  --chart-5: 47 100% 36%;               /* @kind color */ /* ← categorical.5 */
  --sidebar: 218 32% 15%;                       /* @kind color */ /* ← inverse-panel.bg (mode-invariant navy) */
  --sidebar-foreground: 43 30% 95%;             /* @kind color */ /* ← inverse-panel.fg */
  --sidebar-primary: 182 38% 72%;               /* @kind color */ /* ← inverse-panel.accent */
  --sidebar-primary-foreground: 218 32% 15%;    /* @kind color */ /* ← inverse-panel.bg (fixed navy) */
  --sidebar-accent: 218 20% 22%;                /* @kind color */ /* ← inverse-panel.hover, solidified */
  --sidebar-accent-foreground: 43 30% 95%;      /* @kind color */ /* ← inverse-panel.fg */
  --sidebar-border: 218 18% 23%;                /* @kind color */ /* ← inverse-panel.divider, solidified */
  --sidebar-ring: 172 66% 50%;                  /* @kind color */ /* ← border.focus (teal-400) */
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
html { font-family: var(--font-sans); font-size: var(--font-size-body); line-height: var(--lh-normal); color: var(--text-body); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01', 'ss03'; }
.display, h1.display { font-size: var(--font-size-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--weight-bold); color: var(--text-primary); }
h1, .h1 { font-size: var(--font-size-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--weight-bold); color: var(--text-primary); }
h2, .h2 { font-size: var(--font-size-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); font-weight: var(--weight-semibold); color: var(--text-primary); }
h3, .h3 { font-size: var(--font-size-h3); line-height: var(--lh-snug); font-weight: var(--weight-semibold); color: var(--text-primary); }
h4, .h4 { font-size: var(--font-size-h4); line-height: var(--lh-snug); font-weight: var(--weight-semibold); color: var(--text-primary); }
p, .body { font-size: var(--font-size-body); line-height: var(--lh-relaxed); color: var(--text-body); }
.small { font-size: var(--font-size-small); line-height: var(--lh-normal); color: var(--text-muted); }
.micro { font-size: var(--font-size-micro); line-height: var(--lh-normal); color: var(--text-faint); }
.eyebrow, .overline { font-size: var(--font-size-micro); letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--text-muted); }
code, kbd, samp, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }
.code-inline { font-family: var(--font-mono); font-size: 0.88em; padding: 2px 6px; background: var(--bg-sunken); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); color: var(--text-primary); }
a { color: var(--action-primary); text-decoration: none; }
a:hover { color: var(--action-primary-hover); text-decoration: underline; text-underline-offset: 2px; }
*:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }