/* ============================================================================
   copyleast — design tokens
   Source of truth mirror of tailwind.config.ts + docs/design.md § 2.
   Everything downstream references these custom properties — no raw hex in
   component or page CSS.
   ========================================================================== */

:root {
  /* ── Brand (orange — the scalpel) ───────────────────────────────────────── */
  --brand-50:  #FFF4EC;
  --brand-100: #FFE4D1;
  --brand-200: #FFC79E;
  --brand-300: #FFA04D; /* logo gradient — light stop */
  --brand-400: #FF7A1F; /* hover for brand-500 on light surfaces */
  --brand-500: #FF5E00; /* PRIMARY */
  --brand-600: #E35700; /* logo gradient — dark stop; pressed */
  --brand-700: #B84600; /* brand text on light bg (AA-safe < 24px) */
  --brand-800: #8A3400;
  --brand-900: #5C2300;

  /* ── Neutrals ───────────────────────────────────────────────────────────── */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAFA;
  --neutral-100: #F5F5F5; /* page background */
  --neutral-200: #EAEAEA;
  --neutral-300: #D4D4D4;
  --neutral-400: #969696; /* muted text, uncertainty */
  --neutral-500: #6E6E6E;
  --neutral-600: #525252;
  --neutral-700: #3A3A3A;
  --neutral-800: #292929;
  --neutral-900: #141414;
  --neutral-950: #0A0A0A; /* headings, primary body, evidence surface */

  /* ── Semantic states (grading — grey is first-class) ────────────────────── */
  --verified-fg: #0E7C5A;  --verified-bg: #E8F5F0;  --verified-border: #A8DCC7;
  --error-fg:    #B3261E;  --error-bg:    #FDECEA;  --error-border:    #F3B7B2;
  --uncertain-fg:#6E6E6E;  --uncertain-bg:#F5F5F5;  --uncertain-border:#EAEAEA;

  /* ── Fonts ──────────────────────────────────────────────────────────────── */
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-mono:  "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ── Spacing scale (4px base) ───────────────────────────────────────────── */
  --sp-1: 0.25rem;  /* 4  */
  --sp-2: 0.5rem;   /* 8  */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.25rem;  /* 20 */
  --sp-6: 1.5rem;   /* 24 */
  --sp-8: 2rem;     /* 32 */
  --sp-10: 2.5rem;  /* 40 */
  --sp-12: 3rem;    /* 48 */
  --sp-14: 3.5rem;  /* 56 */
  --sp-16: 4rem;    /* 64 */
  --sp-18: 4.5rem;  /* 72 */
  --sp-20: 5rem;    /* 80  — section rhythm, mobile */
  --sp-24: 6rem;    /* 96 */
  --sp-32: 8rem;    /* 128 — section rhythm, desktop */

  /* ── Layout widths ──────────────────────────────────────────────────────── */
  --max-container: 1200px;
  --max-prose: 68ch;
  --max-ui: 60ch;

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 12px; /* buttons, inputs, chips */
  --radius-lg: 16px; /* cards */
  --radius-xl: 24px; /* large panels */

  /* Chamfer — 45° cut corners (evidence geometry only) */
  --chamfer: 10px;
  --chamfer-lg: 16px;

  /* ── Shadows ────────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-sm: 0 2px 8px rgba(10, 10, 10, 0.05);
  --shadow-md: 0 8px 24px rgba(10, 10, 10, 0.07);
  --shadow-lg: 0 20px 48px rgba(10, 10, 10, 0.09);
  --shadow-brand: 0 8px 24px rgba(255, 94, 0, 0.24); /* primary CTA hover only */

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); /* house curve */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);  /* entrances — ease-out only */
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  --dur-instant: 80ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  /* ── z-index ────────────────────────────────────────────────────────────── */
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}