/* ============================================================
   DragPlus — Design System Tokens
   Dark motorsport theme. Racing orange (#FF4500) + speed gold (#FFD700).
   4px base grid. Sharp mechanical radii.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* ── Fonts ────────────────────────────────────────────────── */
  --font-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Ink / surface scale ──────────────────────────────────── */
  --ink-900: #0D0D0D;
  --ink-850: #121212;
  --ink-800: #181818;
  --ink-750: #1E1E1E;
  --ink-700: #262626;
  --ink-600: #333333;
  --ink-500: #4D4D4D;

  /* ── Neutral text ramp ────────────────────────────────────── */
  --smoke-400: #7A7A7A;
  --smoke-300: #9C9C9C;
  --smoke-200: #C4C4C4;
  --paper-100: #E8E8E8;
  --paper-50:  #F5F5F5;
  --white:     #FFFFFF;

  /* ── Racing orange ────────────────────────────────────────── */
  --orange-700: #C23400;
  --orange-600: #E63E00;
  --orange-500: #FF4500;
  --orange-400: #FF6A33;
  --orange-300: #FF8F5C;
  --orange-soft: rgba(255, 69, 0, 0.14);
  --orange-glow: rgba(255, 69, 0, 0.45);

  /* ── Speed gold ───────────────────────────────────────────── */
  --gold-600: #E6C200;
  --gold-500: #FFD700;
  --gold-400: #FFE24D;
  --gold-soft: rgba(255, 215, 0, 0.14);
  --gold-glow: rgba(255, 215, 0, 0.40);

  /* ── Status ───────────────────────────────────────────────── */
  --green-500: #2FBF5B;
  --green-soft: rgba(47, 191, 91, 0.14);
  --red-500:   #F0433A;
  --red-soft:  rgba(240, 67, 58, 0.14);
  --blue-500:  #3B9EFF;

  /* ── Semantic aliases ─────────────────────────────────────── */
  --bg-base:        var(--ink-900);
  --bg-elevated:    var(--ink-850);
  --surface-card:   var(--ink-800);
  --surface-raised: var(--ink-750);
  --surface-sunken: var(--ink-850);

  --text-primary:   var(--paper-50);
  --text-secondary: var(--smoke-300);
  --text-muted:     var(--smoke-400);
  --text-inverse:   var(--ink-900);
  --text-on-accent: var(--white);

  --accent:           var(--orange-500);
  --accent-hover:     var(--orange-600);
  --accent-strong:    var(--orange-700);
  --accent-soft:      var(--orange-soft);
  --accent-gold:      var(--gold-500);
  --accent-gold-soft: var(--gold-soft);

  --border:         var(--ink-600);
  --border-subtle:  var(--ink-700);
  --border-strong:  var(--ink-500);
  --border-accent:  var(--orange-500);

  --cta-bg:         var(--orange-500);
  --cta-bg-hover:   var(--orange-600);
  --cta-text:       var(--white);

  --focus-ring:     var(--orange-400);
  --pro:            var(--green-500);
  --con:            var(--red-500);

  /* ── Type scale ───────────────────────────────────────────── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;

  --display-xs:  1.75rem;
  --display-sm:  2.5rem;
  --display-md:  3.5rem;
  --display-lg:  5rem;
  --display-xl:  clamp(3.5rem, 9vw, 7rem);
  --display-2xl: 9.5rem;

  /* ── Weights ──────────────────────────────────────────────── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ── Line heights ─────────────────────────────────────────── */
  --leading-none:   0.92;
  --leading-tight:  1.1;
  --leading-snug:   1.35;
  --leading-normal: 1.6;

  /* ── Letter spacing ───────────────────────────────────────── */
  --tracking-display: 0.01em;
  --tracking-eyebrow: 0.18em;
  --tracking-wide:    0.04em;
  --tracking-normal:  0;
  --tracking-tight:   -0.01em;

  /* ── Spacing (4px base grid) ─────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Radii — sharp & mechanical ─────────────────────────── */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --radius-pill: 999px;

  /* ── Layout ───────────────────────────────────────────────── */
  --container-max:  1200px;
  --container-wide: 1320px;
  --gutter:         var(--space-6);
  --nav-height:     72px;

  /* ── Control sizes ────────────────────────────────────────── */
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 56px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.6);
  --shadow-card:    0 4px 16px rgba(0,0,0,0.55);
  --shadow-raised:  0 12px 34px rgba(0,0,0,0.65);
  --shadow-overlay: 0 24px 60px rgba(0,0,0,0.75);

  /* ── Glows ────────────────────────────────────────────────── */
  --glow-orange:      0 0 0 1px rgba(255,69,0,0.5), 0 8px 28px rgba(255,69,0,0.35);
  --glow-orange-soft: 0 6px 22px rgba(255,69,0,0.28);
  --glow-gold:        0 0 0 1px rgba(255,215,0,0.45), 0 8px 26px rgba(255,215,0,0.30);
  --glow-focus:       0 0 0 3px rgba(255,106,51,0.45);

  /* ── Motifs ───────────────────────────────────────────────── */
  --stripe-hazard: repeating-linear-gradient(
    -45deg,
    var(--ink-800) 0 14px,
    var(--ink-850) 14px 28px
  );
  --texture-grid:
    linear-gradient(var(--ink-700) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--ink-700) 1px, transparent 1px) 0 0 / 28px 28px;
  --streak-orange: linear-gradient(90deg, transparent, rgba(255,69,0,0.45) 60%, transparent);
  --finish-checker:
    repeating-conic-gradient(var(--paper-50) 0% 25%, var(--ink-900) 0% 50%) 0 0 / 16px 16px;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:   cubic-bezier(0.22, 1.2, 0.36, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}