/* ============================================================
   ANAT design tokens — visual redesign, week 1.
   Loaded BEFORE style.css so every existing rule resolves
   against tokens declared here. Additive only — does not
   replace tokens declared in style.css :root; co-exists.

   Organization:
     1. Type scale    — --text-*, --lh-*
     2. Spacing scale — --sp-*
     3. Motion        — spring + standard easing, --dur-slow
     4. Warmth        — --warm-sand*, --surface-warm
     5. Dark mode     — declared below in html[data-theme="dark"]
   ============================================================ */

:root {
  /* --- Type scale ----------------------------------------- */
  --text-xs:    0.72rem;  /* 11.5px — chip labels, helper text */
  --text-sm:    0.82rem;  /* 13px   — body secondary, labels  */
  --text-base:  0.92rem;  /* 14.7px — body copy               */
  --text-md:    1.05rem;  /* 16.8px — card titles, sub-sect'n */
  --text-lg:    1.35rem;  /* 21.6px — section headings        */
  --text-xl:    1.85rem;  /* 29.6px — page titles             */
  --text-2xl:   2.60rem;  /* 41.6px — hero display only       */

  --lh-tight:   1.15;
  --lh-normal:  1.45;
  --lh-loose:   1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* --- Spacing scale (4px base) --------------------------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;

  /* --- Motion --------------------------------------------- */
  --dur-slow:      280ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Existing: --dur-fast (120ms), --dur (180ms), --ease-out */

  /* --- Warmth + surface step ------------------------------ */
  --warm-sand:       #EADFC8;
  --warm-sand-deep:  #B89B5E;
  --surface-warm:    #F5F4F0;  /* step between --bg and --card */

  /* --- Focus ring (a11y) ---------------------------------- */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* --- Semantic surfaces for full-cell color coding ------- */
  /* Drives urgency and status chips on /admin/improvements.
     Used semantically (critical / warning / caution / info /
     success / neutral), so the same token can apply across
     unrelated lists if/when we add color coding elsewhere. */
  --surface-critical-bg: #fee2e2;  --surface-critical-fg: #991b1b;  /* urgency 1, status rejected */
  --surface-warning-bg:  #fed7aa;  --surface-warning-fg:  #9a3412;  /* urgency 2                 */
  --surface-caution-bg:  #fef3c7;  --surface-caution-fg:  #92400e;  /* urgency 3, status deferred*/
  --surface-info-bg:     #dbeafe;  --surface-info-fg:     #1e40af;  /* urgency 4, in_progress    */
  --surface-success-bg:  #d1fae5;  --surface-success-fg:  #065f46;  /* status done               */
  --surface-neutral-bg:  #f3f4f6;  --surface-neutral-fg:  #374151;  /* status open               */
  --surface-muted-bg:    #e5e7eb;  --surface-muted-fg:    #374151;  /* urgency 5 (no action)     */
}

/* ============================================================
   Dark mode
   ============================================================
   Toggle via `html[data-theme="dark"]`. Topbar theme button
   persists choice in localStorage['anat-theme']. On first
   visit with no saved choice, JS respects prefers-color-scheme.
   Week 1 declares the token values; the toggle UI ships in W4.
   ============================================================ */
html[data-theme="dark"] {
  /* Surfaces */
  --bg:             #0F0F12;
  --bg-elevated:    #18181D;
  --card:           #1C1C22;
  --card-elev:      #24242C;
  --surface-warm:   #1A1A1F;

  /* Text */
  --text:           #EDEDF0;
  --text-secondary: #B8B8C0;
  --text-muted:     #7A7A85;
  --text-faint:     #4F4F58;

  /* Borders */
  --border-hairline: rgba(255, 255, 255, 0.05);
  --border:          rgba(255, 255, 255, 0.10);
  --border-strong:   rgba(255, 255, 255, 0.16);

  /* Accent stays indigo but lifts slightly for contrast */
  --accent:       #8287F5;
  --accent-light: rgba(130, 135, 245, 0.14);

  /* Table zebra striping — light purple even rows, lifted for dark bg */
  --row-stripe:   rgba(167, 139, 250, 0.07);

  /* Semantic — keep hue, lift for dark-bg contrast */
  --red:         #F87171;
  --red-light:   rgba(248, 113, 113, 0.14);
  --amber:       #F59E0B;
  --amber-light: rgba(245, 158, 11, 0.14);
  /* White text for solid accent buttons (amber/red/emerald/primary fills).
     Stays white in dark mode — the fills are saturated in both themes. */
  --on-accent:   #FFFFFF;
  --emerald:     #34D399;
  --emerald-light: rgba(52, 211, 153, 0.14);
  --emerald-deep:  #6EE7B7;
  --blue:        #60A5FA;
  --blue-light:  rgba(96, 165, 250, 0.14);

  /* Warmth retunes for dark */
  --warm-sand:       #3A342A;
  --warm-sand-deep:  #8A7548;

  /* Shadow loses softness in dark; keep hard edges */
  --shadow:    0 1px 2px rgba(0, 0, 0, 0.50);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65), 0 4px 10px rgba(0, 0, 0, 0.40);

  /* Sidebar ink variants */
  --surface-ink:      #0A0A0D;
  --surface-ink-elev: #111116;

  /* Focus ring adjusts so it reads on dark */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* Semantic surfaces — dark variants. Same intent mapping as
     :root, retuned for contrast on dark backgrounds. */
  --surface-critical-bg: #4a1d1d;  --surface-critical-fg: #fca5a5;
  --surface-warning-bg:  #4a2d18;  --surface-warning-fg:  #fdba74;
  --surface-caution-bg:  #4a3a14;  --surface-caution-fg:  #fde68a;
  --surface-info-bg:     #1e2f4a;  --surface-info-fg:     #93c5fd;
  --surface-success-bg:  #14352a;  --surface-success-fg:  #6ee7b7;
  --surface-neutral-bg:  #2a2d33;  --surface-neutral-fg:  #d1d5db;
  --surface-muted-bg:    #2a2d33;  --surface-muted-fg:    #d1d5db;
}

/* Respect reduced motion everywhere — disable transforms
   + shrink durations so the app still animates subtly (fade
   only) but never moves things around. */
@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;
  }
}