/* ==========================================================================
   2J Game — 2jnew.pk
   Design System: "Ivory Gold Estate" — Ivory White x Royal Gold x Charcoal
   tokens.css — design tokens only. No component rules live here.
   ========================================================================== */

:root {
  /* ---- Core palette (light mode) ---- */
  --color-bg:            #FBF9F3;
  --color-bg-tint:       #F8F5EC;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F3EEE0;
  --color-surface-3:     #EDE6D4;
  --color-surface-glass: rgba(255, 255, 255, 0.86);

  --color-accent:        #B8860B;
  --color-accent-bright: #D4AF37;
  --color-accent-soft:   #F0E3BE;
  --color-accent-dim:    #8A6B1F;
  --color-accent-foil:   linear-gradient(135deg, #E6C75A 0%, #D4AF37 28%, #B8860B 62%, #8A6B1F 100%);
  --color-accent-foil-h: linear-gradient(135deg, #F2DC8C 0%, #E0BE49 32%, #C4901A 70%, #9C7A24 100%);

  --color-charcoal:      #1C1B1F;
  --color-charcoal-2:    #26242A;
  --color-charcoal-soft: #3A383E;
  --color-charcoal-muted:#6E6B66;
  --color-ivory-text:    #F6F2E7;
  --color-ivory-dim:     rgba(246, 242, 231, 0.72);

  --color-border:        #E7E1D2;
  --color-border-soft:   #F0EBDD;
  --color-border-gold:   rgba(184, 134, 11, 0.30);
  --color-border-gold-2: rgba(184, 134, 11, 0.52);
  --color-border-dark:   rgba(246, 242, 231, 0.14);

  --color-success:       #2E7D46;
  --color-error:         #C4392B;
  --color-info:          #1E6FA8;
  --color-telegram:      #229ED9;
  --color-telegram-dark: #1B84B5;

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:    'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-urdu:    'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;

  --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 */
  --display-hero:    clamp(2.35rem, 6.4vw, 4.15rem);
  --display-section: clamp(1.75rem, 3.9vw, 2.75rem);
  --display-sub:     clamp(1.3rem, 2.6vw, 1.75rem);
  --display-stat:    clamp(2rem, 5vw, 3.15rem);

  --line-height-tight:  1.15;
  --line-height-snug:   1.35;
  --line-height-normal: 1.62;
  --line-height-loose:  1.85;

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

  /* ---- 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-y: clamp(3.5rem, 7vw, 6.5rem);

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-2xl: 38px;
  --radius-full: 9999px;

  /* ---- Shadows — soft diffused, never glow ---- */
  --shadow-hairline:    0 0 0 1px var(--color-border);
  --shadow-card:        0 8px 30px rgba(28, 27, 31, 0.08);
  --shadow-card-hover:  0 14px 40px rgba(28, 27, 31, 0.14);
  --shadow-raised:      0 20px 56px rgba(28, 27, 31, 0.16);
  --shadow-deep:        0 34px 80px rgba(28, 27, 31, 0.22);
  --shadow-gold-edge:   0 0 0 1px rgba(184, 134, 11, 0.25);
  --shadow-inset-foil:  inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-medallion:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -2px 5px rgba(184, 134, 11, 0.22),
    0 6px 18px rgba(28, 27, 31, 0.10);

  /* ---- 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);
  --ease-estate:       cubic-bezier(.16, 1, .3, 1);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-wide: 1340px;
  --container-narrow: 800px;
  /* Generous side gutters — the "estate" breathing room on left/right */
  --container-pad: 1.25rem;
  --nav-h: 68px;
}

@media (min-width: 640px) {
  :root { --container-pad: 2rem; --nav-h: 74px; }
}

@media (min-width: 1024px) {
  :root { --container-pad: 3.25rem; --nav-h: 82px; }
}

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