/* ============================================================================
   FoundryAI — Spectacle Design-Token System (FAI-P12-02)
   ----------------------------------------------------------------------------
   ADR-0008 (amending ADR 0002): the v0.5 "maximum spectacle" rebuild. The
   three-layer architecture of ADR 0002 SURVIVES intact — primitives →
   semantic per [data-fai-theme] → component — and every token name the Fai*
   components consume is preserved, so the whole app re-skins from this one
   file. What changed is the values (vivid violet→magenta→cyan identity) and
   three NEW token families:

     · --fai-grad-*   named gradients (hero / button / ring / wash / shine)
     · --fai-glow-*   colored glow elevation (joins the shadow family)
     · --fai-glass-*  translucent blur surfaces + light border edge

   FAI-P13-15 extends the same families (theme keys still unchanged): a mesh
   backdrop gradient + brand edge + celebrate gradient, soft/success/danger
   glows, a strong-glass pair for the dock/palette, and the soft spring, slow
   ambient loop and stagger step the new shell animates with. Everything the
   extension adds is Tier C decorative (or carries AA-safe stops anyway) and
   is stripped by .prefs-battery / prefers-reduced-motion like the rest.

   Contrast is governed by the ADR-0008 TIERED policy, annotated inline:

     Tier A (reading & operating) — body/labels/control text, links, tables:
              AA 4.5:1 UNCHANGED (3:1 large). Every --fai-color-content-*,
              link, and primary-as-text pair below meets it.
     Tier B (display)            — hero/display moments on gradient or glass:
              ≥ 3:1 vs the gradient's worst-case stop (see --fai-grad-button:
              its stops are violet-700 6.6:1 and fuchsia-700 6.2:1, so white
              display copy on it passes AA anyway).
     Tier C (decorative)         — flourishes, sweeps, glow halos: exempt.
     Tier N (non-text UI)        — icons, rings, borders, focus: ≥ 3:1.
              Focus indicators are NEVER relaxed and stay visible in every
              theme; the high-contrast theme is exempt from relaxation by
              definition (brand hues only, AAA-leaning pairs, flat elevation).

   Theme resolution is unchanged: index.html sets data-fai-theme before first
   paint from the persisted preference (localStorage "fai-theme"), with no
   @media (prefers-color-scheme) block here — one source of truth. Theme keys
   light · dark · high-contrast · oasis are unchanged so saved preferences
   carry over. Ambient spectacle (glow / glass blur / gradient sweeps /
   ambient loops) is stripped globally by .prefs-battery (FAI-P05-14) and by
   prefers-reduced-motion — the wow is always opt-out-able.
   ========================================================================== */

/* ============================================================================
   Layer 0 — Primitives (theme-invariant)
   ----------------------------------------------------------------------------
   ADR-0008: the GUP navy ramp is retired as *brand*; the neutral, deep, and
   status ramps survive (they were never the problem). New primitives: the
   vivid brand (electric violet), its gradient partners (magenta, cyan), and
   a brighter amber for the AI accent's decorative half.
   ========================================================================== */
:root {
    /* -- Brand ramp — electric violet (the signature hue). 700 = AA text/fill
          anchor (6.55:1 with white); 600 = decorative accent only. ---------- */
    --fai-brand-0: #ffffff;
    --fai-brand-200: #EDE9FE;
    --fai-brand-300: #C4B5FD;
    --fai-brand-600: #7C3AED; /* decorative accent — 4.7:1 on white          */
    --fai-brand-700: #6D28D9; /* AA text/fill anchor — 6.55:1 with white     */
    --fai-brand-800: #5B21B6;
    --fai-brand-900: #3B0764;

    /* -- Gradient partner ramps (ADR-0008 §1). Anchors hold AA where a tier
          reads as text; the 400/500 stops are for gradients + neon only. ---- */
    --fai-fuchsia-300: #F0ABFC;
    --fai-fuchsia-400: #E879F9;
    --fai-fuchsia-500: #D946EF;
    --fai-fuchsia-600: #C026D3; /* decorative gradient stop                  */
    --fai-fuchsia-700: #A21CAF; /* AA anchor — 6.16:1 with white             */
    --fai-cyan-300: #67E8F9;
    --fai-cyan-400: #22D3EE;
    --fai-cyan-500: #06B6D4;    /* decorative gradient stop                  */
    --fai-cyan-600: #0891B2;    /* AA-leaning non-text anchor                */
    --fai-cyan-700: #0E7490;    /* AA text anchor — 5.29:1 on white          */

    /* -- Neutral ramp (GUP, retained) ------------------------------------------- */
    --fai-neutral-0: #fcfcfc;
    --fai-neutral-100: #eceef4; /* overcanvas */
    --fai-neutral-200: #dfe2ec;
    --fai-neutral-300: #d0d0d4;
    --fai-neutral-600: #52525b; /* GUP content-2 */
    --fai-neutral-700: #3f3f46;
    --fai-neutral-800: #27272a; /* GUP content-1 */
    --fai-neutral-900: #202024;

    /* -- Deep family (dark-theme surfaces, retained) ----------------------------- */
    --fai-deep-800: #171b2b;
    --fai-deep-700: #1c2133;
    --fai-deep-600: #232941;
    --fai-deep-500: #2b3252;
    --fai-deep-400: #3a4166;
    --fai-deep-300: #525a86;

    /* -- Canvas — bright, faintly violet-cooled white (the signature light page) - */
    --fai-canvas-warm: #fdfcff;

    /* -- Hairline gradient stops (retained) -------------------------------------- */
    --fai-hairline-from: #f3efff;
    --fai-hairline-to: #f7f5f1;

    /* -- Status ramps — GUP 700 anchors retained (Tier A, AA-tested) -------------- */
    --fai-positive-700: #157f3c;
    --fai-positive-300: #a5dcb8;
    --fai-positive-100: #e7f5ec;
    --fai-negative-700: #ba1c1c;
    --fai-negative-300: #f2b8b8;
    --fai-negative-100: #fdecec;
    --fai-warning-700: #ca8511; /* fill/icon anchor — white text on it is 3.05:1 */
    --fai-warning-800: #8a5a0b; /* AA adjustment — small text on light surfaces  */
    --fai-warning-300: #f3d9a8;
    --fai-warning-100: #fdf3e2;

    /* -- AI accent — brighter burnished amber (Tier A anchor + vivid glow half) -- */
    --fai-ai-700: #b45309;
    --fai-ai-300: #fbbf24;
    --fai-ai-100: #fef3c7;

    /* -- Focus — the purple survives; it now doubles as a brand hue (Tier N) ----- */
    --fai-focus: #9747ff;

    /* -- Spacing (px) — GUP scale verbatim (ADR 0002 §3) --------------------------- */
    --fai-space-0: 0px;
    --fai-space-1: 4px;
    --fai-space-2: 8px;
    --fai-space-3: 12px;
    --fai-space-4: 16px;
    --fai-space-5: 20px;
    --fai-space-6: 24px;
    --fai-space-7: 32px;
    --fai-space-8: 40px;
    --fai-space-9: 56px;

    /* Named spacing semantics (GUP): phone-first screens bias to 8/12/16. */
    --fai-space-between-sections: 48px;
    --fai-space-content-to-cta: 32px;
    --fai-space-between-content: 24px;
    --fai-space-between-form-fields: 20px;
    --fai-space-between-text: 16px;
    --fai-space-between-items: 8px;
    --fai-space-padding-xs: 8px;
    --fai-space-padding-sm: 16px;
    --fai-space-padding-md: 24px;
    --fai-space-padding-lg: 32px;
    --fai-space-padding-xl: 40px;

    /* -- Radius: pill buttons remain the regional convention (Tier C sweeps). ---- */
    --fai-radius-sm: 4px;    /* small: chips' inner elements, tight badges   */
    --fai-radius-md: 8px;    /* component: inputs, menus, popovers           */
    --fai-radius-lg: 12px;   /* cards                                        */
    --fai-radius-xl: 16px;   /* modals / sheets                              */
    --fai-radius-button: 999px; /* buttons — pill                            */
    --fai-radius-pill: 999px;

    /* -- Icon sizes: 16 / 20 / 24 / 28 / 32 --------------------------------------- */
    --fai-icon-xs: 16px;
    --fai-icon-sm: 20px;
    --fai-icon-md: 24px;
    --fai-icon-lg: 28px;
    --fai-icon-xl: 32px;

    /* -- Typography — Arabic-first single family (ADR 0002 §4, unchanged). ------- */
    --fai-font-display: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
    --fai-font-body: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
    --fai-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

    /* Type scale (1.25 ratio): 12 / 13 / 15 / 18 / 22 / 28 / 36 on a 4px grid */
    --fai-text-xs: 0.75rem;    /* 12px — captions, meta          */
    --fai-text-sm: 0.8125rem;  /* 13px — admin compact, dense UI */
    --fai-text-body: 0.9375rem;/* 15px — body                    */
    --fai-text-lg: 1.125rem;   /* 18px — card titles             */
    --fai-text-xl: 1.375rem;   /* 22px — section titles          */
    --fai-text-2xl: 1.75rem;   /* 28px — page titles             */
    --fai-text-3xl: 2.25rem;   /* 36px — display                 */

    /* Leading per script (W3C alreq via ADR 0002 §4): Arabic runs need ≥1.65
       body leading and taller headings; [dir="rtl"] remaps these below. */
    --fai-leading-tight: 1.2;
    --fai-leading-normal: 1.5;

    /* -- Motion (ADR-0008 §1: spring + ambient join the classic trio) ------------- */
    --fai-motion-fast: 120ms;
    --fai-motion-base: 200ms;
    --fai-motion-slow: 280ms;
    --fai-motion-entrance: 320ms;   /* page/section entrance transitions     */
    --fai-motion-ambient: 6s;       /* one ambient loop duration (drift,     */
                                    /* shimmer, pulse) — killed by battery   */
                                    /* saver + prefers-reduced-motion        */
    --fai-ease: cubic-bezier(.2, 0, 0, 1);
    --fai-ease-out: cubic-bezier(.16, 1, .3, 1);
    --fai-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* playful overshoot  */

    /* -- FAI-P13-15 — extended motion. The hard spring reads as jank on large
       surfaces (full-height panels, the dock), which get the soft one; the slow
       loop drives background drift; the stagger cascades card entrances. ------ */
    --fai-ease-spring-soft: cubic-bezier(.22, 1.2, .36, 1); /* big surfaces  */
    --fai-motion-ambient-slow: 12s;  /* slow backdrop drift — killed with ambient */
    --fai-motion-stagger: 60ms;      /* entrance cascade step (list→card→chrome)  */

    /* -- Z-index scale (10–90) ----------------------------------------------------- */
    --fai-z-sticky: 20;
    --fai-z-dock: 40;
    --fai-z-modal: 60;
    --fai-z-toast: 80;
    --fai-z-palette: 90;

    /* -- Sizing -------------------------------------------------------------------------- */
    --fai-target-min: 44px; /* minimum hit target, one-handed mobile (a11y) */
    --fai-sidebar-w: 264px;
    --fai-sidebar-w-collapsed: 72px;
    --fai-topbar-h: 56px;

    /* -- Density (comfortable default; compact = admin tables via .fai-compact) ---------- */
    --fai-density-row: 44px;
    --fai-density-text: var(--fai-text-body);

    /* -- Direction factor (ADR 0002 §6): +1 LTR / −1 RTL ---------------------------- */
    --fai-dir-factor: 1;
}

/* ============================================================================
   Layer 1 — Semantic tokens · LIGHT (default) — "the signature look"
   ----------------------------------------------------------------------------
   Bright canvas, white surfaces, violet primary with white text (6.55:1),
   magenta + cyan as the gradient partners. Tier A pairs below are AA;
   spectacle lives in the grad/glow/glass families, not in reading ink.
   ========================================================================== */
:root {
    color-scheme: light;

    /* Surfaces */
    --fai-color-canvas: var(--fai-canvas-warm);
    --fai-color-surface: var(--fai-brand-0);
    --fai-color-surface-2: #f4f2fd; /* whisper-violet fill (table stripes)   */
    --fai-color-surface-3: #ebe7fa;
    --fai-color-overcanvas: var(--fai-neutral-100);

    /* Content — Tier A, AA on canvas and surfaces (unchanged anchors) */
    --fai-color-content-1: var(--fai-neutral-800);
    --fai-color-content-2: var(--fai-neutral-600);
    --fai-color-content-muted: #6b6b74;
    --fai-color-content-disabled: #7a7a83;

    /* Borders */
    --fai-color-border: #ded9f0;
    --fai-color-border-strong: #8d8d95;
    --fai-border-width: 1px;

    /* Brand / interactive — Tier A via brand-700 */
    --fai-color-primary: var(--fai-brand-700);
    --fai-color-primary-strong: var(--fai-brand-800);
    --fai-color-primary-soft: var(--fai-brand-200);
    --fai-color-on-primary: var(--fai-brand-0);
    --fai-color-link: var(--fai-brand-700);
    --fai-color-accent: var(--fai-fuchsia-700); /* AA-anchored accent          */
    --fai-color-accent-2: var(--fai-cyan-700);  /* second partner, AA as text  */

    /* Focus (Tier N — never relaxed) */
    --fai-color-focus: var(--fai-focus);
    --fai-focus-ring: 0 0 0 6px rgb(151 71 255 / .28);

    /* Status (Tier A, retained GUP anchors) */
    --fai-color-success: var(--fai-positive-700);
    --fai-color-success-soft: var(--fai-positive-100);
    --fai-color-warning: var(--fai-warning-800);
    --fai-color-warning-strong: var(--fai-warning-700);
    --fai-color-warning-soft: var(--fai-warning-100);
    --fai-color-danger: var(--fai-negative-700);
    --fai-color-danger-strong: #9a1c13; /* hover fill for danger controls */
    --fai-color-danger-soft: var(--fai-negative-100);
    --fai-color-info: var(--fai-cyan-700);
    --fai-color-info-soft: #cffafe;

    /* Soft tint of the decorative accent (selection hovers, tool buttons) */
    --fai-color-accent-soft: var(--fai-brand-200);

    /* AI accent (marks AI-generated content — never color alone) */
    --fai-color-ai: var(--fai-ai-700);
    --fai-color-ai-soft: var(--fai-ai-100);

    /* Score scale — Tier A text anchors on softs (proven pairs; score-5 joins
       the brand as violet) + Tier N vivid ring strokes for the rings/gauges. */
    --fai-score-1: #ba1c1c;
    --fai-score-1-soft: #fdecec;
    --fai-score-2: #a04a0f;
    --fai-score-2-soft: #fdefe3;
    --fai-score-3: #8a5a0b;
    --fai-score-3-soft: #fdf3e2;
    --fai-score-4: #0f6b47;
    --fai-score-4-soft: #e6f4ec;
    --fai-score-5: #6d28d9;
    --fai-score-5-soft: #ede9fe;
    --fai-score-1-ring: #ef4444;
    --fai-score-2-ring: #f97316;
    --fai-score-3-ring: #facc15;
    --fai-score-4-ring: #14b8a6;
    --fai-score-5-ring: #8b5cf6;

    /* Elevation — soft shadows retained */
    --fai-shadow-xs: 0 1px 2px rgb(28 33 51 / .04);
    --fai-shadow-sm: 0 2px 8px rgb(28 33 51 / .06);
    --fai-shadow-md: 0 8px 24px rgb(28 33 51 / .08);

    /* ---- Gradients (ADR-0008 §1). Tier B display text rides these; every stop of the
       hero/button gradients is asserted ≥3:1 against its display ink in TokensContrastTests
       (hero = white; button = --fai-color-on-primary). The stops below are the AA-anchored
       600/700 shades — vivid at sweep, honest at contrast. ---------------------- */
    --fai-grad-hero: linear-gradient(135deg, var(--fai-brand-600) 0%, var(--fai-fuchsia-600) 48%, var(--fai-cyan-600) 100%);
    --fai-grad-button: linear-gradient(135deg, var(--fai-brand-700) 0%, var(--fai-fuchsia-700) 100%);
    --fai-grad-ring: conic-gradient(from 220deg, var(--fai-brand-600), var(--fai-fuchsia-600), var(--fai-cyan-500), var(--fai-brand-600));
    --fai-grad-wash: linear-gradient(160deg, #f5f3ff 0%, #fdf4ff 50%, #ecfeff 100%);
    --fai-grad-shine: linear-gradient(120deg, transparent 20%, rgb(255 255 255 / .28) 50%, transparent 80%);

    /* ---- Glow elevation — colored halos join shadows (Tier C). ------------------ */
    --fai-glow-primary: 0 0 24px rgb(124 58 237 / .32);
    --fai-glow-accent: 0 0 20px rgb(6 182 212 / .26);
    --fai-glow-ai: 0 0 18px rgb(251 191 36 / .34);

    /* ---- Glass surfaces (Tier B/C) — blur + light edge, legible on the canvas. - */
    --fai-glass-bg: rgb(255 255 255 / .58);
    --fai-glass-border: rgb(255 255 255 / .70);
    --fai-glass-blur: 14px;
    --fai-glass-saturate: 1.4;

    /* ---- FAI-P13-15 — extended spectacle. Mesh = the shell's ambient backdrop (three
       low-alpha brand radials over the canvas); border = the brand hairline for card top
       edges; celebrate = win moments (stops hold ≥3:1 with white ink as hygiene, though
       only decorative ink rides it); strong glass = dock/palette surfaces where legibility
       outranks show-through. All Tier C; all stripped by battery saver. ---------------- */
    --fai-grad-mesh:
        radial-gradient(52rem 36rem at 8% -10%, rgb(124 58 237 / .16), transparent 60%),
        radial-gradient(44rem 32rem at 96% 12%, rgb(217 70 239 / .13), transparent 60%),
        radial-gradient(48rem 34rem at 50% 118%, rgb(6 182 212 / .12), transparent 62%);
    --fai-grad-border: linear-gradient(90deg, rgb(124 58 237 / .55), rgb(217 70 239 / .45), rgb(6 182 212 / .40));
    --fai-grad-celebrate: linear-gradient(135deg, #15803d 0%, #0e7490 100%);
    --fai-glow-soft: 0 0 14px rgb(124 58 237 / .18);
    --fai-glow-success: 0 0 18px rgb(21 128 61 / .30);
    --fai-glow-danger: 0 0 18px rgb(185 28 28 / .30);
    --fai-glass-strong-bg: rgb(255 255 255 / .82);
    --fai-glass-strong-border: rgb(255 255 255 / .85);

    /* ---- v0.1 semantic-name aliases (consumed across all Fai* components) ------ */
    --fai-canvas: var(--fai-color-canvas);
    --fai-surface: var(--fai-color-surface);
    --fai-surface-2: var(--fai-color-surface-2);
    --fai-surface-3: var(--fai-color-surface-3);
    --fai-border: var(--fai-color-border);
    --fai-border-strong: var(--fai-color-border-strong);
    --fai-ink: var(--fai-color-content-1);
    --fai-ink-2: var(--fai-color-content-2);
    --fai-ink-3: var(--fai-color-content-muted);
    --fai-primary: var(--fai-color-primary);
    --fai-primary-strong: var(--fai-color-primary-strong);
    --fai-primary-soft: var(--fai-color-primary-soft);
    --fai-on-primary: var(--fai-color-on-primary);
    /* Role split (ADR-0002 lineage): each falls back to the classic token so a
       theme that doesn't split the roles is unchanged. */
    --fai-primary-ink: var(--fai-color-primary-ink, var(--fai-color-primary));
    --fai-primary-line: var(--fai-color-primary-line, var(--fai-color-primary));
    --fai-primary-fill-strong: var(--fai-color-primary-fill-strong, var(--fai-color-primary-strong));
    --fai-link: var(--fai-color-link);
    --fai-accent: var(--fai-color-accent);
    --fai-success: var(--fai-color-success);
    --fai-success-soft: var(--fai-color-success-soft);
    --fai-warning: var(--fai-color-warning);
    --fai-warning-soft: var(--fai-color-warning-soft);
    --fai-danger: var(--fai-color-danger);
    --fai-danger-strong: var(--fai-color-danger-strong);
    --fai-danger-soft: var(--fai-color-danger-soft);
    /* White-text danger FILL role (emergency button): fixed dark red so white
       copy keeps AA in every theme. */
    --fai-danger-fill: var(--fai-color-danger-fill, var(--fai-color-danger));
    --fai-danger-fill-strong: var(--fai-color-danger-fill-strong, var(--fai-color-danger-strong));
    --fai-info: var(--fai-color-info);
    --fai-info-soft: var(--fai-color-info-soft);
    --fai-accent-soft: var(--fai-color-accent-soft);
    --fai-ai: var(--fai-color-ai);
    --fai-ai-soft: var(--fai-color-ai-soft);
}

/* ============================================================================
   Layer 1 — Semantic tokens · DARK — "the neon treatment"
   ----------------------------------------------------------------------------
   Deep #1c2133 surfaces retained; accents go luminous (violet-400 primary,
   neon cyan, hot magenta). Tier A pairs remain AA on the deep surfaces.
   ========================================================================== */
[data-fai-theme="dark"] {
    color-scheme: dark;

    --fai-color-canvas: var(--fai-deep-800);
    --fai-color-surface: var(--fai-deep-700);
    --fai-color-surface-2: var(--fai-deep-600);
    --fai-color-surface-3: var(--fai-deep-500);
    --fai-color-overcanvas: var(--fai-deep-800);

    --fai-color-content-1: var(--fai-neutral-0);
    --fai-color-content-2: var(--fai-neutral-300);
    --fai-color-content-muted: #a3a3ae; /* 6.4:1 on surface */
    --fai-color-content-disabled: #6b6f85;

    --fai-color-border: var(--fai-deep-400);
    --fai-color-border-strong: var(--fai-deep-300);
    --fai-border-width: 1px;

    --fai-color-primary: var(--fai-brand-300);
    --fai-color-primary-strong: var(--fai-brand-200);
    --fai-color-primary-soft: #2e2450;
    --fai-color-on-primary: var(--fai-brand-900);
    --fai-color-link: var(--fai-brand-300);
    --fai-color-accent: var(--fai-fuchsia-400);
    --fai-color-accent-2: var(--fai-cyan-300);

    --fai-color-focus: var(--fai-focus);
    --fai-focus-ring: 0 0 0 6px rgb(151 71 255 / .38);

    --fai-color-success: var(--fai-positive-300);
    --fai-color-success-soft: #173427;
    --fai-color-warning: var(--fai-warning-300);
    --fai-color-warning-strong: var(--fai-warning-700);
    --fai-color-warning-soft: #3a2c14;
    --fai-color-danger: var(--fai-negative-300);
    --fai-color-danger-strong: #ffd9d9; /* hover fill for danger controls */
    --fai-color-danger-soft: #3d1d1d;
    /* White-text danger FILL: theme-invariant dark red (white on it is AA). */
    --fai-color-danger-fill: var(--fai-negative-700);
    --fai-color-danger-fill-strong: #9a1c13;
    --fai-color-info: var(--fai-cyan-300);
    --fai-color-info-soft: #12333d;

    --fai-color-accent-soft: #2e2450;

    --fai-color-ai: var(--fai-ai-300);
    --fai-color-ai-soft: #33270d;

    --fai-score-1: #f2b8b8;
    --fai-score-1-soft: #3d1d1d;
    --fai-score-2: #f0bd8c;
    --fai-score-2-soft: #3b2c17;
    --fai-score-3: #f3d9a8;
    --fai-score-3-soft: #3a2c14;
    --fai-score-4: #a5dcb8;
    --fai-score-4-soft: #173427;
    --fai-score-5: #c4b5fd;
    --fai-score-5-soft: #2e2450;
    --fai-score-1-ring: #f87171;
    --fai-score-2-ring: #fb923c;
    --fai-score-3-ring: #facc15;
    --fai-score-4-ring: #2dd4bf;
    --fai-score-5-ring: #a78bfa;

    --fai-shadow-xs: 0 1px 2px rgb(0 0 0 / .40);
    --fai-shadow-sm: 0 2px 8px rgb(0 0 0 / .50);
    --fai-shadow-md: 0 8px 24px rgb(0 0 0 / .60);

    /* Neon gradients + stronger glows (Tier B/C). Dark inverts the button like ADR-0002 §5:
       light 300-shade stops + the dark on-primary ink, so the gradient never fights its label. */
    --fai-grad-hero: linear-gradient(135deg, var(--fai-brand-600) 0%, var(--fai-fuchsia-500) 48%, var(--fai-cyan-600) 100%);
    --fai-grad-button: linear-gradient(135deg, var(--fai-brand-300) 0%, var(--fai-fuchsia-300) 100%);
    --fai-grad-ring: conic-gradient(from 220deg, var(--fai-brand-300), var(--fai-fuchsia-400), var(--fai-cyan-300), var(--fai-brand-300));
    --fai-grad-wash: linear-gradient(160deg, #2b3252 0%, #33203f 50%, #10333d 100%);
    --fai-grad-shine: linear-gradient(120deg, transparent 20%, rgb(255 255 255 / .10) 50%, transparent 80%);

    --fai-glow-primary: 0 0 28px rgb(167 139 250 / .42);
    --fai-glow-accent: 0 0 24px rgb(34 211 238 / .36);
    --fai-glow-ai: 0 0 20px rgb(251 191 36 / .40);

    --fai-glass-bg: rgb(23 27 43 / .62);
    --fai-glass-border: rgb(255 255 255 / .14);
    --fai-glass-blur: 16px;
    --fai-glass-saturate: 1.5;

    /* ---- FAI-P13-15 — extended spectacle (dark: neon mesh over deep navy; the dock and
       palette sit on strong glass so their content stays legible over the glow). -------- */
    --fai-grad-mesh:
        radial-gradient(52rem 36rem at 8% -10%, rgb(167 139 250 / .17), transparent 60%),
        radial-gradient(44rem 32rem at 96% 12%, rgb(232 121 249 / .13), transparent 60%),
        radial-gradient(48rem 34rem at 50% 118%, rgb(34 211 238 / .12), transparent 62%);
    --fai-grad-border: linear-gradient(90deg, rgb(196 181 253 / .60), rgb(240 171 252 / .50), rgb(103 232 249 / .45));
    --fai-grad-celebrate: linear-gradient(135deg, #16a34a 0%, #0891b2 100%);
    --fai-glow-soft: 0 0 14px rgb(167 139 250 / .22);
    --fai-glow-success: 0 0 18px rgb(74 222 128 / .32);
    --fai-glow-danger: 0 0 18px rgb(248 113 113 / .32);
    --fai-glass-strong-bg: rgb(15 18 32 / .88);
    --fai-glass-strong-border: rgb(255 255 255 / .18);
}

/* ============================================================================
   Layer 1 — Semantic tokens · HIGH CONTRAST — exempt from relaxation
   ----------------------------------------------------------------------------
   AAA-pair content on near-black, white 2px borders, flat elevation, gold
   links (ADR 0002 §5) — UNCHANGED constraints; the only spectacle concession
   is hue: links/accents may carry the light-violet brand tint (10.4:1 on
   black). Gradients flatten to solid fills; glow is disabled.
   ========================================================================== */
[data-fai-theme="high-contrast"] {
    color-scheme: dark;

    --fai-color-canvas: #000000;
    --fai-color-surface: #0a0a0a;
    --fai-color-surface-2: #141414;
    --fai-color-surface-3: #1f1f1f;
    --fai-color-overcanvas: #000000;

    --fai-color-content-1: #ffffff;
    --fai-color-content-2: #ffffff;
    --fai-color-content-muted: #e6e6e6;
    --fai-color-content-disabled: #9e9e9e;

    --fai-color-border: #ffffff;
    --fai-color-border-strong: #ffffff;
    --fai-border-width: 2px;

    --fai-color-primary: #ffffff;
    --fai-color-primary-strong: #e6e6e6;
    --fai-color-primary-soft: #262626;
    --fai-color-on-primary: #000000;
    --fai-color-link: #c4b5fd; /* light brand violet — 10.4:1 on black */
    --fai-color-accent: #c4b5fd;
    --fai-color-accent-2: #67e8f9;

    --fai-color-focus: var(--fai-focus);
    --fai-focus-ring: 0 0 0 6px rgb(151 71 255 / .55);

    --fai-color-success: #7fd88f;
    --fai-color-success-soft: #10241a;
    --fai-color-warning: #ffd166;
    --fai-color-warning-strong: #ffd166;
    --fai-color-warning-soft: #2b2110;
    --fai-color-danger: #ff8a8a;
    --fai-color-danger-strong: #ffc2c2; /* hover fill for danger controls */
    --fai-color-danger-soft: #2b1010;
    /* White-text danger FILL (same rationale as the dark theme). */
    --fai-color-danger-fill: var(--fai-negative-700);
    --fai-color-danger-fill-strong: #9a1c13;
    --fai-color-info: #9ec5ff;
    --fai-color-info-soft: #102040;

    --fai-color-accent-soft: #262626;

    --fai-color-ai: #ffd166;
    --fai-color-ai-soft: #2b2110;

    --fai-score-1: #ff8a8a;
    --fai-score-1-soft: #2b1010;
    --fai-score-2: #ffb066;
    --fai-score-2-soft: #2b1a0e;
    --fai-score-3: #ffd166;
    --fai-score-3-soft: #2b2110;
    --fai-score-4: #7fd88f;
    --fai-score-4-soft: #10241a;
    --fai-score-5: #c4b5fd;
    --fai-score-5-soft: #191233;
    --fai-score-1-ring: #ff8a8a;
    --fai-score-2-ring: #ffb066;
    --fai-score-3-ring: #ffd166;
    --fai-score-4-ring: #7fd88f;
    --fai-score-5-ring: #c4b5fd;

    --fai-shadow-xs: none;
    --fai-shadow-sm: none;
    --fai-shadow-md: none;

    /* Spectacle flattens: solid fills, no glow, no blur. */
    --fai-grad-hero: none;
    --fai-grad-button: var(--fai-color-primary);
    --fai-grad-ring: none;
    --fai-grad-wash: var(--fai-color-surface-2);
    --fai-grad-shine: none;
    --fai-glow-primary: none;
    --fai-glow-accent: none;
    --fai-glow-ai: none;
    --fai-glass-bg: var(--fai-color-surface);
    --fai-glass-border: var(--fai-color-border);
    --fai-glass-blur: 0px;
    --fai-glass-saturate: 1;

    /* FAI-P13-15 — the extension flattens with everything else: no mesh, no halo, no
       celebrate sweep; the brand edge stays a real border and strong glass stays an
       opaque surface, because flat-but-distinct is this theme's whole contract. */
    --fai-grad-mesh: none;
    --fai-grad-border: var(--fai-color-border-strong);
    --fai-grad-celebrate: var(--fai-color-success);
    --fai-glow-soft: none;
    --fai-glow-success: none;
    --fai-glow-danger: none;
    --fai-glass-strong-bg: var(--fai-color-surface);
    --fai-glass-strong-border: var(--fai-color-border-strong);
}

/* ============================================================================
   Layer 1 — Semantic tokens · OASIS — "saturated orange & olive"
   ----------------------------------------------------------------------------
   ADR-0008: the muted beige era ends. Same one-rule split as before (orange
   is content, olive/green is positive, amber is AI) but the hues are now
   SATURATED: burnt-orange fills (AA with white), vivid olive-green positive,
   bright-yellow washes, sunset gradients.
   ========================================================================== */
[data-fai-theme="oasis"] {
    color-scheme: light;

    --fai-color-canvas: #fffdf9;
    --fai-color-surface: #ffffff;
    --fai-color-surface-2: #fff4ec;
    --fai-color-surface-3: #ffe9db;
    --fai-color-overcanvas: #ffffff;

    /* Tier A — plain near-black reading text (unchanged decision) */
    --fai-color-content-1: #1a1a1a;   /* 17.4:1 on canvas — headings */
    --fai-color-content-2: #333333;   /* 12.6:1 on canvas — body text */
    --fai-color-content-muted: #6b6b6b; /* 5.7:1 on canvas — hints/meta */
    --fai-color-content-disabled: #b3b3b3;

    --fai-color-border: #f0e0d3;
    --fai-color-border-strong: #a9a08f;
    --fai-border-width: 1px;

    /* Saturated burnt orange carries every actionable role (buttons, icons,
       links, borders). 800 fill = 7.3:1 with white; 700 ink = 5.3:1 on white. */
    --fai-color-primary: #9a3412;       /* button fill — white label 7.3:1 */
    --fai-color-on-primary: #ffffff;
    --fai-color-primary-fill-strong: #7c2d12; /* button hover — deeper orange */
    --fai-color-primary-ink: #c2410c;   /* saturated orange — text/icon on white 5.3:1 */
    --fai-color-primary-line: #ea580c;  /* vivid orange as border (Tier N) */
    --fai-color-primary-strong: #7c2d12;
    --fai-color-primary-soft: #ffedd5;  /* light orange — selected/hover washes */
    --fai-color-link: #9a3412;
    --fai-color-accent: #4d7c0f;        /* vivid olive — text-safe 5.2:1      */
    --fai-color-accent-2: #b45309;

    /* Oasis's own highlight (Tier N), matching its amber identity */
    --fai-color-focus: #a67c00;
    --fai-focus-ring: 0 0 0 6px rgb(255 224 102 / .5);

    /* Vivid olive-green — success/positive states (readiness, checkmarks) */
    --fai-color-success: #3f6212;
    --fai-color-success-soft: #ecfccb;
    --fai-color-warning: #8a5a0b;
    --fai-color-warning-strong: #ca8511;
    --fai-color-warning-soft: #fef3c2;
    --fai-color-danger: #ba1c1c;
    --fai-color-danger-strong: #9a1c13;
    --fai-color-danger-soft: #fbecec;
    --fai-color-info: #0e7490;
    --fai-color-info-soft: #cffafe;

    --fai-color-accent-soft: #fef9c3;   /* bright yellow — hero wash */

    /* AI-marker badges: bright amber fill with deep-amber text (8.6:1) */
    --fai-color-ai: #92400e;
    --fai-color-ai-soft: #fef3c7;

    --fai-score-1: #ba1c1c;
    --fai-score-1-soft: #fbecec;
    --fai-score-2: #ba4a12;   /* red-orange — 4.59:1 on its soft */
    --fai-score-2-soft: #fcf0e4;
    --fai-score-3: #b4560f;   /* orange — 4.6:1 on its soft */
    --fai-score-3-soft: #fffbf2;
    --fai-score-4: #3f6212;   /* vivid olive */
    --fai-score-4-soft: #ecfccb;
    --fai-score-5: #9a3412;   /* burnt orange — the oasis "brand" score */
    --fai-score-5-soft: #ffedd5;
    /* Ring strokes (Tier N): true saturated hues */
    --fai-score-2-ring: #f97316;
    --fai-score-3-ring: #facc15;
    --fai-score-4-ring: #84cc16;
    --fai-score-5-ring: #ea580c;

    --fai-shadow-xs: 0 1px 2px rgb(74 42 20 / .05);
    --fai-shadow-sm: 0 2px 8px rgb(74 42 20 / .07);
    --fai-shadow-md: 0 8px 24px rgb(74 42 20 / .09);

    /* Sunset gradients — orange → gold → olive (Tier B/C); 700-shade stops keep white
       display copy ≥3:1 on every stop (ADR-0008), verified in TokensContrastTests. */
    --fai-grad-hero: linear-gradient(135deg, #c2410c 0%, #a16207 50%, #4d7c0f 100%);
    --fai-grad-button: linear-gradient(135deg, #9a3412 0%, #a16207 100%);
    --fai-grad-ring: conic-gradient(from 220deg, #ea580c, #eab308, #84cc16, #ea580c);
    --fai-grad-wash: linear-gradient(160deg, #fff7ed 0%, #fefce8 50%, #f7fee7 100%);
    --fai-grad-shine: linear-gradient(120deg, transparent 20%, rgb(255 255 255 / .32) 50%, transparent 80%);

    --fai-glow-primary: 0 0 24px rgb(234 88 12 / .30);
    --fai-glow-accent: 0 0 20px rgb(132 204 22 / .26);
    --fai-glow-ai: 0 0 18px rgb(250 204 21 / .34);

    --fai-glass-bg: rgb(255 255 255 / .60);
    --fai-glass-border: rgb(255 255 255 / .72);
    --fai-glass-blur: 14px;
    --fai-glass-saturate: 1.4;

    /* ---- FAI-P13-15 — extended spectacle (oasis: sunset mesh — orange, gold, olive over
       warm paper; the same brand-hairline and win-gradient vocabulary as the rest). -------- */
    --fai-grad-mesh:
        radial-gradient(52rem 36rem at 8% -10%, rgb(234 88 12 / .13), transparent 60%),
        radial-gradient(44rem 32rem at 96% 12%, rgb(202 138 4 / .12), transparent 60%),
        radial-gradient(48rem 34rem at 50% 118%, rgb(101 163 13 / .11), transparent 62%);
    --fai-grad-border: linear-gradient(90deg, rgb(234 88 12 / .55), rgb(202 138 4 / .45), rgb(101 163 13 / .40));
    --fai-grad-celebrate: linear-gradient(135deg, #3f6212 0%, #9a3412 100%);
    --fai-glow-soft: 0 0 14px rgb(234 88 12 / .18);
    --fai-glow-success: 0 0 18px rgb(101 163 13 / .30);
    --fai-glow-danger: 0 0 18px rgb(185 28 28 / .30);
    --fai-glass-strong-bg: rgb(255 251 240 / .85);
    --fai-glass-strong-border: rgb(255 255 255 / .88);
}

/* ============================================================================
   Layer 2 — Component tokens (derived values a single component needs)
   ========================================================================== */
:root {
    /* Translucent top navigation (now glass-fed) */
    --fai-nav-scrim: rgb(255 255 255 / 48%);

    /* Neutral hover wash for icon-sized controls (chip remove ×, ghost icon buttons) */
    --fai-color-hover-scrim: rgb(39 42 58 / .08);

    /* Modal/dialog backdrop — deliberately theme-invariant (a scrim reads dark in
       every theme; HC keeps it so surfaces stay distinct from the void behind). */
    --fai-scrim-backdrop: rgb(9 12 20 / .70);

    /* Card Majlis panel (FAI-P05-12, legacy page): warm UAE-theme paper. */
    --fai-majlis-gradient: linear-gradient(180deg, #fdf8ef 0%, #f6ecd9 100%);
}

[data-fai-theme="dark"] {
    --fai-nav-scrim: rgb(23 27 43 / 72%);
    --fai-color-hover-scrim: rgb(255 255 255 / .10);
    --fai-majlis-gradient: linear-gradient(180deg, #241f14 0%, #2b2415 100%);
}

[data-fai-theme="high-contrast"] {
    --fai-nav-scrim: rgb(0 0 0 / 88%);
    --fai-color-hover-scrim: rgb(255 255 255 / .20);
    --fai-majlis-gradient: none;
}

[data-fai-theme="oasis"] {
    --fai-nav-scrim: rgb(255 253 249 / 62%);
    --fai-color-hover-scrim: rgb(234 88 12 / .08);
    --fai-majlis-gradient: linear-gradient(180deg, #fffdf8 0%, #fef7e8 100%);
}

/* ============================================================================
   Density — compact flavor for admin tables (32px rows, 13px text)
   ========================================================================== */
.fai-compact {
    --fai-density-row: 32px;
    --fai-density-text: var(--fai-text-sm);
}

/* ============================================================================
   Accessibility modes (FAI-P05-14 continuity) — semantic-token overrides, not
   new CSS. Numeric labels stay mandatory, so no information is color-only.
   ========================================================================== */

/* Large text: scale the type ramp without touching layout metrics. */
.prefs-large-text {
    --fai-text-xs: 0.875rem;
    --fai-text-sm: 0.9375rem;
    --fai-text-body: 1.075rem;
    --fai-text-lg: 1.25rem;
    --fai-text-xl: 1.5rem;
    --fai-text-2xl: 1.9rem;
    --fai-text-3xl: 2.4rem;
}

/* Colorblind-safe (Okabe-Ito leaning): remap the semantic hues per theme.
   Light-tuned values on light themes, dark-tuned on dark. */
.prefs-colorblind {
    --fai-color-primary: #0072B2;
    --fai-color-primary-strong: #005a8e;
    --fai-color-primary-soft: #e1f0f9;
    --fai-color-link: #0072B2;
    --fai-color-accent: #56B4E9;
    --fai-color-accent-2: #005a8e;
    --fai-color-success: #0072B2;
    --fai-color-success-soft: #e1f0f9;
    --fai-color-danger: #882255;
    --fai-color-danger-soft: #f7e6f0;
    --fai-color-warning: #92610c;
    --fai-color-warning-strong: #E69F00;
    --fai-color-warning-soft: #fdf3dd;
    --fai-color-info: #0072B2;
    --fai-color-info-soft: #e1f0f9;
    --fai-score-1: #882255;
    --fai-score-1-soft: #f7e6f0;
    --fai-score-2: #E69F00;
    --fai-score-2-soft: #fdf3dd;
    --fai-score-3: #C9A227;
    --fai-score-3-soft: #faf2d8;
    --fai-score-4: #56B4E9;
    --fai-score-4-soft: #eaf6fc;
    --fai-score-5: #0072B2;
    --fai-score-5-soft: #e1f0f9;
    --fai-score-1-ring: #882255;
    --fai-score-2-ring: #E69F00;
    --fai-score-3-ring: #C9A227;
    --fai-score-4-ring: #56B4E9;
    --fai-score-5-ring: #0072B2;
}

[data-fai-theme="dark"] .prefs-colorblind,
[data-fai-theme="high-contrast"] .prefs-colorblind {
    --fai-color-primary: #56B4E9;
    --fai-color-primary-strong: #9bd4f4;
    --fai-color-primary-soft: #12324a;
    --fai-color-on-primary: #06263a;
    --fai-color-link: #56B4E9;
    --fai-color-accent: #56B4E9;
    --fai-color-accent-2: #9bd4f4;
    --fai-color-success: #56B4E9;
    --fai-color-success-soft: #12324a;
    --fai-color-danger: #d67ba8;
    --fai-color-danger-soft: #3d1a2b;
    /* White-text danger FILL: the colorblind dark danger is light pink, so the
       white-text fill uses the dark Okabe-Ito variant with a darker hover. */
    --fai-color-danger-fill: #882255;
    --fai-color-danger-fill-strong: #6d1b43;
    --fai-color-warning: #E69F00;
    --fai-color-warning-strong: #E69F00;
    --fai-color-warning-soft: #3d2c0e;
    --fai-color-info: #56B4E9;
    --fai-color-info-soft: #12324a;
    --fai-score-1: #d67ba8;
    --fai-score-1-soft: #3d1a2b;
    --fai-score-2: #E69F00;
    --fai-score-2-soft: #3d2c0e;
    --fai-score-3: #e3c95e;
    --fai-score-3-soft: #3a3012;
    --fai-score-4: #56B4E9;
    --fai-score-4-soft: #12324a;
    --fai-score-5: #9bd4f4;
    --fai-score-5-soft: #12324a;
    --fai-score-1-ring: #d67ba8;
    --fai-score-2-ring: #E69F00;
    --fai-score-3-ring: #e3c95e;
    --fai-score-4-ring: #56B4E9;
    --fai-score-5-ring: #9bd4f4;
}

/* Battery saver (FAI-P05-14 + ADR-0008): suppress elevation, transitions,
   saturated spectacle — glow, glass blur, gradient sweeps and ambient loops
   all flatten so a low battery never pays for the wow. */
.prefs-battery {
    --fai-shadow-xs: none;
    --fai-shadow-sm: none;
    --fai-shadow-md: none;
    --fai-motion-fast: 0ms;
    --fai-motion-base: 0ms;
    --fai-motion-slow: 0ms;
    --fai-motion-entrance: 0ms;
    --fai-motion-ambient: 0ms;
    --fai-motion-ambient-slow: 0ms; /* FAI-P13-15 — the slow drift loop dies with the rest */
    --fai-motion-stagger: 0ms;      /* FAI-P13-15 — no cascade lag when every ms is 0   */
    --fai-glow-primary: none;
    --fai-glow-accent: none;
    --fai-glow-ai: none;
    --fai-glow-soft: none;
    --fai-glow-success: none;
    --fai-glow-danger: none;
    --fai-glass-blur: 0px;
    --fai-glass-saturate: 1;
    --fai-grad-hero: var(--fai-color-primary);
    --fai-grad-button: var(--fai-color-primary);
    --fai-grad-ring: var(--fai-color-primary);
    --fai-grad-wash: var(--fai-color-surface-2);
    --fai-grad-shine: none;
    /* FAI-P13-15 — the extended families flatten with the same rules: backdrop becomes
       the canvas, the brand hairline becomes a border, the win sweep a solid fill. */
    --fai-grad-mesh: var(--fai-color-canvas);
    --fai-grad-border: var(--fai-color-border);
    --fai-grad-celebrate: var(--fai-color-success);
}

/* Battery saver + skeleton: keep a static surface instead of animating pulses. */
.prefs-battery .fai-skeleton {
    animation: none;
}

/* ============================================================================
   Reduced motion (ADR-0008 §1): ambient spectacle is always opt-out-able.
   Zero the motion tokens and still any surviving animation via a 0-specificity
   :where() rule (token consumers fall back to static end-states).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --fai-motion-fast: 0ms;
        --fai-motion-base: 0ms;
        --fai-motion-slow: 0ms;
        --fai-motion-entrance: 0ms;
        --fai-motion-ambient: 0ms;
        --fai-motion-ambient-slow: 0ms; /* FAI-P13-15 — slow drift is still motion */
    }
    :where(*, *::before, *::after) {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }
}

/* ============================================================================
   RTL & mixed-script rules (ADR 0002 §4/§6) — the ONLY place direction
   overrides live. Logical properties everywhere mean components never mirror;
   these hooks adjust tokens and typography behavior per script.
   ========================================================================== */

/* Arabic runs: taller leading (W3C alreq — Arabic needs ≥1.65 body leading
   and headings that clear ascenders/diacritics) and never letter-spaced. */
[dir="rtl"] {
    --fai-leading-normal: 1.66;
    --fai-leading-tight: 1.4;
    --fai-dir-factor: -1;
}

:where([dir="rtl"], [dir="rtl"] *) {
    letter-spacing: normal;
}

/* Numerals stay ASCII/Western (survey: Ooredoo/KFH/gov.om run ASCII digits;
   ADR 0002 §4) — no Arabic-Indic forcing anywhere. Tabular alignment for
   scores/tables is applied in base.css. */