/*
 * tokens.css — Design tokens for the example site.
 * Semantic CSS variables drive both light and dark themes. The anti-FOUC inline
 * script in each page sets data-theme to "light" or "dark" before first paint,
 * so [data-theme="dark"] is the source of truth. The prefers-color-scheme block
 * is a no-JS fallback only.
 */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces & text */
  --bg: #f4f6fa;
  --bg-tint: radial-gradient(1100px 520px at 12% -12%, rgba(37, 99, 235, 0.05), transparent 60%);
  --surface: #ffffff;
  --surface-2: #f1f4f9;
  --surface-3: #e6ebf3;
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #64748b;
  --border: #e6eaf1;
  --border-strong: #cbd4e1;

  /* Brand & accents */
  --brand: #2563eb;
  --brand-strong: #1d4ed8;
  --brand-ink: #ffffff;
  --brand-2: #0d9488;
  --accent: #f59e0b;
  --accent-ink: #422f06;

  /* Status */
  --success: #16a34a;
  --success-bg: rgba(22, 163, 74, 0.11);
  --warn: #d97706;
  --warn-bg: rgba(217, 119, 6, 0.13);
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.10);
  --info: #0284c7;
  --info-bg: rgba(2, 132, 199, 0.11);

  /* Soft brand fills */
  --brand-bg: rgba(37, 99, 235, 0.08);
  --brand-2-bg: rgba(13, 148, 136, 0.10);
  --accent-bg: rgba(245, 158, 11, 0.14);

  /* Focus */
  --focus: #2563eb;
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* Elevation — soft, layered, neutral-cool */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-2: 0 4px 14px rgba(15, 23, 42, 0.08), 0 1px 4px rgba(15, 23, 42, 0.05);
  --shadow-3: 0 24px 50px -16px rgba(15, 23, 42, 0.28);
  --overlay: rgba(15, 23, 42, 0.45);

  /* Chart palette — blue / teal / amber / violet */
  --c1: #2563eb;
  --c2: #0d9488;
  --c3: #f59e0b;
  --c4: #7c3aed;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e1620;
  --bg-tint: radial-gradient(circle at top left, rgba(15, 111, 107, 0.18) 0, transparent 26rem);
  --surface: #16212e;
  --surface-2: #1c2a39;
  --surface-3: #233244;
  --ink: #eaf1f8;
  --ink-soft: #cdd9e6;
  --muted: #9fb0c2;
  --border: #2b3a4d;
  --border-strong: #3a4d63;

  --brand: #4a9fd6;
  --brand-strong: #6fb5e3;
  --brand-ink: #06121f;
  --brand-2: #34b3ad;
  --accent: #f7c52e;
  --accent-ink: #2a2000;

  --success: #45c07e;
  --success-bg: rgba(69, 192, 126, 0.16);
  --warn: #e0a64b;
  --warn-bg: rgba(224, 166, 75, 0.16);
  --danger: #ef6b6b;
  --danger-bg: rgba(239, 107, 107, 0.16);
  --info: #5fb6e0;
  --info-bg: rgba(95, 182, 224, 0.16);

  --brand-bg: rgba(74, 159, 214, 0.16);
  --brand-2-bg: rgba(52, 179, 173, 0.16);
  --accent-bg: rgba(247, 197, 46, 0.16);

  --focus: #5fb6e0;
  --focus-ring: 0 0 0 3px rgba(95, 182, 224, 0.5);

  --shadow-1: 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 18px 55px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 28px 70px rgba(0, 0, 0, 0.6);
  --overlay: rgba(3, 8, 14, 0.62);

  --c1: #4a9fd6;
  --c2: #34b3ad;
  --c3: #f7c52e;
  --c4: #a78bfa;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0e1620;
    --bg-tint: radial-gradient(circle at top left, rgba(15, 111, 107, 0.18) 0, transparent 26rem);
    --surface: #16212e;
    --surface-2: #1c2a39;
    --surface-3: #233244;
    --ink: #eaf1f8;
    --ink-soft: #cdd9e6;
    --muted: #9fb0c2;
    --border: #2b3a4d;
    --border-strong: #3a4d63;
    --brand: #4a9fd6;
    --brand-strong: #6fb5e3;
    --brand-ink: #06121f;
    --brand-2: #34b3ad;
    --accent: #f7c52e;
    --accent-ink: #2a2000;
    --success: #45c07e;
    --warn: #e0a64b;
    --danger: #ef6b6b;
    --info: #5fb6e0;
    --brand-bg: rgba(74, 159, 214, 0.16);
    --brand-2-bg: rgba(52, 179, 173, 0.16);
    --accent-bg: rgba(247, 197, 46, 0.16);
    --focus: #5fb6e0;
    --focus-ring: 0 0 0 3px rgba(95, 182, 224, 0.5);
    --shadow-1: 0 6px 18px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 18px 55px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 28px 70px rgba(0, 0, 0, 0.6);
    --overlay: rgba(3, 8, 14, 0.62);
    --c1: #4a9fd6;
    --c2: #34b3ad;
    --c3: #f7c52e;
    --c4: #a78bfa;
  }
}

:root {
  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Typography */
  --font: "Heebo", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
  --font-mono: "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 180ms;

  /* Layout */
  --maxw: none;
}