/* ==========================================================================
   ComeGame — Design Tokens  ("Electric Neon Royale")
   comecome.vip · OptiRank Studio
   ========================================================================== */

:root {
  /* ---- Core palette ---- */
  --color-bg:             #0A0A1A;
  --color-bg-alt:         #10102A;
  --color-surface:        #15152E;
  --color-surface-2:      #1C1C3D;
  --color-surface-glass:  rgba(28, 28, 61, 0.6);
  --color-surface-glass-2: rgba(21, 21, 46, 0.75);

  --color-electric-blue:  #2E5EFF;
  --color-electric-blue-bright: #4D7FFF;
  --color-royal-purple:   #7B2FF7;
  --color-royal-purple-bright: #9B4DFF;
  --color-white:          #FFFFFF;
  --color-off-white:      #E8E8FF;

  --color-text-primary:   #FFFFFF;
  --color-text-secondary: #B8B8DC;
  --color-text-muted:     #6E6E96;

  --color-border:         rgba(123, 47, 247, 0.25);
  --color-border-bright:  rgba(46, 94, 255, 0.5);
  --color-border-soft:    rgba(232, 232, 255, 0.08);

  --color-success:        #00E6A0;
  --color-error:          #FF4D6D;
  --color-gold-accent:    #FFC94D;   /* reserved for ₹ bonus figures only */

  /* ---- Signature gradients ---- */
  --gradient-primary:     linear-gradient(135deg, #2E5EFF 0%, #7B2FF7 100%);
  --gradient-primary-hover: linear-gradient(135deg, #4D7FFF 0%, #9B4DFF 100%);
  --gradient-glow:        radial-gradient(circle, rgba(123,47,247,0.35) 0%, rgba(46,94,255,0.15) 40%, transparent 70%);
  --gradient-hero-mesh:   radial-gradient(at 20% 20%, rgba(46,94,255,0.25) 0px, transparent 50%),
                          radial-gradient(at 80% 0%, rgba(123,47,247,0.3) 0px, transparent 50%),
                          radial-gradient(at 50% 100%, rgba(46,94,255,0.2) 0px, transparent 50%);
  --gradient-card-border: linear-gradient(135deg, rgba(46,94,255,0.6), rgba(123,47,247,0.6));
  --gradient-text:        linear-gradient(120deg, #FFFFFF 0%, #B8CBFF 40%, #C9A6FF 100%);
  --gradient-surface:     linear-gradient(160deg, rgba(46,94,255,0.10) 0%, rgba(123,47,247,0.06) 100%);

  /* ---- Shadows / glow ---- */
  --shadow-card:          0 4px 24px rgba(0,0,0,0.4);
  --shadow-card-lg:       0 18px 50px rgba(0,0,0,0.55);
  --shadow-glow-blue:     0 0 30px rgba(46,94,255,0.35);
  --shadow-glow-purple:   0 0 30px rgba(123,47,247,0.35);
  --shadow-glow-strong:   0 0 50px rgba(123,47,247,0.5), 0 0 20px rgba(46,94,255,0.4);

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

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  clamp(1.5rem, 1.1rem + 1.8vw, 2rem);
  --fs-3xl:  clamp(1.85rem, 1.3rem + 2.6vw, 2.75rem);
  --fs-4xl:  clamp(2.25rem, 1.4rem + 4.2vw, 4rem);

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ---- Spacing ---- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-narrow: 860px;
  --gutter: 1.25rem;          /* generous breathing room left + right */
  --header-h: 68px;

  /* ---- z-index ---- */
  --z-bg: 0;
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;

  /* ---- Motion ---- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms cubic-bezier(.4, 0, .2, 1);
  --transition-slow:   450ms cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 2.5rem;
    --header-h: 76px;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 4.5rem;   /* extra blank space on the left + right on desktop */
    --header-h: 82px;
  }
}

@media (min-width: 1500px) {
  :root { --gutter: 6rem; }
}