/* =========================================================
   01 — DESIGN TOKENS
   The single source of truth. Every component reads from here.
   ========================================================= */

:root {
  /* Brand */
  --brand-500: #00aae7;
  --brand-600: oklch(0.65 0.16 232);
  --brand-700: oklch(0.55 0.17 235);
  --brand-100: oklch(0.95 0.04 230);
  --brand-50:  oklch(0.98 0.02 230);

  /* Verdict palette */
  --verdict-spam:    oklch(0.62 0.21 22);
  --verdict-spam-bg: oklch(0.96 0.04 22);
  --verdict-warn:    oklch(0.74 0.16 75);
  --verdict-warn-bg: oklch(0.97 0.05 80);
  --verdict-warn-ink: oklch(0.45 0.14 75);
  --verdict-safe:    oklch(0.62 0.13 165);
  --verdict-safe-bg: oklch(0.96 0.04 165);
  --verdict-mute:    oklch(0.55 0 0);
  --verdict-mute-bg: oklch(0.96 0 0);
  --verdict-ad:      oklch(0.7 0.13 295);
  --verdict-ad-bg:   oklch(0.95 0.05 295);

  /* Trust */
  --trust-ok:        var(--verdict-safe);
  --trust-suspect:   oklch(0.7 0.15 50);
  --trust-bad:       var(--verdict-spam);

  /* Neutrals */
  --bg:        oklch(0.99 0.005 230);
  --surface:   #ffffff;
  --surface-2: oklch(0.97 0.005 230);
  --surface-3: oklch(0.94 0.008 230);
  --border:    oklch(0.92 0.01 230);
  --border-strong: oklch(0.85 0.01 230);
  --text:      oklch(0.22 0.02 240);
  --text-2:    oklch(0.45 0.02 240);
  --text-3:    oklch(0.6 0.02 240);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 0 rgba(20,40,80,.04), 0 1px 2px rgba(20,40,80,.04);
  --shadow-md: 0 1px 0 rgba(20,40,80,.04), 0 8px 24px -12px rgba(20,40,80,.12);
  --shadow-lg: 0 1px 0 rgba(20,40,80,.04), 0 24px 48px -20px rgba(0,90,160,.18);
  --ring:      0 0 0 4px color-mix(in oklch, var(--brand-500) 25%, transparent);

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 56px;

  /* Density (Tweaks-controlled) */
  --dens: 1;
  --pad-card: calc(20px * var(--dens));
  --gap-card: calc(14px * var(--dens));
  --gap-row:  calc(10px * var(--dens));

  /* Type */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Animation */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.5,0,.2,1);

  /* Layout */
  --topbar-h: 64px;
  --container: 1180px;

  /* Breakpoints (informational; for container queries) */
  --bp-sm: 640px;
  --bp-md: 920px;
  --bp-lg: 1180px;
}

[data-theme="dark"] {
  --bg:        oklch(0.18 0.01 240);
  --surface:   oklch(0.22 0.012 240);
  --surface-2: oklch(0.26 0.013 240);
  --surface-3: oklch(0.30 0.014 240);
  --border:    oklch(0.32 0.015 240);
  --border-strong: oklch(0.42 0.02 240);
  --text:      oklch(0.96 0.005 240);
  --text-2:    oklch(0.78 0.01 240);
  --text-3:    oklch(0.62 0.015 240);

  --brand-100: oklch(0.32 0.05 230);
  --brand-50:  oklch(0.26 0.04 230);

  --verdict-spam-bg: oklch(0.32 0.07 22);
  --verdict-warn-bg: oklch(0.32 0.06 75);
  --verdict-safe-bg: oklch(0.30 0.05 165);
  --verdict-mute-bg: oklch(0.30 0.005 240);
  --verdict-ad-bg:   oklch(0.30 0.06 295);
  --verdict-warn-ink: oklch(0.85 0.12 75);

  --shadow-sm: 0 1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 1px 0 rgba(0,0,0,.2), 0 12px 30px -16px rgba(0,0,0,.5);
  --shadow-lg: 0 1px 0 rgba(0,0,0,.2), 0 24px 60px -24px rgba(0,0,0,.55);
  --ring:      0 0 0 4px color-mix(in oklch, var(--brand-500) 35%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}