/* ==========================================================================
   ComeGame — Design Tokens  ("Clean Fintech — Dark")
   come-game.vip · OptiRank Studio

   Minimal, calm, high-trust. Near-monochrome slate with a single confident
   blue. No glows, no neon, no mesh gradients — structure comes from hairline
   rules, generous whitespace and type weight.
   ========================================================================== */

:root {
  /* ---- Core palette — slate, dark ground ---- */
  --color-bg:             #0B1120;
  --color-bg-alt:         #111A2C;
  --color-surface:        #141E33;
  --color-surface-2:      #1B2740;
  --color-surface-glass:  #141E33;
  --color-surface-glass-2: rgba(20, 30, 51, 0.92);

  /* Single accent. The "-bright" names are kept for compatibility with
     existing rules and now mean "lighter", the correct hover on dark. */
  --color-electric-blue:  #60A5FA;   /* accent as text/icon on the dark ground */
  --color-electric-blue-bright: #93B8FC;  /* "-bright" = lighter hover on dark */
  --color-royal-purple:   #60A5FA;
  --color-royal-purple-bright: #93B8FC;
  --color-white:          #FFFFFF;
  --color-off-white:      #E9EEF7;   /* emphasised text on dark surfaces */

  --color-text-primary:   #E9EEF7;
  --color-text-secondary: #AAB7CC;
  --color-text-muted:     #8A97AE;

  --color-border:         #26324B;
  --color-border-bright:  #3A4761;
  --color-border-soft:    #1D283E;

  --color-success:        #34D399;
  --color-error:          #FB7185;
  --color-gold-accent:    #FBBF24;   /* reserved for ₹ bonus figures only */

  /* ---- "Gradients" — deliberately flat.
     Kept as gradient tokens so every existing `background: var(--gradient-*)`
     rule flattens to a solid without being rewritten. ---- */
  --gradient-primary:     linear-gradient(#2563EB, #2563EB);
  --gradient-primary-hover: linear-gradient(#1D4ED8, #1D4ED8);
  --gradient-glow:        none;
  --gradient-hero-mesh:   none;
  --gradient-card-border: linear-gradient(#26324B, #26324B);
  --gradient-text:        linear-gradient(#E9EEF7, #E9EEF7);
  --gradient-surface:     linear-gradient(#141E33, #141E33);

  /* ---- Elevation — hairlines do the work; shadows stay restrained ---- */
  --shadow-card:          0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-card-lg:       0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-glow-blue:     0 0 0 0 transparent;
  --shadow-glow-purple:   0 0 0 0 transparent;
  --shadow-glow-strong:   0 0 0 0 transparent;

  /* ---- Typography — one family, weight does the differentiating ---- */
  --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.4375rem;
  --fs-2xl:  clamp(1.5rem, 1.2rem + 1.3vw, 1.875rem);
  --fs-3xl:  clamp(1.75rem, 1.35rem + 1.9vw, 2.375rem);
  --fs-4xl:  clamp(2.125rem, 1.5rem + 2.9vw, 3.25rem);

  /* ---- Radius — near-square, technical ---- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --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 — narrower measure, more air ---- */
  --container-max: 1120px;
  --container-narrow: 720px;
  --gutter: 1.25rem;
  --header-h: 64px;

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

  /* ---- Motion — shorter, no bounce ---- */
  --transition-fast:   120ms ease;
  --transition-normal: 180ms cubic-bezier(.4, 0, .2, 1);
  --transition-slow:   260ms cubic-bezier(.4, 0, .2, 1);
}

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

@media (min-width: 1200px) {
  :root {
    --gutter: 4rem;
    --header-h: 72px;
  }
}

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