/* =====================================================================
   LanceyPants — design tokens (single source of truth)
   Bold flat-vector arcade with subtle neon accents on dark. The same palette
   tokens are mirrored in the SVG art (see /assets/svg/index.json -> palette)
   so UI chrome and artwork stay cohesive across light/dark.
   ===================================================================== */

:root {
  /* Brand accents — also used as per-game accent colours. */
  --c-teal:    #5eead4;
  --c-pink:    #f0abfc;
  --c-amber:   #fcd34d;
  --c-blue:    #93c5fd;

  /* Semantic — distinguished by SHAPE too (colourblind-safe), not colour alone. */
  --c-valid:   #4ade80;
  --c-invalid: #f87171;
  --c-warn:    #fbbf24;
  --c-gold:    #fcd34d;
  --c-silver:  #cbd5e1;
  --c-bronze:  #d8975f;

  /* Type scale + radii + motion (shared). */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --stroke:    2.5px;            /* consistent SVG-ish stroke weight in UI */
  --shadow:    0 10px 30px rgba(0,0,0,.35);
  --ring:      0 0 0 3px color-mix(in srgb, var(--accent, var(--c-teal)) 55%, transparent);
  --maxw:      1120px;
  --ease:      cubic-bezier(.2,.7,.2,1);
  --t-fast:    120ms;
  --t:         220ms;

  --accent:    var(--c-teal);   /* overridden per game/card via inline style */
}

/* ---- Dark (default) ---- */
:root, [data-theme="dark"] {
  --bg:        #0b0f1a;
  --bg-grad:   radial-gradient(1200px 600px at 70% -10%, #182142 0%, #0b0f1a 60%);
  --surface:   #131a2b;
  --surface-2: #1c2740;
  --border:    #2a3552;
  --text:      #e8ecf6;
  --muted:     #9aa6c2;
  --on-accent: #07111a;
  --shadow:    0 10px 30px rgba(0,0,0,.45);
}

/* ---- Light ---- */
[data-theme="light"] {
  --bg:        #f5f7fc;
  --bg-grad:   radial-gradient(1200px 600px at 70% -10%, #e8edfb 0%, #f5f7fc 60%);
  --surface:   #ffffff;
  --surface-2: #eef2fb;
  --border:    #d7deef;
  --text:      #131a2b;
  --muted:     #586079;
  --on-accent: #07111a;
  --shadow:    0 10px 30px rgba(40,52,90,.14);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}