/* ==========================================================================
   JaiHoArcade — Design Tokens  ("Emerald & Royal" theme)
   ========================================================================== */

:root {
  /* Core palette */
  --color-bg:            #06140D;   /* near-black emerald */
  --color-bg-alt:        #0A1F14;
  --color-surface:       #0F2A1B;
  --color-surface-2:     #143823;
  --color-glass:         rgba(15, 42, 27, 0.55);

  --color-emerald:       #0F9D58;
  --color-emerald-bright:#1FD37B;
  --color-emerald-deep:  #06381F;

  --color-gold:          #D4AF37;   /* royal gold */
  --color-gold-bright:   #F5D876;
  --color-gold-dim:      #A9832A;

  --color-telegram:      #229ED9;
  --color-telegram-dark: #1b7fae;

  --color-text-primary:  #F4F9F5;
  --color-text-secondary:#B9CFC0;
  --color-text-muted:    #6E8C7A;
  --color-border:        rgba(212, 175, 55, 0.18);

  --color-success:       #1FD37B;
  --color-error:         #FF5C5C;

  /* Typography */
  --font-display: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-heading: 'Rajdhani', 'Orbitron', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;

  --fs-hero:    clamp(2.4rem, 6vw, 4.4rem);
  --fs-h1:      clamp(2rem, 4.5vw, 3.2rem);
  --fs-h2:      clamp(1.6rem, 3.5vw, 2.4rem);
  --fs-h3:      clamp(1.25rem, 2.4vw, 1.6rem);
  --fs-h4:      clamp(1.1rem, 1.8vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-xs:      0.78rem;

  /* Gradients (signature brand look) */
  --gradient-hero: radial-gradient(ellipse at top, #143823 0%, #06140D 70%);
  --gradient-gold: linear-gradient(135deg, #F5D876 0%, #D4AF37 50%, #A9832A 100%);
  --gradient-emerald: linear-gradient(135deg, #1FD37B 0%, #0F9D58 60%, #06381F 100%);
  --gradient-border: linear-gradient(135deg, #D4AF37, #1FD37B);

  /* Shadows / glow */
  --shadow-card: 0 4px 24px rgba(0,0,0,0.45);
  --shadow-glow-gold: 0 0 24px rgba(212,175,55,0.35);
  --shadow-glow-emerald: 0 0 24px rgba(31,211,123,0.30);

  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px;
  --transition-fast: 150ms ease; --transition-normal: 280ms ease; --transition-slow: 500ms ease;
  --container-max: 1240px; --container-pad: 1rem;

  --header-h: 68px;
}

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