/* ==========================================================================
   ComeGame — Design Tokens  ("Clean Fintech")
   comegame.biz · 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 paper ---- */
  --color-bg:             #F8FAFC;
  --color-bg-alt:         #F1F5F9;
  --color-surface:        #FFFFFF;
  --color-surface-2:      #F1F5F9;
  --color-surface-glass:  #FFFFFF;
  --color-surface-glass-2: rgba(255, 255, 255, 0.92);

  /* Single accent. The "-bright" names are kept for compatibility with
     existing rules and now mean "deeper", the correct hover on light. */
  --color-electric-blue:  #1D4ED8;
  --color-electric-blue-bright: #1E40AF;
  --color-royal-purple:   #1D4ED8;
  --color-royal-purple-bright: #1E40AF;
  --color-white:          #FFFFFF;
  --color-off-white:      #0F172A;   /* text on light surfaces */

  --color-text-primary:   #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted:     #5E6A80;

  --color-border:         #E2E8F0;
  --color-border-bright:  #CBD5E1;
  --color-border-soft:    #EEF2F6;

  --color-success:        #047857;
  --color-error:          #B91C1C;
  --color-gold-accent:    #B45309;   /* 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(#1D4ED8, #1D4ED8);
  --gradient-primary-hover: linear-gradient(#1E40AF, #1E40AF);
  --gradient-glow:        none;
  --gradient-hero-mesh:   none;
  --gradient-card-border: linear-gradient(#E2E8F0, #E2E8F0);
  --gradient-text:        linear-gradient(#0F172A, #0F172A);
  --gradient-surface:     linear-gradient(#FFFFFF, #FFFFFF);

  /* ---- Elevation — hairlines do the work; shadows stay almost invisible ---- */
  --shadow-card:          0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-card-lg:       0 4px 16px rgba(15, 23, 42, 0.07);
  --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; }
}