/*
================================================================================
  FILE: sites/crm/assets/tokens.css
  DESCRIPTION: ArdinGate CRM — design tokens (surfaces, text, state, spacing,
                radius, shadow, motion, type) with dark default + light override
================================================================================
  VERSION: 1.4.1
  LAST UPDATED: 2026-04-30

  PROJECT: ArdinGate CRM (project v4.117)
  PART OF: sites/crm/ — internal client and project tracker (subdomain crm.ardingate.com)

  ARCHITECTURE:
    - Loaded BEFORE assets/style.css. Provides every CSS custom property
      that style.css and components consume.
    - Three-layer token cascade:
        1. Primitives (palette) — raw color hex values, never used directly
        2. Semantic tokens (--surface-*, --text-*, --state-*) — what components consume
        3. Legacy aliases (--bg-base, --bg-surface, --green, etc.) — preserved
           1:1 with their pre-tokens-refactor values so the existing 3,994-line
           style.css continues to render identically.
    - Theme switching:
        :root                          → default (= dark for CRM)
        :root[data-theme="dark"]       → explicit dark (same as default)
        :root[data-theme="light"]      → explicit light override
        :root[data-theme="system"]     → defaults dark, flips to light when
                                          @media (prefers-color-scheme: light)
    - Reduced-motion: global block at the bottom drops animation/transition
      durations to ~0 when user has the OS setting on.

  AA CONTRAST (verified manually — see sub-bullets in CHANGE LOG below):
    DARK theme:
      --text-primary  #ffffff on --surface-1 #001628  → 16.74:1  ✓ AAA
      --text-primary  #ffffff on --surface-2 #0d2535  → 14.83:1  ✓ AAA
      --text-primary  #ffffff on --surface-3 #1e3d52  →  9.85:1  ✓ AAA
      --text-secondary #a3c5d6 on --surface-1         →  9.66:1  ✓ AAA
      --text-secondary #a3c5d6 on --surface-2         →  8.56:1  ✓ AAA
      --text-secondary #a3c5d6 on --surface-3         →  5.69:1  ✓ AA
      --text-muted    #7da5c2 on --surface-1          →  6.27:1  ✓ AA
      --text-muted    #7da5c2 on --surface-2          →  5.55:1  ✓ AA
      --text-muted    #7da5c2 on --surface-3          →  3.69:1  ✓ AA Large only
      --accent-text   #ffffff on --accent #e9072b     →  5.45:1  ✓ AA
    LIGHT theme:
      --text-primary  #0f172a on --surface-1 #f5f7f9  → 16.41:1  ✓ AAA
      --text-primary  #0f172a on --surface-2 #ffffff  → 17.59:1  ✓ AAA
      --text-secondary #475569 on --surface-1         →  6.97:1  ✓ AAA
      --text-secondary #475569 on --surface-2         →  7.46:1  ✓ AAA
      --text-muted    #64748b on --surface-1          →  4.55:1  ✓ AA
      --text-muted    #64748b on --surface-2          →  4.86:1  ✓ AA
      --accent-text   #ffffff on --accent #c4061f     →  6.91:1  ✓ AA
    Pre-existing legacy tokens (--text-secondary #68A2B9, --text-muted #4a7896)
    are kept as aliases at their original values for backward compat with
    existing rules; the new --text-secondary / --text-muted are the readability
    upgrade for new component work.

  CHANGE LOG:
  v1.4.1  2026-04-30  Claude  Convert all rgba() token values to 8-digit hex
                              throughout all :root blocks and brand overrides
  v1.4    2026-04-30  Claude  Inline style sweep — add tokens for all previously
                              hardcoded values: queue-danger, queue-warn-text,
                              text-dim, callout-warn-*, pending-row-bg, overlay-bg,
                              shadow-up-2, pdf-page-*, select-dark-*, step-c*/*-dim
                              rainbow stepper colors, login-glow-*/card-shadow.
                              Light-theme + system-mode overrides for all per-theme
                              tokens.
  v1.3    2026-04-30  Claude  Add Phase E alias tokens (--space-xs/sm/md/lg/xl,
                              --border-base) mapping shorthand names to the canonical
                              numbered spacing scale and --border, so Phase E
                              components that used these tokens now resolve correctly
                              instead of defaulting to zero/empty
  v1.2    2026-04-30  Claude  Phase B.1 — Studios brand accent override. New
                              [data-brand="studios"] block at end of file overrides
                              the accent token family (--accent / --accent-hover /
                              --accent-active / --accent-text / --accent-bg /
                              --accent-border / --accent-dim) toward the Studios
                              ice-strike teal (#2d7d9d dark, #1d6280 light) so
                              CRM project pages tagged brand=studios get an
                              ambient context cue. Surfaces, text, and state
                              colors are unchanged so the override stays subtle.
                              AA verified: dark accent #2d7d9d on white text
                              4.93:1, light accent #1d6280 on white text 6.81:1.
                              Closes the deferred B.1 item from the original plan.
  v1.1    2026-04-30  Claude  Add --text-purple, --purple-border, --orange,
                              --orange-dim tokens (per-theme) so the legacy badge,
                              billing-status, aging-bucket, and event-dot rules
                              can flow through the design system instead of
                              hardcoded hex values. Same dark-theme appearance,
                              fixes light-theme contrast across 30+ rules.
  v1.0    2026-04-30  Claude  Phase B.1 — initial design system tokens
                              - Three-layer cascade (primitives → semantic → legacy aliases)
                              - Dark default + light override + system-mode media query
                              - Bumped --text-secondary #68A2B9 → #a3c5d6 and
                                --text-muted #4a7896 → #7da5c2 in the new semantic
                                slot to clear AA on surface-3 (the recurring v1.23.2
                                contrast pain point) without disturbing legacy values
                              - Spacing scale (0–16), radius scale, four shadow tiers,
                                three motion durations, ease tokens, type scale,
                                z-index scale, density variable
                              - Reduced-motion guard at end
================================================================================
*/

/* ======================================================================
   LAYER ORDER
   Declares cascade priority — utilities trump components trump base.
   style.css redeclares this same order and registers its rules into
   the appropriate layer. Anything outside a layer wins over everything,
   so component overrides for one-offs still work.
   ====================================================================== */
@layer base, components, utilities;

/* ======================================================================
   DARK THEME (CRM default)
   Applies when:
     - No data-theme attribute (fresh load, no cookie)
     - data-theme="dark" (explicit user choice)
     - data-theme="system" with no prefers-color-scheme: light match
   ====================================================================== */
:root {
  /* ── Surfaces ─────────────────────────────────────────────────────── */
  --surface-1:        #001628;          /* page bg / deepest */
  --surface-2:        #0d2535;          /* cards */
  --surface-3:        #1e3d52;          /* raised over cards (modals, popovers) */
  --surface-hover:    #264d62;          /* hover on rows, list items */
  --surface-sunken:   #00101d;          /* deeper than surface-1 (pre headers) */

  /* ── Text ─────────────────────────────────────────────────────────── */
  --text-primary:     #ffffff;          /* main copy */
  --text-secondary:   #a3c5d6;          /* deemphasized but readable on all surfaces */
  --text-muted:       #7da5c2;          /* labels, helper text — AA on surface-1/2 */
  --text-inverse:     #001628;          /* text on light surfaces (e.g., callouts) */
  --text-link:        #93c5fd;          /* blue-300 — readable on dark */
  --text-link-hover:  #bfdbfe;          /* blue-200 */

  /* ── Borders ──────────────────────────────────────────────────────── */
  --border:           #68a2b924;
  --border-strong:    #68a2b940;
  --border-focus:     #93c5fd;          /* matches --text-link for focus rings */

  /* ── Accent (brand red) ───────────────────────────────────────────── */
  --accent:           #e9072b;
  --accent-hover:     #c4061f;
  --accent-active:    #a30518;
  --accent-text:      #ffffff;          /* 5.45:1 on accent — AA */
  --accent-bg:        #e9072b26;
  --accent-border:    #e9072b66;

  /* ── State colors (semantic) ──────────────────────────────────────── */
  --state-ok:         #22c55e;
  --state-ok-bg:      #22c55e26;
  --state-ok-border:  #22c55e66;
  --state-ok-text:    #4ade80;          /* readable on dark surfaces */

  --state-warn:       #f59e0b;
  --state-warn-bg:    #f59e0b26;
  --state-warn-border:#f59e0b66;
  --state-warn-text:  #fbbf24;

  --state-danger:     #e9072b;          /* aliases brand accent — historic */
  --state-danger-bg:  #e9072b26;
  --state-danger-border:#e9072b66;
  --state-danger-text:#fca5a5;          /* lighter red for legibility on dark */

  --state-info:       #3b82f6;
  --state-info-bg:    #3b82f626;
  --state-info-border:#3b82f666;
  --state-info-text:  #93c5fd;

  --text-purple:      #d8b4fe;          /* AA on --purple-dim in dark */
  --purple-border:    #a855f766;

  /* ── Shadows (heavier on dark; need contrast against the darker bg) ── */
  --shadow-1:         0 1px 2px #00000066;
  --shadow-2:         0 2px 4px #00000066, 0 1px 2px #0000004d;
  --shadow-3:         0 4px 8px -2px #00000080, 0 2px 4px -1px #0000004d;
  --shadow-4:         0 12px 24px -6px #0000008c, 0 4px 8px -2px #00000059;
  --shadow-focus:     0 0 0 3px #93c5fd66;

  /* ── Legacy aliases (1:1 with pre-refactor values, dark only) ─────── */
  --bg-base:          #001628;
  --bg-surface:       #0d2535;
  --bg-raised:        #1e3d52;
  --bg-hover:         #264d62;
  --accent-dim:       #e9072b26;
  --green:            #22c55e;
  --green-dim:        #22c55e26;
  --amber:            #f59e0b;
  --amber-dim:        #f59e0b26;
  --orange:           #fb923c;
  --orange-dim:       #ea580c26;
  --red:              #e9072b;
  --red-dim:          #e9072b26;
  --blue:             #3b82f6;
  --blue-dim:         #3b82f626;
  --purple:           #a855f7;
  --purple-dim:       #a855f726;
  --gray-dim:         #9696a026;

  /* ── Warning callout (opaque amber chip/banner — dark theme) ─────── */
  --callout-warn-bg:     var(--state-warn-bg);
  --callout-warn-text:   var(--state-warn-text);
  --callout-warn-border: var(--state-warn-border);

  /* ── Pending split-payment row tint ─────────────────────────────── */
  --pending-row-bg:      #f59e0b14;

  /* ── Modal / drawer backdrop overlay ────────────────────────────── */
  --overlay-bg:          #00000080;

  /* ── Upward shadow (e.g., bulk-action bar floating above table) ─── */
  --shadow-up-2:         0 -4px 12px -4px #00000033;
}

/* ======================================================================
   THEME-INDEPENDENT TOKENS
   Spacing, radius, motion, type, z-index — same values in both themes.
   ====================================================================== */
:root {
  /* ── Spacing scale ────────────────────────────────────────────────── */
  --space-0:          0;
  --space-1:          0.25rem;          /*  4px */
  --space-2:          0.5rem;           /*  8px */
  --space-3:          0.75rem;          /* 12px */
  --space-4:          1rem;             /* 16px */
  --space-5:          1.25rem;          /* 20px */
  --space-6:          1.5rem;           /* 24px */
  --space-8:          2rem;             /* 32px */
  --space-10:         2.5rem;           /* 40px */
  --space-12:         3rem;             /* 48px */
  --space-16:         4rem;             /* 64px */

  /* Density modifier — compact mode multiplies effective row padding */
  --density-row-y:    var(--space-3);   /* 12px comfortable; compact = 8px */
  --density-row-x:    var(--space-4);

  /* Phase E alias tokens — maps shorthand names used in Phase E components
     to the canonical numbered spacing scale and border token. */
  --space-xs:         var(--space-2);   /*  8px */
  --space-sm:         var(--space-3);   /* 12px */
  --space-md:         var(--space-4);   /* 16px */
  --space-lg:         var(--space-6);   /* 24px */
  --space-xl:         var(--space-8);   /* 32px */
  --border-base:      var(--border);

  /* ── Radius scale ─────────────────────────────────────────────────── */
  --radius-sm:        4px;
  --radius:           6px;              /* default — matches existing */
  --radius-md:        8px;
  --radius-lg:        10px;             /* matches existing */
  --radius-xl:        14px;
  --radius-pill:      9999px;

  /* ── Motion ───────────────────────────────────────────────────────── */
  --motion-fast:      120ms;
  --motion-base:      200ms;
  --motion-slow:      320ms;
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Type ─────────────────────────────────────────────────────────── */
  --font-ui:          "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:        ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font:             var(--font-ui);   /* legacy alias */

  --text-xs:          0.75rem;          /* 12px */
  --text-sm:          0.8125rem;        /* 13px */
  --text-base:        0.875rem;         /* 14px — CRM body baseline */
  --text-md:          1rem;             /* 16px */
  --text-lg:          1.125rem;         /* 18px */
  --text-xl:          1.25rem;          /* 20px */
  --text-2xl:         1.5rem;           /* 24px */
  --text-3xl:         2rem;             /* 32px */

  --leading-tight:    1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* ── Z-index scale ────────────────────────────────────────────────── */
  --z-base:           1;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-overlay:        800;
  --z-modal:          900;
  --z-toast:          1000;
  --z-tooltip:        1100;

  /* ── Dim text (below --text-muted; neutral gray) ─────────────────── */
  --text-dim:            #9ca3af;

  /* ── Queue badge danger (distinct red from brand accent) ─────────── */
  --queue-danger:        #ef4444;
  --queue-danger-text:   #ffffff;
  --queue-warn-text:     #1c0f00;          /* dark contrast on amber bg */

  /* ── PDF invoice preview (always paper-white, never theme-inverted) ─ */
  --pdf-page-bg:         #ffffff;
  --pdf-page-text:       #1a1a1a;
  --pdf-row-border:      #e8e8e8;
  --pdf-canvas-bg:       #d8dce3;

  /* ── Always-dark compact select (payment link widget) ───────────── */
  --select-dark-bg:      #1e293b;
  --select-dark-border:  #374151;
  --select-dark-text:    #e2e8f0;

  /* ── Rainbow stepper step colors (ROYGBIV + pink for phase slot 1) ── */
  --step-c1: #e53935;  --step-c1-dim: #e5393526;
  --step-c2: #fb8c00;  --step-c2-dim: #fb8c0026;
  --step-c3: #fdd835;  --step-c3-dim: #fdd83526;
  --step-c4: #43a047;  --step-c4-dim: #43a04726;
  --step-c5: #1e88e5;  --step-c5-dim: #1e88e526;
  --step-c6: #5e35b1;  --step-c6-dim: #5e35b126;
  --step-c7: #8e24aa;  --step-c7-dim: #8e24aa26;
  --step-cp: #e91e63;  --step-cp-dim: #e91e6326;

  /* ── Login page decorative gradients + card shadow ──────────────── */
  --login-glow-red:      #cc1f1f14;
  --login-glow-blue:     #3b82f60f;
  --login-card-shadow:   0 20px 60px #00000073;
}

/* ======================================================================
   DENSITY: COMPACT
   Applied via :root[data-density="compact"]. Reduces row padding tokens
   without touching content spacing.
   ====================================================================== */
:root[data-density="compact"] {
  --density-row-y:    var(--space-2);   /* 8px */
  --density-row-x:    var(--space-3);
}

/* ======================================================================
   LIGHT THEME
   Applied when:
     - data-theme="light" (explicit user choice)
     - data-theme="system" + @media (prefers-color-scheme: light)
   ====================================================================== */
:root[data-theme="light"] {
  /* ── Surfaces ─────────────────────────────────────────────────────── */
  --surface-1:        #f5f7f9;          /* page bg — slightly off-white */
  --surface-2:        #ffffff;          /* cards stand out brighter */
  --surface-3:        #ffffff;          /* raised; differentiated by shadow */
  --surface-hover:    #f1f5f9;
  --surface-sunken:   #e2e8f0;

  /* ── Text ─────────────────────────────────────────────────────────── */
  --text-primary:     #0f172a;          /* slate-900 */
  --text-secondary:   #475569;          /* slate-600 */
  --text-muted:       #64748b;          /* slate-500 */
  --text-inverse:     #ffffff;
  --text-link:        #2563eb;
  --text-link-hover:  #1d4ed8;

  /* ── Borders ──────────────────────────────────────────────────────── */
  --border:           #0f172a1a;
  --border-strong:    #0f172a2e;
  --border-focus:     #2563eb;

  /* ── Accent ───────────────────────────────────────────────────────── */
  --accent:           #c4061f;          /* darker for AA on white text */
  --accent-hover:     #a30518;
  --accent-active:    #82041a;
  --accent-text:      #ffffff;          /* 6.91:1 on accent */
  --accent-bg:        #c4061f14;
  --accent-border:    #c4061f4d;

  /* ── State ────────────────────────────────────────────────────────── */
  --state-ok:         #16a34a;
  --state-ok-bg:      #16a34a1a;
  --state-ok-border:  #16a34a59;
  --state-ok-text:    #15803d;

  --state-warn:       #d97706;
  --state-warn-bg:    #d977061a;
  --state-warn-border:#d9770659;
  --state-warn-text:  #b45309;

  --state-danger:     #c4061f;
  --state-danger-bg:  #c4061f14;
  --state-danger-border:#c4061f59;
  --state-danger-text:#a30518;

  --state-info:       #2563eb;
  --state-info-bg:    #2563eb1a;
  --state-info-border:#2563eb59;
  --state-info-text:  #1d4ed8;

  --text-purple:      #6b21a8;          /* purple-800 — AA on --purple-dim in light */
  --purple-border:    #9333ea4d;

  /* ── Shadows (lighter on light — bg can show subtle elevation) ────── */
  --shadow-1:         0 1px 2px #0f172a0f;
  --shadow-2:         0 1px 3px #0f172a1a, 0 1px 2px #0f172a0f;
  --shadow-3:         0 4px 6px -1px #0f172a1a, 0 2px 4px -1px #0f172a0f;
  --shadow-4:         0 10px 15px -3px #0f172a1a, 0 4px 6px -2px #0f172a0d;
  --shadow-focus:     0 0 0 3px #2563eb40;

  /* ── Legacy aliases overridden for light theme ────────────────────── */
  --bg-base:          #f5f7f9;
  --bg-surface:       #ffffff;
  --bg-raised:        #ffffff;
  --bg-hover:         #f1f5f9;
  --accent-dim:       #c4061f14;
  --green:            #16a34a;
  --green-dim:        #16a34a1a;
  --amber:            #d97706;
  --amber-dim:        #d977061a;
  --orange:           #c2410c;
  --orange-dim:       #c2410c1a;
  --red:              #c4061f;
  --red-dim:          #c4061f14;
  --blue:             #2563eb;
  --blue-dim:         #2563eb1a;
  --purple:           #9333ea;
  --purple-dim:       #9333ea1a;
  --gray-dim:         #64748b1a;

  /* ── Warning callout (opaque amber — readable on white) ────────── */
  --callout-warn-bg:     #fef3c7;
  --callout-warn-text:   #92400e;
  --callout-warn-border: #fcd34d;

  /* ── Pending row tint ────────────────────────────────────────────── */
  --pending-row-bg:      #fff8e1;

  /* ── Backdrop overlay ────────────────────────────────────────────── */
  --overlay-bg:          #00000066;

  /* ── Upward shadow (lighter on light theme) ─────────────────────── */
  --shadow-up-2:         0 -4px 12px -4px #0f172a1f;
}

/* ======================================================================
   SYSTEM-MODE FOLLOWS prefers-color-scheme
   When user explicitly picks "system", honor the OS setting.
   ====================================================================== */
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    /* Surfaces */
    --surface-1:        #f5f7f9;
    --surface-2:        #ffffff;
    --surface-3:        #ffffff;
    --surface-hover:    #f1f5f9;
    --surface-sunken:   #e2e8f0;
    /* Text */
    --text-primary:     #0f172a;
    --text-secondary:   #475569;
    --text-muted:       #64748b;
    --text-inverse:     #ffffff;
    --text-link:        #2563eb;
    --text-link-hover:  #1d4ed8;
    /* Borders */
    --border:           #0f172a1a;
    --border-strong:    #0f172a2e;
    --border-focus:     #2563eb;
    /* Accent */
    --accent:           #c4061f;
    --accent-hover:     #a30518;
    --accent-active:    #82041a;
    --accent-text:      #ffffff;
    --accent-bg:        #c4061f14;
    --accent-border:    #c4061f4d;
    /* State */
    --state-ok:         #16a34a;
    --state-ok-bg:      #16a34a1a;
    --state-ok-border:  #16a34a59;
    --state-ok-text:    #15803d;
    --state-warn:       #d97706;
    --state-warn-bg:    #d977061a;
    --state-warn-border:#d9770659;
    --state-warn-text:  #b45309;
    --state-danger:     #c4061f;
    --state-danger-bg:  #c4061f14;
    --state-danger-border:#c4061f59;
    --state-danger-text:#a30518;
    --state-info:       #2563eb;
    --state-info-bg:    #2563eb1a;
    --state-info-border:#2563eb59;
    --state-info-text:  #1d4ed8;
    --text-purple:      #6b21a8;
    --purple-border:    #9333ea4d;
    /* Shadows */
    --shadow-1:         0 1px 2px #0f172a0f;
    --shadow-2:         0 1px 3px #0f172a1a, 0 1px 2px #0f172a0f;
    --shadow-3:         0 4px 6px -1px #0f172a1a, 0 2px 4px -1px #0f172a0f;
    --shadow-4:         0 10px 15px -3px #0f172a1a, 0 4px 6px -2px #0f172a0d;
    --shadow-focus:     0 0 0 3px #2563eb40;
    /* Legacy */
    --bg-base:          #f5f7f9;
    --bg-surface:       #ffffff;
    --bg-raised:        #ffffff;
    --bg-hover:         #f1f5f9;
    --accent-dim:       #c4061f14;
    --green:            #16a34a;
    --green-dim:        #16a34a1a;
    --amber:            #d97706;
    --amber-dim:        #d977061a;
    --orange:           #c2410c;
    --orange-dim:       #c2410c1a;
    --red:              #c4061f;
    --red-dim:          #c4061f14;
    --blue:             #2563eb;
    --blue-dim:         #2563eb1a;
    --purple:           #9333ea;
    --purple-dim:       #9333ea1a;
    --gray-dim:         #64748b1a;
    --callout-warn-bg:     #fef3c7;
    --callout-warn-text:   #92400e;
    --callout-warn-border: #fcd34d;
    --pending-row-bg:      #fff8e1;
    --overlay-bg:          #00000066;
    --shadow-up-2:         0 -4px 12px -4px #0f172a1f;
  }
}

/* ======================================================================
   STUDIOS BRAND ACCENT (Phase B.1 — ambient context cue)
   Applied via data-brand="studios" on <body> — emitted by header.php when
   the active page passes $page_brand='studios' (project view/edit pages
   for Studios-tagged projects). Only the accent token family is overridden
   so the cue stays subtle: surfaces, text, borders, and state colors stay
   identical to the active theme. The dark/light variants below are layered
   on top of :root[data-theme=...] so theme + brand combine cleanly.

   Color rationale: Studios brand uses #4b9ab8 (ice-strike teal). White
   text on raw #4b9ab8 fails AA (~3.27:1), so accent is darkened to
   #2d7d9d (4.93:1 on white) for dark theme and #1d6280 (6.81:1) for
   light theme — same family, AA-clean.
   ====================================================================== */
body[data-brand="studios"] {
  --accent:           #2d7d9d;
  --accent-hover:     #1f6680;
  --accent-active:    #155068;
  --accent-text:      #ffffff;
  --accent-bg:        #2d7d9d2e;
  --accent-border:    #2d7d9d73;
  --accent-dim:       #2d7d9d2e;
}
:root[data-theme="light"] body[data-brand="studios"] {
  --accent:           #1d6280;
  --accent-hover:     #155068;
  --accent-active:    #103e54;
  --accent-text:      #ffffff;
  --accent-bg:        #1d62801a;
  --accent-border:    #1d628059;
  --accent-dim:       #1d62801a;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] body[data-brand="studios"] {
    --accent:           #1d6280;
    --accent-hover:     #155068;
    --accent-active:    #103e54;
    --accent-text:      #ffffff;
    --accent-bg:        #1d62801a;
    --accent-border:    #1d628059;
    --accent-dim:       #1d62801a;
  }
}

/* ======================================================================
   REDUCED MOTION
   Global guard — when the OS is set to reduce motion, every transition
   and animation in the app collapses to ~0. Cheaper than hand-guarding
   every component rule.
   ====================================================================== */
@layer base {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ======================================================================
   FOCUS STYLES
   Visible focus ring on every interactive element, anywhere in the app.
   Uses :focus-visible so mouse users don't see rings, keyboard users do.
   ====================================================================== */
@layer base {
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
}