/* ==========================================================================
   TOJAY GAME — "THE ROYAL VAULT" DESIGN TOKENS
   Midnight Navy vault interior · Royal Gold light source · Pure White paper layer
   Single source of truth for colour, type, space, motion and layout.
   ========================================================================== */

:root {
  /* ---------- Core palette ---------- */
  --color-bg:             #0B1226;
  --color-bg-deep:        #070C1B;
  --color-surface:        #121C3A;
  --color-surface-2:      #182450;
  --color-surface-3:      #1E2C5E;
  --color-veil:           rgba(11, 18, 38, 0.78);
  --color-veil-deep:      rgba(7, 12, 27, 0.94);

  --color-gold:           #D4AF37;
  --color-gold-bright:    #F4D160;
  --color-gold-pale:      #FBEDBB;
  --color-gold-dim:       #8A6E20;
  --color-gold-deep:      #5E4A12;

  --color-white:          #FFFFFF;
  --color-paper:          #FBFAF6;
  --color-paper-2:        #F1EFE8;
  --color-ink:            #0B1226;
  --color-ink-soft:       #3A4166;

  --color-text:           #E8ECFA;
  --color-text-secondary: #B9C2E0;
  --color-text-muted:     #7E89B4;

  --color-border:         #24306B;
  --color-border-soft:    rgba(212, 175, 55, 0.16);
  --color-border-gold:    rgba(212, 175, 55, 0.42);

  --color-success:        #2ECC71;
  --color-error:          #FF5C5C;
  --color-telegram:       #29A9EB;
  --color-telegram-dark:  #1C88C4;

  /* ---------- Gold treatments ---------- */
  --foil-diagonal: linear-gradient(135deg, #8A6E20 0%, #D4AF37 28%, #FBEDBB 48%, #F4D160 58%, #A8842A 82%, #6E5716 100%);
  --foil-horizontal: linear-gradient(90deg, #8A6E20 0%, #D4AF37 22%, #F4D160 50%, #D4AF37 78%, #8A6E20 100%);
  --foil-edge: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.15) 12%, #D4AF37 50%, rgba(212, 175, 55, 0.15) 88%, transparent 100%);
  --foil-sheen: linear-gradient(115deg, transparent 30%, rgba(251, 237, 187, 0.42) 46%, rgba(255, 255, 255, 0.78) 50%, rgba(251, 237, 187, 0.42) 54%, transparent 70%);
  --brushed-metal: linear-gradient(180deg, #F4D160 0%, #D4AF37 42%, #B4912B 58%, #E4C24E 100%);

  /* ---------- Typography ---------- */
  --font-display: 'Cinzel', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Segoe UI', serif;

  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.0625rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  2.875rem;
  --text-6xl:  3.5rem;

  --leading-tight:   1.14;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  --tracking-tight:  -0.015em;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.12em;
  --tracking-widest: 0.22em;

  /* ---------- 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-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

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

  /* ---------- Elevation & glow ---------- */
  --shadow-card:             0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-card-hover:       0 18px 46px rgba(0, 0, 0, 0.6);
  --shadow-gold-glow:        0 0 24px rgba(212, 175, 55, 0.35);
  --shadow-gold-glow-strong: 0 0 48px rgba(212, 175, 55, 0.55);
  --shadow-paper:            0 10px 34px rgba(3, 7, 20, 0.55);
  --shadow-device:           0 44px 90px rgba(0, 0, 0, 0.68), 0 0 0 1px rgba(212, 175, 55, 0.2);
  --shadow-inset-top:        inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---------- Layers ---------- */
  --z-behind: -1;
  --z-base:   1;
  --z-raised: 10;
  --z-sticky: 60;
  --z-nav:    100;
  --z-drawer: 150;
  --z-modal:  200;

  /* ---------- Motion ---------- */
  --t-fast:   160ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-normal: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   620ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-vault: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-deal:  cubic-bezier(0.22, 1.05, 0.36, 1);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-wide: 1360px;
  --container-narrow: 860px;
  --container-pad: 1.25rem;
  --nav-h: 74px;
  --nav-h-scrolled: 64px;

  /* ---------- Ambient vault lighting ---------- */
  --vault-light:
    radial-gradient(ellipse 62% 48% at 12% 8%,  rgba(212, 175, 55, 0.10), transparent 62%),
    radial-gradient(ellipse 48% 52% at 90% 22%, rgba(212, 175, 55, 0.08), transparent 64%),
    radial-gradient(ellipse 70% 44% at 50% 96%, rgba(36, 48, 107, 0.55),  transparent 68%);
}

/* Generous, symmetrical gutters as the viewport opens up */
@media (min-width: 600px)  { :root { --container-pad: 2rem; } }
@media (min-width: 900px)  { :root { --container-pad: 3rem; } }
@media (min-width: 1200px) { :root { --container-pad: 4rem; } }
@media (min-width: 1480px) { :root { --container-pad: 5rem; } }

/* Global reduced-motion contract */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}