/* ============================================================
   DESIGN TOKENS — single source of truth
   ============================================================ */

:root {
  /* Brand */
  --red:        #C8002F;
  --red-600:    #a8002a;
  --red-700:    #8a0020;
  --red-glow:   rgba(200, 0, 47, 0.12);
  --red-tint:   #fff5f7;

  /* Neutrals — light mode */
  --black:      #0A0A0A;
  --ink:        #141414;
  --slate-900:  #1f1f1f;
  --slate-700:  #3a3a3a;
  --slate-500:  #6b6b6b;
  --slate-400:  #8a8a8a;
  --slate-300:  #c2c2c2;
  --slate-200:  #e6e6e6;
  --slate-100:  #f3f3f3;
  --paper:      #fafafa;
  --white:      #ffffff;

  /* Semantic — light */
  --bg:         var(--white);
  --bg-alt:     var(--paper);
  --bg-card:    var(--white);
  --bg-input:   var(--paper);
  --bg-elev:    var(--white);
  --bg-dark:    var(--black);

  --text:       var(--ink);
  --text-mid:   var(--slate-500);
  --text-soft:  var(--slate-400);
  --text-on-dark: var(--white);
  --text-on-dark-mid: var(--slate-300);

  --border:     var(--slate-200);
  --border-strong: var(--slate-300);

  --success:    #065f46;
  --success-bg: #d1fae5;
  --warning:    #92400e;
  --warning-bg: #fef3c7;
  --error:      var(--red);
  --error-bg:   #fee2e2;

  /* Type */
  --f-display:  'Bebas Neue', 'Impact', sans-serif;
  --f-body:     'Inter Tight', system-ui, -apple-system, sans-serif;
  --f-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — fluid */
  --fs-xs:    clamp(11px, 0.7rem + 0.1vw, 12px);
  --fs-sm:    clamp(12px, 0.75rem + 0.15vw, 13px);
  --fs-base:  clamp(14px, 0.85rem + 0.2vw, 15px);
  --fs-md:    clamp(15px, 0.9rem + 0.25vw, 17px);
  --fs-lg:    clamp(18px, 1rem + 0.5vw, 22px);
  --fs-xl:    clamp(22px, 1.2rem + 1vw, 28px);
  --fs-2xl:   clamp(28px, 1.5rem + 1.5vw, 36px);
  --fs-3xl:   clamp(36px, 2rem + 2vw, 48px);
  --fs-display: clamp(56px, 4vw + 1rem, 100px);

  /* Spacing scale (8pt-based) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;
  --sp-11: 96px;
  --sp-12: 128px;

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

  /* Shadows */
  --sh-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --sh-sm:  0 2px 8px rgba(0, 0, 0, 0.06);
  --sh-md:  0 6px 20px rgba(0, 0, 0, 0.08);
  --sh-lg:  0 14px 36px rgba(0, 0, 0, 0.12);
  --sh-xl:  0 24px 64px rgba(0, 0, 0, 0.18);
  --sh-red: 0 8px 28px rgba(200, 0, 47, 0.28);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* Layout */
  --container: 1340px;
  --container-narrow: 880px;
  --header-h: 68px;
  --z-header: 100;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-chat: 800;

  /* Focus ring */
  --focus-ring: 0 0 0 3px var(--red-glow);
  --focus-outline: 2px solid var(--red);

  /* Effects */
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ── Dark mode ─────────────────────────────────────── */
[data-theme="dark"] {
  --bg:         #0d0d0d;
  --bg-alt:     #161616;
  --bg-card:    #1a1a1a;
  --bg-input:   #222222;
  --bg-elev:    #242424;

  --text:       #f0f0f0;
  --text-mid:   #a8a8a8;
  --text-soft:  #777777;

  --border:     #2a2a2a;
  --border-strong: #3a3a3a;

  --error-bg:   #3a0d12;
  --success-bg: #0a2e22;

  --sh-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-sm:  0 2px 8px rgba(0, 0, 0, 0.5);
  --sh-md:  0 6px 20px rgba(0, 0, 0, 0.6);
  --sh-lg:  0 14px 36px rgba(0, 0, 0, 0.7);
  --sh-xl:  0 24px 64px rgba(0, 0, 0, 0.8);
}

/* Auto dark mode — only when user hasn't picked manually */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #0d0d0d;
    --bg-alt:     #161616;
    --bg-card:    #1a1a1a;
    --bg-input:   #222222;
    --bg-elev:    #242424;
    --text:       #f0f0f0;
    --text-mid:   #a8a8a8;
    --text-soft:  #777777;
    --border:     #2a2a2a;
    --border-strong: #3a3a3a;
    --error-bg:   #3a0d12;
    --success-bg: #0a2e22;
  }
}

/* ── Reduced motion ─────────────────────────────────── */
@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;
  }
}