/* PlayVerso Next — Design tokens
 * Playful, not childish. High legibility, strong color, big touch targets.
 * Single source of truth for the visual language. */
:root {
  /* Brand */
  --pv-brand:        #6c5ce7;   /* electric violet */
  --pv-brand-2:      #00d2d3;   /* aqua */
  --pv-accent:       #ffd166;   /* warm gold (perfect/score) */
  --pv-danger:       #ff5a6e;   /* fail / game over */
  --pv-success:      #2ecc71;

  /* Surfaces (dark-first, works day and night) */
  --pv-bg:           #0e0f1a;
  --pv-bg-2:         #171a2b;
  --pv-surface:      #1e2236;
  --pv-surface-2:    #262c45;
  --pv-line:         #333a5c;

  /* Text */
  --pv-text:         #f4f6ff;
  --pv-text-dim:     #aab0cf;
  --pv-text-mut:     #7a819f;
  --pv-on-brand:     #ffffff;

  /* Gradients */
  --pv-grad-brand:   linear-gradient(135deg, #6c5ce7 0%, #00d2d3 100%);
  --pv-grad-warm:    linear-gradient(135deg, #ffd166 0%, #ff8a5c 100%);
  --pv-grad-surface: linear-gradient(180deg, #1e2236 0%, #171a2b 100%);

  /* Spacing scale (4pt) */
  --pv-1: 4px;  --pv-2: 8px;  --pv-3: 12px; --pv-4: 16px;
  --pv-5: 24px; --pv-6: 32px; --pv-7: 48px; --pv-8: 64px;

  /* Radius */
  --pv-r-sm: 8px; --pv-r-md: 14px; --pv-r-lg: 22px; --pv-r-pill: 999px;

  /* Type */
  --pv-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pv-fs-xs: 0.8125rem; --pv-fs-sm: 0.9375rem; --pv-fs-md: 1.0625rem;
  --pv-fs-lg: 1.375rem;  --pv-fs-xl: 2rem;      --pv-fs-2xl: 2.75rem;
  --pv-fs-3xl: clamp(2.5rem, 9vw, 4.25rem);

  /* Elevation */
  --pv-shadow-1: 0 2px 8px rgba(0,0,0,.28);
  --pv-shadow-2: 0 8px 28px rgba(0,0,0,.38);
  --pv-glow-brand: 0 0 0 1px rgba(108,92,231,.5), 0 10px 30px rgba(108,92,231,.35);

  /* Motion — feel lives here */
  --pv-ease-out: cubic-bezier(.16,1,.3,1);       /* snappy settle */
  --pv-ease-back: cubic-bezier(.34,1.56,.64,1);  /* overshoot pop */
  --pv-t-fast: 120ms; --pv-t-med: 220ms; --pv-t-slow: 380ms;

  /* Layout */
  --pv-maxw: 960px;
  --pv-tap: 48px; /* min touch target */
}

@media (prefers-reduced-motion: reduce) {
  :root { --pv-t-fast: 0ms; --pv-t-med: 0ms; --pv-t-slow: 0ms; }
}