/* ==========================================================================
   2J Game — 2jay.pk
   tokens.css — "Obsidian Royal" Design System
   Royal Gold (#D4AF37) x Charcoal Black (#0B0B0D) x Ivory White (#F8F5EC)
   ========================================================================== */

:root {
  /* ---------- Core Palette ---------- */
  --color-bg:            #0B0B0D;
  --color-bg-deep:       #060607;
  --color-surface:       #17161A;
  --color-surface-2:     #201F24;
  --color-surface-3:     #292730;
  --color-surface-glass: rgba(23, 22, 26, 0.72);
  --color-surface-glass-2: rgba(11, 11, 13, 0.86);

  --color-accent:        #D4AF37;
  --color-accent-bright: #F4D35E;
  --color-accent-dim:    #9C7F24;
  --color-accent-deep:   #8A6B1F;
  --color-accent-foil:   linear-gradient(135deg, #F4D35E 0%, #D4AF37 45%, #8A6B1F 100%);
  --color-accent-foil-soft: linear-gradient(135deg, rgba(244,211,94,.55) 0%, rgba(212,175,55,.28) 45%, rgba(138,107,31,.10) 100%);

  --color-ivory:         #F8F5EC;
  --color-ivory-dim:     #C9C4B4;
  --color-ivory-muted:   #7A7669;

  --color-border:        #2E2C31;
  --color-border-soft:   #232227;
  --color-border-gold:   rgba(212, 175, 55, 0.35);

  --color-success:       #4CAF6D;
  --color-warning:       #E0A83C;
  --color-error:         #E4574C;
  --color-telegram:      #229ED9;

  /* ---------- Typography ---------- */
  --font-display: 'Cinzel', 'Playfair Display', 'Times New Roman', serif;
  --font-body:    'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-urdu:    'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  2.875rem;
  --text-5xl:  3.75rem;

  /* Fluid display sizes — never overflow small screens */
  --text-hero:      clamp(2.125rem, 6.2vw, 3.75rem);
  --text-section:   clamp(1.625rem, 3.6vw, 2.5rem);
  --text-sub:       clamp(1.125rem, 2vw, 1.5rem);

  --line-height-tight:  1.15;
  --line-height-snug:   1.32;
  --line-height-normal: 1.55;
  --line-height-loose:  1.8;

  --tracking-wide:  0.06em;
  --tracking-wider: 0.14em;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.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;
  --space-32: 8rem;

  --section-pad: clamp(3.25rem, 7vw, 6rem);

  /* ---------- Radius — jewel-cut, not bubbly ---------- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  /* ---------- Shadows & Glow ---------- */
  --shadow-card:        0 4px 24px rgba(0, 0, 0, 0.55);
  --shadow-card-hover:  0 14px 42px rgba(0, 0, 0, 0.68);
  --shadow-glow-gold:   0 0 24px rgba(212, 175, 55, 0.30);
  --shadow-glow-strong: 0 0 48px rgba(212, 175, 55, 0.45);
  --shadow-inset-foil:  inset 0 1px 0 rgba(244, 211, 94, 0.25);
  --shadow-nav:         0 10px 34px rgba(0, 0, 0, 0.55);

  /* ---------- Z-index ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 60;
  --z-nav: 100;
  --z-drawer: 150;
  --z-modal: 200;
  --z-toast: 300;

  /* ---------- Motion ---------- */
  --transition-fast:   180ms cubic-bezier(.4, 0, .2, 1);
  --transition-normal: 320ms cubic-bezier(.4, 0, .2, 1);
  --transition-slow:   600ms cubic-bezier(.16, 1, .3, 1);

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --container-wide: 1420px;
  /* Generous, always-present left/right breathing room. Uses vw (not vmin)
     so gutters scale with the viewport, and never causes overflow because the
     container itself is width:100% with box-sizing:border-box. */
  --container-pad: clamp(1.125rem, 4.5vw, 3.5rem);
  --nav-h: 74px;
}

@media (min-width: 768px) {
  :root { --nav-h: 86px; }
}