/* ============================================================
   KAIZY DESIGN TOKENS
   Single source of truth for color, spacing, radius, shadow,
   typography and z-index across every template.

   LOCKED — do not change: brand hue (#2563eb family) and font
   family (DM Sans / DM Mono). Only page-specific CSS may add new
   tokens; never redeclare the ones below in a page template.

   Loaded once by templates/base/base.html and
   templates/base/base_public.html, before any other stylesheet.
   ============================================================ */

:root {
  /* ── Ink / text ───────────────────────────── */
  --ink:         #0f1117;
  --ink-soft:    #4a5168;
  --ink-muted:   #8b91a7;

  /* ── Surfaces ─────────────────────────────── */
  --surface:     #f5f6fa;
  --card:        #ffffff;
  --border:      #e3e6ef;
  --border-mid:  #c8cde0;

  /* ── Brand (locked) ───────────────────────── */
  --brand:       #2563eb;
  --brand-dark:  #1d4ed8;
  --brand-soft:  #eff4ff;

  --indigo:      #4f46e5;
  --indigo-soft: #eef2ff;

  /* ── Semantic colors ──────────────────────── */
  --green:       #16a34a;
  --green-dark:  #15803d;
  --green-soft:  #f0fdf4;

  --red:         #dc2626;
  --red-soft:    #fef2f2;

  --yellow:      #ca8a04;
  --yellow-soft: #fefce8;

  --orange:      #ea580c;
  --orange-soft: #fff7ed;

  --purple:      #7c3aed;
  --purple-soft: #f5f3ff;

  /* ── Radius scale ─────────────────────────── */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* ── Shadow / elevation scale ─────────────── */
  --shadow-xs: 0 1px 3px rgba(15,17,23,.06), 0 1px 2px rgba(15,17,23,.04);
  --shadow-sm: 0 2px 8px rgba(15,17,23,.08), 0 1px 3px rgba(15,17,23,.05);
  --shadow:    0 4px 16px rgba(15,17,23,.10), 0 2px 6px rgba(15,17,23,.06);
  --shadow-lg: 0 8px 32px rgba(15,17,23,.13), 0 3px 10px rgba(15,17,23,.07);

  --card-translucent: rgba(255,255,255,.96);

  /* ── Typography (font family locked) ──────── */
  --font:      'DM Sans', 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;

  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ── Spacing scale (4/8px rhythm) ──────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Layout dimensions ─────────────────────── */
  --sidebar-w:   240px;
  --topbar-h:    56px;
  --bottomnav-h: 66px;

  /* ── Z-index scale (documented layers) ────────
     base(1) < dropdown(300) < sidebar/backdrop(199-200)
     < topbar/bottomnav(100) < modal(1000) < toast(1100) */
  --z-base:      1;
  --z-topbar:    100;
  --z-bottomnav: 100;
  --z-overlay:   199;
  --z-sidebar:   200;
  --z-dropdown:  300;
  --z-modal:     1000;
  --z-toast:     1100;

  /* ── Motion ────────────────────────────────── */
  --ease-out:      cubic-bezier(.22,1,.36,1);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);
  --duration-fast: 150ms;
  --duration:      220ms;
  --duration-slow: 320ms;
}

/* ============================================================
   DARK MODE
   Same token names, dark-appropriate values only — components
   never need their own dark-mode CSS as long as they consume
   these variables. Brand hue stays blue, lightened for AA
   contrast on dark surfaces (never re-hued).

   Precedence: OS preference first, then [data-theme] always
   wins (for a future manual light/dark toggle).
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:         #eef1f8;
    --ink-soft:    #b7bdd1;
    --ink-muted:   #7d8399;

    --surface:     #10131c;
    --card:        #171b28;
    --border:      #262c3d;
    --border-mid:  #333a52;

    --brand:       #5b8def;
    --brand-dark:  #7ba3f2;
    --brand-soft:  rgba(91,141,239,.15);

    --indigo:      #818cf8;
    --indigo-soft: rgba(129,140,248,.15);

    --green:       #4ade80;
    --green-dark:  #22c55e;
    --green-soft:  rgba(74,222,128,.12);

    --red:         #f87171;
    --red-soft:    rgba(248,113,113,.12);

    --yellow:      #fbbf24;
    --yellow-soft: rgba(251,191,36,.12);

    --orange:      #fb923c;
    --orange-soft: rgba(251,146,60,.12);

    --purple:      #a78bfa;
    --purple-soft: rgba(167,139,250,.12);

    --shadow-xs: 0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
    --shadow:    0 4px 16px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.30);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.50), 0 3px 10px rgba(0,0,0,.30);

    --card-translucent: rgba(23,27,40,.92);
  }
}

/* Manual toggle: <html data-theme="dark"> forces dark regardless of OS */
:root[data-theme="dark"] {
  --ink:         #eef1f8;
  --ink-soft:    #b7bdd1;
  --ink-muted:   #7d8399;

  --surface:     #10131c;
  --card:        #171b28;
  --border:      #262c3d;
  --border-mid:  #333a52;

  --brand:       #5b8def;
  --brand-dark:  #7ba3f2;
  --brand-soft:  rgba(91,141,239,.15);

  --indigo:      #818cf8;
  --indigo-soft: rgba(129,140,248,.15);

  --green:       #4ade80;
  --green-dark:  #22c55e;
  --green-soft:  rgba(74,222,128,.12);

  --red:         #f87171;
  --red-soft:    rgba(248,113,113,.12);

  --yellow:      #fbbf24;
  --yellow-soft: rgba(251,191,36,.12);

  --orange:      #fb923c;
  --orange-soft: rgba(251,146,60,.12);

  --purple:      #a78bfa;
  --purple-soft: rgba(167,139,250,.12);

  --shadow-xs: 0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
  --shadow:    0 4px 16px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.30);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.50), 0 3px 10px rgba(0,0,0,.30);

  --card-translucent: rgba(23,27,40,.92);
}

/* Manual toggle: <html data-theme="light"> forces light regardless of OS */
:root[data-theme="light"] {
  --ink:         #0f1117;
  --ink-soft:    #4a5168;
  --ink-muted:   #8b91a7;

  --surface:     #f5f6fa;
  --card:        #ffffff;
  --border:      #e3e6ef;
  --border-mid:  #c8cde0;

  --brand:       #2563eb;
  --brand-dark:  #1d4ed8;
  --brand-soft:  #eff4ff;

  --indigo:      #4f46e5;
  --indigo-soft: #eef2ff;

  --green:       #16a34a;
  --green-dark:  #15803d;
  --green-soft:  #f0fdf4;

  --red:         #dc2626;
  --red-soft:    #fef2f2;

  --yellow:      #ca8a04;
  --yellow-soft: #fefce8;

  --orange:      #ea580c;
  --orange-soft: #fff7ed;

  --purple:      #7c3aed;
  --purple-soft: #f5f3ff;

  --shadow-xs: 0 1px 3px rgba(15,17,23,.06), 0 1px 2px rgba(15,17,23,.04);
  --shadow-sm: 0 2px 8px rgba(15,17,23,.08), 0 1px 3px rgba(15,17,23,.05);
  --shadow:    0 4px 16px rgba(15,17,23,.10), 0 2px 6px rgba(15,17,23,.06);
  --shadow-lg: 0 8px 32px rgba(15,17,23,.13), 0 3px 10px rgba(15,17,23,.07);

  --card-translucent: rgba(255,255,255,.96);
}

/* ── Base reset + theme transition ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

/* ── Respect reduced-motion preference ─────────────────────── */
@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;
  }
}