/* ==========================================================================
   ComeGame App — comeapps.net
   tokens.css — design tokens (light mode, purple-led)
   ========================================================================== */

:root {
  /* ---------- Base surfaces ---------- */
  --color-bg: #fcfbff;
  --color-bg-alt: #f5f0ff;
  --color-surface: #ffffff;
  --color-surface-2: #f8f5ff;
  --color-surface-3: #f1ebff;

  /* ---------- Brand ---------- */
  --color-royal-purple: #7b2ff7;
  --color-royal-purple-2: #9b4dff;
  --color-royal-purple-3: #5f1fd0;
  --color-electric-blue: #2e5cff;
  --color-electric-blue-2: #4b7bff;

  /* ---------- Gradients (purple-led build) ---------- */
  --gradient-primary: linear-gradient(135deg, #7b2ff7 0%, #2e5cff 100%);
  --gradient-primary-rev: linear-gradient(135deg, #2e5cff 0%, #7b2ff7 100%);
  --gradient-deep: linear-gradient(135deg, #4a12ad 0%, #7b2ff7 45%, #2e5cff 100%);
  --gradient-hero: linear-gradient(120deg, #f3ebff 0%, #eaf0ff 55%, #fcfbff 100%);
  --gradient-glow: radial-gradient(circle, rgba(46, 92, 255, 0.22) 0%, transparent 70%);
  --gradient-glow-purple: radial-gradient(circle, rgba(123, 47, 247, 0.26) 0%, transparent 70%);
  --gradient-gold: linear-gradient(135deg, #ffb020 0%, #ff7a45 100%);
  --gradient-sheen: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.55) 48%, transparent 76%);

  /* ---------- Text ---------- */
  --color-text-primary: #17153a;
  --color-text-secondary: #55536e;
  --color-text-muted: #7d7b98;
  --color-text-inverse: #ffffff;

  /* ---------- Borders ---------- */
  --color-border: #e9e4fa;
  --color-border-strong: #d8cff2;

  /* ---------- Status ---------- */
  --color-success: #0f9e6a;
  --color-error: #e11d48;
  --color-gold: #b57400;
  --color-gold-bright: #ffb020;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(60, 20, 130, 0.06);
  --shadow-card: 0 4px 20px rgba(60, 20, 130, 0.08);
  --shadow-card-hover: 0 14px 44px rgba(60, 20, 130, 0.18);
  --shadow-lift: 0 24px 70px rgba(60, 20, 130, 0.22);
  --shadow-glow-purple: 0 0 32px rgba(123, 47, 247, 0.38);
  --shadow-glow-blue: 0 0 32px rgba(46, 92, 255, 0.32);
  --shadow-btn: 0 10px 26px rgba(123, 47, 247, 0.34);

  /* ---------- Typography ---------- */
  --font-display: 'Sora', 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'DM Sans', 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.3rem, 1.35rem + 3.6vw, 4rem);
  --fs-h1: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.65rem, 1.2rem + 1.9vw, 2.6rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  --fs-h4: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --fs-lead: clamp(1.02rem, 0.96rem + 0.4vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-full: 9999px;

  /* ---------- Layout ----------
     Gutter is deliberately generous so the page always breathes on the
     left/right edges; container-max keeps line length readable on wide screens. */
  --container-max: 1200px;
  --gutter: clamp(1.25rem, 5.2vw, 4.75rem);
  --section-pad: clamp(3.75rem, 7vw, 7rem);
  --grid-gap: clamp(1rem, 2.2vw, 1.75rem);
  --header-h: 74px;

  /* ---------- Animated background ---------- */
  --aurora-1: rgba(123, 47, 247, 0.30);
  --aurora-2: rgba(46, 92, 255, 0.26);
  --aurora-3: rgba(255, 176, 32, 0.20);
  --aurora-4: rgba(155, 77, 255, 0.24);
  --grid-line: rgba(123, 47, 247, 0.055);

  /* ---------- Motion ---------- */
  --transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---------- Z-index scale ---------- */
  --z-blob: 0;
  --z-content: 2;
  --z-header: 900;
  --z-drawer: 950;
  --z-overlay: 1000;
}