/* ============================================================
   Design tokens — single source of truth for the forge palette,
   type stack, motion timing, and shadow recipes.
   ============================================================ */
:root {
  /* Surface scale (darkest → brightest) */
  --bg: #0A0A0A;
  --bg-soft: #0E0E0E;
  --surface: #141414;
  --surface-2: #1A1A1A;
  --surface-3: #222222;

  /* Border scale */
  --border: #262626;
  --border-2: #333333;
  --border-3: #404040;

  /* Text scale */
  --text: #F5F5F5;
  --text-2: #D4D4D4;
  --text-dim: #9A9A9A;
  --text-muted: #5C5C5C;

  /* Accent — forge orange */
  --accent: #FF6B1F;
  --accent-bright: #FF8A4C;
  --accent-deep: #B8410C;
  --accent-soft: rgba(255,107,31,.10);
  --accent-ghost: rgba(255,107,31,.05);

  /* Semantic */
  --amber: #F5A623;
  --crimson: #DC2626;
  --green: #65A30D;

  /* Type stack */
  --display: 'Anton', 'Impact', sans-serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* Motion + interaction */
  --ease: cubic-bezier(.2,.7,.3,1);
  --anim-slide: 280ms;
  --shadow-accent: 0 10px 32px -12px rgba(255,107,31,0.55);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* Selection — match the forge palette instead of OS blue */
::selection {
  background: var(--accent);
  color: var(--bg);
  text-shadow: none;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}