/* ============================================================
   24KWINNER — Design Tokens
   Theme: emerald-forest (custom)
   ============================================================ */

:root {
  /* ---- Colors ---- */
  --color-bg:              #061F14;   /* deep forest green — page base */
  --color-surface:         #0B2A1C;   /* section / secondary background */
  --color-surface-2:       #103823;   /* card background */
  --color-surface-3:       #17492E;   /* raised card / hover */
  --color-accent:          #10B981;   /* emerald green — primary accent */
  --color-accent-bright:   #34D399;   /* lighter emerald for glows/hover */
  --color-accent-dim:      #047857;   /* pressed/dim state */
  --color-gold:            #E8C468;   /* premium gold — bonus badges, ₹ amounts */
  --color-gold-bright:     #F5D98B;
  --color-telegram:        #26A5E4;   /* official Telegram brand blue */

  --color-text-primary:    #EAF7EF;
  --color-text-secondary:  #9FCBAE;
  --color-text-muted:      #5C8A6C;
  --color-border:          #1D4430;
  --color-border-bright:   #2A6444;
  --color-error:           #FF5F5F;
  --color-success:         #34D399;

  /* ---- Typography ---- */
  --font-display: 'Poppins', 'Exo 2', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  clamp(2.5rem, 6vw, 4.5rem);

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.6;

  /* ---- Shadows / Glows ---- */
  --shadow-card:        0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-card-lg:     0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-glow:        0 0 24px rgba(16, 185, 129, 0.30);
  --shadow-glow-strong: 0 0 48px rgba(52, 211, 153, 0.45);
  --shadow-gold-glow:   0 0 24px rgba(232, 196, 104, 0.35);

  /* ---- Radii ---- */
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-full: 9999px;

  /* ---- Motion ---- */
  --transition-fast:   150ms ease;
  --transition-normal: 280ms ease;
  --transition-slow:   450ms ease;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: 1rem;
  --header-h:      72px;
}

@media (min-width: 768px) {
  :root { --container-pad: 2rem; }
}