/* ============================================
   On+ Play — DESIGN TOKENS
   Single source of truth for color, type, motion
   ============================================ */
:root {
  /* ── Brand ─────────────────────────────── */
  --brand-purple-900: #3D1652;
  --brand-purple-800: #4A1E64;
  --brand-purple-700: #6B2D8F;   /* primary */
  --brand-purple-600: #8B3FB8;
  --brand-purple-500: #A359D1;
  --brand-purple-400: #C480E8;

  --brand-orange-700: #D6740F;
  --brand-orange-600: #FF8A1C;   /* primary */
  --brand-orange-500: #FFA84F;
  --brand-orange-400: #FFC07A;

  --brand-gradient: linear-gradient(135deg, #6B2D8F 0%, #FF8A1C 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(107,45,143,.85) 0%, rgba(255,138,28,.85) 100%);
  --brand-gradient-vivid: linear-gradient(135deg, #8B3FB8 0%, #FF8A1C 100%);

  /* ── Surface ──────────────────────────── */
  --bg-deep:       #08080F;
  --bg-base:       #11111A;
  --bg-raised:     #1A1A26;
  --bg-card:       #1F1F2C;
  --bg-card-hover: #28283A;

  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);
  --border-brand:   rgba(163,89,209,0.55);

  /* ── Glass ────────────────────────────── */
  --glass-bg:     rgba(20,20,30,0.62);
  --glass-bg-hi:  rgba(28,22,40,0.78);
  --glass-blur:   blur(22px) saturate(150%);
  --glass-border: rgba(255,255,255,0.09);

  /* ── Text ─────────────────────────────── */
  --text-primary:   #FFFFFF;
  --text-secondary: #C9C9D6;
  --text-tertiary:  #8C8CA0;
  --text-muted:     #5C5C70;
  --text-on-brand:  #FFFFFF;

  /* ── Type ─────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ── Spacing ──────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radius ───────────────────────────── */
  --radius-sm:  6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ── Shadow / Glow ────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.55);
  --shadow-xl: 0 32px 80px rgba(0,0,0,.7);
  --glow-purple: 0 0 32px rgba(107,45,143,.45);
  --glow-orange: 0 0 32px rgba(255,138,28,.40);
  --glow-brand:  0 8px 32px rgba(139,63,184,.35), 0 4px 16px rgba(255,138,28,.20);

  /* ── Motion ───────────────────────────── */
  --ease-out:    cubic-bezier(.2,.6,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --dur-xslow: 700ms;
}

/* High-contrast support hook (future) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-xslow: 1ms;
  }
}