/*
 * Synapsis Design Tokens
 * ──────────────────────────────────────────────────────────────────────
 * Single source of truth for all colors, typography, spacing, shadows,
 * border-radii, and transitions used across the application.
 *
 * HOW TO USE
 *   Always reference tokens via var(--token-name) — never use raw values.
 *
 * ALIAS MAP (legacy → token)
 *   --primary        → --color-primary
 *   --primary-dark   → --color-primary-hover
 *   --surface        → --color-surface
 *   --background     → --color-surface-raised
 *   --border-light   → --color-border
 */

:root {
  /* ── Brand ─────────────────────────────────────────────────────────── */
  --color-primary:          #6366f1;
  --color-primary-hover:    #4f46e5;
  --color-primary-subtle:   #eef2ff; /* Low-saturation bg for primary containers */
  --color-primary-light:    #818cf8; /* Lighter shade for icons / accents */
  --color-primary-bg:       var(--color-primary-subtle); /* alias — matches the dominant var(--color-primary-bg, #eef2ff) fallback used across ~15 templates */
  --color-primary-text:     #4f46e5; /* accessible text-on-primary-bg (e.g. .badge.primary); dark override below */
  --color-primary-200:      #c7d2fe; /* indigo-200 tint — bulk-bar border accent; dark override below */

  /* ── Semantic colors ────────────────────────────────────────────────── */
  --color-success:          #22c55e;
  --color-success-bg:       #dcfce7;
  --color-success-text:     #15803d; /* 4.6:1 on success-bg (was #16a34a, 3.0:1) */

  --color-warning:          #f59e0b;
  --color-warning-bg:       #fef3c7;
  --color-warning-text:     #92400e; /* 6.4:1 on warning-bg (was #d97706, 2.9:1) */

  --color-danger:           #ef4444;
  --color-danger-bg:        #fee2e2;
  --color-danger-text:      #b91c1c; /* 5.3:1 on danger-bg (was #dc2626, 4.0:1) */

  --color-info:             #3b82f6;
  --color-info-bg:          #dbeafe;
  --color-info-text:        #1d4ed8; /* 5.5:1 on info-bg (was #2563eb, 4.2:1) */

  --color-violet:           #8b5cf6;
  --color-violet-bg:        #ede9fe;
  --color-violet-text:      #7c3aed;

  --color-teal:             #14b8a6;
  --color-teal-bg:          #ccfbf1;
  --color-teal-text:        #0f766e;

  /* ── Neutrals ────────────────────────────────────────────────────────── */
  --color-text-primary:     #111827;
  --color-text-secondary:   #374151;
  --color-text-muted:       #4b5563; /* Raised from #6b7280 → WCAG AA on white */
  --color-text-faint:       #6b7280; /* Use only for non-critical decorative text */

  --color-border:           #e5e7eb;
  --color-border-light:     #f3f4f6;
  --color-border-strong:    #d1d5db;
  /* Placement vars set inline per element by placeNavFlyout() (common.js); declared so var() resolves. */
  --flyout-top:             0px;
  --flyout-left:            64px;

  --color-surface:          #ffffff;
  --color-surface-raised:   #f9fafb;
  --color-surface-alt:      var(--surface-2); /* alias — matches the dominant var(--color-surface-alt, #f3f4f6) fallback */
  --color-hover:            var(--surface-2); /* alias — sidebar/row hover background */

  /* ── AI / ML accent — differentiates AI-specific UI elements ───────── */
  --color-accent-ai:        #8b5cf6; /* violet-500 — distinct from primary indigo */

  /* ── On-accent — white text for colored (primary/success/danger) bgs ── */
  --color-on-accent:        #ffffff;
  /* Solid fills that carry white (--color-on-accent) text. The base colour
     tokens double as TEXT colours and go light in dark mode (#818cf8, #f87171),
     so a button/badge filled with them failed contrast (2.5-2.9:1). These stay
     >= 4.5:1 against white in both themes. */
  --color-primary-solid:    #4f46e5;
  --color-danger-solid:     #dc2626;
  --color-info-solid:       #2563eb;
  --color-success-solid:    #15803d;
  --color-warning-solid:    #b45309;

  /* ── Surface elevation — layering depth (0 = base, 4 = highest) ──────── */
  --surface-0:              #ffffff;   /* base canvas */
  --surface-1:              #f9fafb;   /* cards, list items */
  --surface-2:              #f3f4f6;   /* hover states, inputs */
  --surface-3:              #e5e7eb;   /* borders, dividers */
  --surface-4:              #d1d5db;   /* heavy overlays */

  /* ── Sidebar layout ────────────────────────────────────────────────── */
  --sidebar-width:          256px;
  --sidebar-rail-width:     64px;

  /* ── Legacy aliases (bridge for material.css / style.css references) ── */
  --primary:                var(--color-primary);
  --primary-dark:           var(--color-primary-hover);
  --primary-light:          var(--color-primary-light);
  --surface:                var(--color-surface);
  --background:             var(--color-surface-raised);
  --border-light:           var(--color-border);
  --on-surface:             var(--color-text-primary);
  --on-surface-variant:     var(--color-text-muted);
  --error:                  var(--color-danger);

  /* ── Typography scale (8-pt base) ───────────────────────────────────── */
  /* Body/UI text — minimum 12px, comfortable reading from 14px up */
  --text-2xs:   0.6875rem; /* 11px — tiny badges, rack/ledger sub-labels */
  --text-xs:    0.75rem;   /* 12px — captions, legal, metadata */
  --text-sm:    0.8125rem; /* 13px — secondary labels, helper text */
  --text-base:  0.8125rem; /* 13px — primary body/UI copy */
  --text-md:    1rem;      /* 16px — prominent body, card text */
  --text-lg:    1.125rem;  /* 18px — section headers */
  --text-xl:    1.375rem;  /* 22px — page sub-titles */
  --text-2xl:   1.75rem;   /* 28px — page titles */
  --text-3xl:   2.25rem;   /* 36px — display headings */

  /* ── Font family ─────────────────────────────────────────────────────── */
  --font-sans: 'Inter', 'Google Sans', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Monaco', 'Menlo',
               'Consolas', monospace;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.07);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.15);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.20);
  /* Colored interactive shadow for primary buttons on hover */
  --shadow-primary: 0 4px 14px rgba(99,102,241,0.30);

  /* ── Border radius ───────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;   /* badges, chips */
  --radius-md:   8px;   /* inputs, buttons */
  --radius-lg:   10px;  /* cards */
  --radius-xl:   12px;  /* modals, panels */
  --radius-2xl:  16px;  /* hero cards */
  --radius-full: 9999px; /* pills, avatars */

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.20s ease;
  --transition-slow: 0.30s ease;

  /* ── Spacing (4px base unit) ─────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Named spacing aliases (used by material.css and component classes) */
  --space-xs:  var(--space-1);   /* 4px  */
  --space-sm:  var(--space-2);   /* 8px  */
  --space-md:  var(--space-3);   /* 12px */
  --space-lg:  var(--space-4);   /* 16px */
  --space-xl:  var(--space-6);   /* 24px */
  --space-2xl: var(--space-8);   /* 32px */
  --space-3xl: var(--space-12);  /* 48px */

  /* ── Material Design Elevation (shadow depth levels) ─────────────────── */
  --elevation-0: none;
  --elevation-1: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
  --elevation-2: 0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15);
  --elevation-3: 0 4px 8px 3px rgba(60,64,67,0.15), 0 1px 3px rgba(60,64,67,0.3);
  --elevation-4: 0 6px 10px 4px rgba(60,64,67,0.15), 0 2px 3px rgba(60,64,67,0.3);
  --elevation-5: 0 8px 12px 6px rgba(60,64,67,0.15), 0 4px 4px rgba(60,64,67,0.3);

  /* ── Layout widths ───────────────────────────────────────────────────── */
  --layout-narrow:  680px;   /* forms, settings pages */
  --layout-default: 960px;   /* detail views */
  --layout-wide:    1400px;  /* dashboards, tables */

  /* ── Breakpoints (reference values — use in @media queries) ─────────── */
  --bp-sm: 640px;
  --bp-md: 1024px;
  --bp-lg: 1280px;

  /* ── Kiosk/TV display (fixed — intentionally mode-independent) ───────
     Full-screen wall-board pages (e.g. gamification_tv.html) always render
     dark regardless of the viewer's light/dark preference, so these are
     NOT redeclared under the dark-mode media query / class below. */
  --color-kiosk-bg:          #0b0f1a;
  --color-kiosk-text:        #f3f4f6;
  --color-kiosk-text-muted:  #9ca3af;
  --color-kiosk-accent:      #fde68a;

  /* ── Extended families (2026-10-26 hex consolidation) ──────────────────
     Soft status borders, solid hovers, orange/yellow/pink/sky/slate chip
     families, tier metals, inverse chrome, code viewer and brand-fixed
     colours. Fixed (brand/inverse/code) tokens are NOT redeclared in dark. */
  --color-success-border-soft: #bbf7d0;
  --color-warning-border-soft: #fde68a;
  --color-danger-border-soft:  #fecaca;
  --color-info-border-soft:    #bfdbfe;
  --color-primary-solid-hover: #4338ca;
  --color-danger-solid-hover:  #b91c1c;
  --color-info-solid-hover:    #1d4ed8;
  --color-on-warning:          #1f2937;
  --color-text-subtle:         #9ca3af;
  --color-orange-bg:           #ffedd5;
  --color-orange-text:         #c2410c;
  --color-orange-border:       #fed7aa;
  --color-yellow-bg:           #fef9c3;
  --color-yellow-text:         #a16207;
  --color-yellow-border:       #fde047;
  --color-pink-bg:             #fce7f3;
  --color-pink-text:           #be185d;
  --color-sky-bg:              #e0f2fe;
  --color-sky-text:            #0369a1;
  --color-sky-border:          #bae6fd;
  --color-slate-bg:            #f1f5f9;
  --color-slate-text:          #475569;
  --color-tier-bronze-bg:      #f5e8da;
  --color-tier-bronze-text:    #8a5a2b;
  --color-tier-silver-bg:      #eceef1;
  --color-tier-silver-text:    #5b6573;
  --color-signature-ink:       #1e3a5f;
  --color-inverse-surface:     #111827;
  --color-inverse-text:        #e5e7eb;
  --color-inverse-text-muted:  #6b7280;
  --color-inverse-link:        #dbeafe;
  --color-code-bg:             #0f172a;
  --color-code-text:           #e2e8f0;
  --color-code-muted:          #94a3b8;
  --color-code-success:        #4ade80;
  --color-code-danger:         #f87171;
  --color-hero-navy-1:         #1a1a2e;
  --color-hero-navy-2:         #16213e;
  --color-hero-navy-3:         #0f3460;
  --color-brand-gradient-a:    #667eea;
  --color-brand-gradient-b:    #764ba2;
  --color-page-ink-bg:         #0f0f1a;
  --color-qr-canvas:           #ffffff;
  --color-sky-500:             #0ea5e9;
  --color-brand-blue:          #1a56db;
  --color-hero-slate-1:        #0f172a;
  --color-hero-slate-2:        #1e293b;
  --color-hero-slate-3:        #334155;
  --color-cta-blue-1:          #1e3a8a;
  --color-cta-blue-2:          #1e40af;
  --color-hero-indigo-1:       #1e1b4b;
  --color-hero-indigo-2:       #312e81;
  --color-inverse-border:      #374151;
  --color-tier-gold-bg:        #ffd700;
  --color-tier-gold-text:      #7a5800;
  --color-social-twitter:      #1da1f2;
  --color-social-facebook:     #1877f2;
  --color-social-linkedin:     #0a66c2;
  --color-social-youtube:      #ff0000;
  --color-social-tiktok:       #010101;
  --color-social-pinterest:    #e60023;
  --color-social-instagram-1:  #f09433;
  --color-social-instagram-2:  #e6683c;
  --color-social-instagram-3:  #dc2743;
  --color-social-instagram-4:  #cc2366;
  --color-social-instagram-5:  #bc1888;
}

/* ── Dark mode — system preference ─────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* `:not(.theme-light)` — base.html's boot script stamps `theme-light` on
     <html> whenever the RESOLVED theme is light (an explicit light choice, or
     a light server preference). Without it this block fired on OS dark no
     matter what the user picked, so "light" on a dark-OS machine got dark
     tokens while every `body.dark-mode` rule in dark-mode.css stayed inert —
     a dark page wearing light components. pages/auth.css already carried a
     hand-pinned workaround for the symptom on the login card. The marker sits
     on <html> so this stays a `:root` rule: material.css declares aliases like
     `--primary: var(--color-primary)` on `:root`, and those resolve against
     whatever <html> holds. Layouts with no boot script (layout_auth,
     layout_error, layout_public, layout_public_doc, portal_base) never get the
     class, so they keep following the OS exactly as before. 2026-08-31. */
  :root:not(.theme-light) {
    --color-primary:         #818cf8;
    --color-primary-hover:   #6366f1;
    --color-primary-subtle:  #1e1b4b;
    --color-primary-bg:      var(--color-primary-subtle);
    --color-primary-text:    var(--color-primary);
    --color-primary-200:     var(--color-primary-hover);

    --color-text-primary:    #f9fafb;
    --color-text-secondary:  #e5e7eb;
    --color-text-muted:      #aab2be;   /* 4.8:1 on surface-2 (#374151) — hover rows, chips, badges */
    /* was #6b7280 (the light value, never overridden): 2.13:1 on #374151 and
       3.04:1 on #1f2937 for scope-bar labels, pager info and stat labels. */
    --color-text-faint:      #aab2be;

    --color-border:          #374151;
    --color-border-light:    #1f2937;
    --color-border-strong:   #4b5563;

    --color-surface:         #1f2937;   /* CARD — must be LIGHTER than the ground (2026-08-31 swap) */
    --color-surface-raised:  #111827;   /* GROUND — aliased to --background (2026-08-31 swap) */
    --color-surface-alt:     var(--surface-2);
    --color-hover:           var(--surface-2);

    --color-success:         #4ade80;
    --color-success-bg:      #052e16;
    --color-success-text:    #4ade80;
    --color-warning:         #fbbf24;
    --color-warning-bg:      #422006;
    --color-warning-text:    #fbbf24;
    --color-danger:          #f87171;
    --color-danger-bg:       #450a0a;
    --color-danger-text:     #f87171;
    --color-info:            #60a5fa;
    --color-info-bg:         #172554;
    --color-info-text:       #60a5fa;
    --color-violet:          #a78bfa;
    --color-violet-bg:       #2e1065;
    --color-violet-text:     #a78bfa;
    --color-teal:            #2dd4bf;
    --color-teal-bg:         #042f2e;
    --color-teal-text:       #2dd4bf;

    --color-success-border-soft: #14532d;
    --color-warning-border-soft: #713f12;
    --color-danger-border-soft:  #7f1d1d;
    --color-info-border-soft:    #1e3a8a;
    --color-text-subtle:         #6b7280;
    --color-orange-bg:           #431407;
    --color-orange-text:         #fdba74;
    --color-orange-border:       #9a3412;
    --color-yellow-bg:           #422006;
    --color-yellow-text:         #fde047;
    --color-yellow-border:       #854d0e;
    --color-pink-bg:             #500724;
    --color-pink-text:           #f9a8d4;
    --color-sky-bg:              #082f49;
    --color-sky-text:            #7dd3fc;
    --color-sky-border:          #0c4a6e;
    --color-slate-bg:            #2b3648;
    --color-slate-text:          #cbd5e1;
    --color-tier-bronze-bg:      #3a2a18;
    --color-tier-bronze-text:    #d8a766;
    --color-tier-silver-bg:      #2a2f37;
    --color-tier-silver-text:    #c2cad6;
    --color-signature-ink:       #dbeafe;
    --color-sky-500:             #38bdf8;

    --shadow-sm:  0 1px 4px rgba(0,0,0,0.30);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.40);
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.50);
    --shadow-primary: 0 4px 14px rgba(129,140,248,0.35);

    --color-accent-ai:  #a78bfa;
    --surface-0:        #111827;
    --surface-1:        #1f2937;
    --surface-2:        #374151;
    --surface-3:        #4b5563;
    --surface-4:        #6b7280;

    /* Re-declare legacy aliases so material.css picks up dark values */
    --primary:            var(--color-primary);
    --primary-dark:       var(--color-primary-hover);
    --primary-light:      var(--color-primary-light);
    --surface:            var(--color-surface);
    --surface-variant:    var(--color-surface-raised);
    --background:         var(--color-surface-raised);
    --on-surface:         var(--color-text-primary);
    --on-surface-variant: var(--color-text-muted);
    --border-light:       var(--color-border);
    --border-medium:      var(--surface-3);
    --error:              var(--color-danger);
    --success:            var(--color-success);
    --warning:            var(--color-warning);
    --info:               var(--color-info);
  }
}

/* ── Dark mode — JS class toggle (duplicated so both paths work) ─────── */
body.dark-mode {
  --color-primary:         #818cf8;
  --color-primary-hover:   #6366f1;
  --color-primary-subtle:  #1e1b4b;
  --color-primary-bg:      var(--color-primary-subtle);
  --color-primary-text:    var(--color-primary);
  --color-primary-200:     var(--color-primary-hover);
  --color-text-primary:    #f9fafb;
  --color-text-secondary:  #e5e7eb;
  --color-text-muted:      #aab2be;   /* 4.8:1 on surface-2 (#374151) */
  /* see the @media block above -- same fix for the class-toggle path */
  --color-text-faint:      #aab2be;
  --color-border:          #374151;
  --color-border-light:    #1f2937;
  --color-border-strong:   #4b5563;
  --color-surface:         #1f2937;   /* CARD — must be LIGHTER than the ground (2026-08-31 swap) */
  --color-surface-raised:  #111827;   /* GROUND — aliased to --background (2026-08-31 swap) */
  --color-surface-alt:     var(--surface-2);
  --color-hover:           var(--surface-2);
  --color-success:         #4ade80;
  --color-success-bg:      #052e16;
  --color-success-text:    #4ade80;
  --color-warning:         #fbbf24;
  --color-warning-bg:      #422006;
  --color-warning-text:    #fbbf24;
  --color-danger:          #f87171;
  --color-danger-bg:       #450a0a;
  --color-danger-text:     #f87171;
  --color-info:            #60a5fa;
  --color-info-bg:         #172554;
  --color-info-text:       #60a5fa;
  --color-violet:          #a78bfa;
  --color-violet-bg:       #2e1065;
  --color-violet-text:     #a78bfa;
  --color-teal:            #2dd4bf;
  --color-teal-bg:         #042f2e;
  --color-teal-text:       #2dd4bf;

  --color-success-border-soft: #14532d;
  --color-warning-border-soft: #713f12;
  --color-danger-border-soft:  #7f1d1d;
  --color-info-border-soft:    #1e3a8a;
  --color-text-subtle:         #6b7280;
  --color-orange-bg:           #431407;
  --color-orange-text:         #fdba74;
  --color-orange-border:       #9a3412;
  --color-yellow-bg:           #422006;
  --color-yellow-text:         #fde047;
  --color-yellow-border:       #854d0e;
  --color-pink-bg:             #500724;
  --color-pink-text:           #f9a8d4;
  --color-sky-bg:              #082f49;
  --color-sky-text:            #7dd3fc;
  --color-sky-border:          #0c4a6e;
  --color-slate-bg:            #2b3648;
  --color-slate-text:          #cbd5e1;
  --color-tier-bronze-bg:      #3a2a18;
  --color-tier-bronze-text:    #d8a766;
  --color-tier-silver-bg:      #2a2f37;
  --color-tier-silver-text:    #c2cad6;
  --color-signature-ink:       #dbeafe;
  --color-sky-500:             #38bdf8;
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.30);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.40);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.50);
  --shadow-primary: 0 4px 14px rgba(129,140,248,0.35);
  --color-accent-ai:  #a78bfa;
  --surface-0:        #111827;
  --surface-1:        #1f2937;
  --surface-2:        #374151;
  --surface-3:        #4b5563;
  --surface-4:        #6b7280;

  /* Re-declare legacy aliases so material.css picks up dark values */
  --primary:            var(--color-primary);
  --primary-dark:       var(--color-primary-hover);
  --primary-light:      var(--color-primary-light);
  --surface:            var(--color-surface);
  --surface-variant:    var(--color-surface-raised);
  --background:         var(--color-surface-raised);
  --on-surface:         var(--color-text-primary);
  --on-surface-variant: var(--color-text-muted);
  --border-light:       var(--color-border);
  --border-medium:      var(--surface-3);
  --error:              var(--color-danger);
  --success:            var(--color-success);
  --warning:            var(--color-warning);
  --info:               var(--color-info);
}

/* ── Light-scope island — `.surface-light` and `.auth-card` ───────────────
   Re-declares the LIGHT values of every token the dark blocks flip, so a
   light-only surface (the auth glass card over a video) stays light when the
   viewer is in dark mode. Declared on the element, so it wins over the
   inherited :root / body.dark-mode values for it and its descendants. The
   compatibility aliases below are re-declared here too, so they re-resolve
   against the island's values. Keep in sync with :root. */
.surface-light,
.auth-card {
  --color-primary:         #6366f1;
  --color-primary-hover:   #4f46e5;
  --color-primary-subtle:  #eef2ff;
  --color-primary-bg:      var(--color-primary-subtle);
  --color-primary-text:    #4f46e5;
  --color-primary-200:     #c7d2fe;
  --color-text-primary:    #111827;
  --color-text-secondary:  #374151;
  --color-text-muted:      #4b5563;
  --color-text-faint:      #6b7280;
  --color-border:          #e5e7eb;
  --color-border-light:    #f3f4f6;
  --color-border-strong:   #d1d5db;
  --color-surface:         #ffffff;
  --color-surface-raised:  #f9fafb;
  --color-surface-alt:     var(--surface-2);
  --color-hover:           var(--surface-2);
  --color-success:         #22c55e;
  --color-success-bg:      #dcfce7;
  --color-success-text:    #15803d;
  --color-warning:         #f59e0b;
  --color-warning-bg:      #fef3c7;
  --color-warning-text:    #92400e;
  --color-danger:          #ef4444;
  --color-danger-bg:       #fee2e2;
  --color-danger-text:     #b91c1c;
  --color-info:            #3b82f6;
  --color-info-bg:         #dbeafe;
  --color-info-text:       #1d4ed8;
  --color-violet:          #8b5cf6;
  --color-violet-bg:       #ede9fe;
  --color-violet-text:     #7c3aed;
  --color-teal:            #14b8a6;
  --color-teal-bg:         #ccfbf1;
  --color-teal-text:       #0f766e;
  --color-accent-ai:       #8b5cf6;
  --shadow-sm:             0 1px 4px rgba(0,0,0,0.07);
  --shadow-md:             0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:             0 8px 24px rgba(0,0,0,0.15);
  --shadow-primary:        0 4px 14px rgba(99,102,241,0.30);
  --surface-0:             #ffffff;
  --surface-1:             #f9fafb;
  --surface-2:             #f3f4f6;
  --surface-3:             #e5e7eb;
  --surface-4:             #d1d5db;
  --surface-variant:       var(--color-surface-raised);
  --background:            var(--color-surface-raised);
  --surface:               var(--color-surface);
  --on-surface:            var(--color-text-primary);
  --on-surface-variant:    var(--color-text-muted);
  --border-light:          var(--color-border);
  --border-medium:         var(--surface-3);
  --error:                 var(--color-danger);
  --success:               var(--color-success);
  --warning:               var(--color-warning);
  --info:                  var(--color-info);
  --color-primary-light:   #818cf8;
  --primary:               var(--color-primary);
  --primary-dark:          var(--color-primary-hover);
  --primary-light:         var(--color-primary-light);
}

/* ── Reduced motion — disable all transitions/animations ────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}

/* ── Compatibility aliases ─────────────────────────────────────────────
   Token names that page CSS references but that were never defined, so the
   literal fallback (always a light-theme colour) won in dark mode. Declared on
   both :root and body.dark-mode because var() in a custom property resolves on
   the declaring element: an alias declared on :root alone would inherit the
   light value into body.dark-mode. */
:root,
body.dark-mode,
.surface-light,
.auth-card {
  --color-text:              var(--color-text-primary);
  --color-muted:             var(--color-text-muted);
  --color-error:             var(--color-danger);
  --color-error-text:        var(--color-danger-text);
  --color-warn-text:         var(--color-warning-text);
  --color-warn-bg:           var(--color-warning-bg);
  --color-accent:            var(--color-primary);
  --color-on-primary:        var(--color-on-accent);
  --color-primary-dark:      var(--color-primary-hover);
  --color-primary-border:    var(--color-primary-light);
  --color-primary-alpha:     rgba(99, 102, 241, 0.15);
  --color-danger-dark:       var(--color-danger-solid);
  --color-success-dark:      var(--color-success-text);
  --color-info-hover:        var(--color-info-solid);
  --color-bg:                var(--color-surface-raised);
  --color-background:        var(--color-surface-raised);
  --color-bg-secondary:      var(--color-surface-raised);
  --color-bg-subtle:         var(--color-surface-raised);
  --color-secondary-bg:      var(--color-surface-raised);
  --color-surface-secondary: var(--color-surface-raised);
  --color-surface-variant:   var(--color-surface-raised);
  --color-surface-elevated:  var(--color-surface);
  --color-input-bg:          var(--color-surface);
  --color-surface-2:         var(--surface-2);
  --color-surface-hover:     var(--color-hover);
  --color-hover-light:       var(--color-hover);
  --color-hover-dark:        var(--color-hover);
  --color-surface-inverse:   var(--color-text-primary);
  --color-focus-light:       var(--color-primary-light);
  --color-focus-dark:        var(--color-primary-light);
  --color-border-subtle:     var(--color-border-light);
  --color-border-dark:       var(--surface-4);
  --color-info-subtle:       var(--color-info-bg);
  --color-info-surface:      var(--color-info-bg);
  --color-info-bg-soft:      var(--color-info-bg);
  --color-info-bg-dim:       var(--color-info-bg);
  --color-info-border:       var(--color-info);
  --color-success-bg-dim:    var(--color-success-bg);
  --color-warning-bg-dim:    var(--color-warning-bg);
  --color-warning-border:    var(--color-warning);
  --color-danger-bg-dim:     var(--color-danger-bg);
  --color-danger-border:     var(--color-danger);
}