/* tokens.css — design tokens for Quantum Chess
   ------------------------------------------------
   Cinematic dark palette: deep-space indigo, cyan
   "observed" accents, violet "superposed" accents. */

:root {
  /* Surfaces */
  --bg:           #07080c;
  --bg-2:         #0b0d14;
  --panel:        rgba(22, 24, 34, 0.72);
  --panel-2:      rgba(30, 33, 46, 0.82);
  --panel-solid:  #161822;
  --border:       rgba(255, 255, 255, 0.07);
  --border-strong:rgba(255, 255, 255, 0.14);
  --border-hot:   rgba(122, 215, 255, 0.35);

  /* Foreground */
  --fg:       #ecebe2;
  --fg-dim:   #a8a699;
  --fg-muted: #6a6a63;

  /* Accents */
  --cyan:     #7ad7ff;
  --cyan-2:   #5ab7ec;
  --cyan-dim: #4fa7c9;
  --violet:   #b06cff;   /* EXCLUSIVELY for ghosts */
  --violet-2: #8a4de0;
  --red:      #ff6a6a;
  --green:    #6bd49a;
  --amber:    #f0c674;

  /* Signature gradients */
  --grad-hero:         linear-gradient(135deg, #7ad7ff 0%, #b06cff 100%);
  --grad-hero-soft:    linear-gradient(135deg, rgba(122,215,255,0.14), rgba(176,108,255,0.14));
  --grad-panel:        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  --grad-button:       linear-gradient(180deg, #9ae3ff 0%, #5ab7ec 100%);
  --grad-button-hover: linear-gradient(180deg, #b6ecff 0%, #7ac9ff 100%);

  /* Board (unchanged per user request) */
  --sq-light:  #d8cfbc;
  --sq-dark:   #51433a;
  --sq-select: rgba(122, 215, 255, 0.55);
  --sq-legal:  rgba(122, 215, 255, 0.30);
  --sq-check:  rgba(255, 106, 106, 0.55);
  --ghost-halo: rgba(176, 108, 255, 0.30);

  /* Spacing (4px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-16: 64px; --s-20: 80px;

  /* Type */
  --font-display: 'Fraunces', 'Playfair Display', 'Georgia', serif;
  --font-body:    'Inter Tight', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  /* Radii */
  --r-1: 6px; --r-2: 10px; --r-3: 16px; --r-4: 22px; --r-pill: 999px;

  /* Shadows & glows */
  --sh-1: 0 1px 2px rgba(0,0,0,0.4);
  --sh-2: 0 8px 32px rgba(0,0,0,0.55);
  --sh-3: 0 24px 80px rgba(0,0,0,0.65);
  --glow-cyan:   0 0 32px rgba(122,215,255,0.28);
  --glow-violet: 0 0 32px rgba(176,108,255,0.28);
  --ring-cyan:   0 0 0 3px rgba(122,215,255,0.22);
  --ring-violet: 0 0 0 3px rgba(176,108,255,0.22);

  /* Motion */
  --ease:     cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast:   0.14s;
  --t-med:    0.28s;
  --t-slow:   0.6s;
}

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