/* ==========================================================================
   S9 GAME — Design Tokens
   Theme: "Obsidian Roulette" — midnight obsidian + burgundy + antique gold
   ========================================================================== */

:root {
  /* --- Core surfaces --- */
  --color-bg:            #0B0507;
  --color-bg-alt:        #120709;
  --color-surface:       #1A0B0F;
  --color-surface-2:     #241015;
  --color-surface-3:     #2E151B;
  --color-surface-glass: rgba(26, 11, 15, 0.72);

  /* --- Accent: deep maroon / burgundy --- */
  --color-accent:        #7A1128;
  --color-accent-2:      #4A0E1C;
  --color-accent-bright: #B8253F;
  --color-gold:          #C9A24B;
  --color-gold-soft:     #E0C583;
  --color-gold-deep:     #8C6C28;

  /* --- Text --- */
  --color-text-primary:  #F2E9E7;
  --color-text-secondary:#CBAFB4;
  --color-text-muted:    #9A757C;
  --color-text-faint:    #6E4A50;

  /* --- Borders / lines --- */
  --color-border:        #2E141B;
  --color-border-soft:   #241016;
  --color-border-hair:   rgba(201, 162, 75, 0.18);
  --color-border-hair-2: rgba(201, 162, 75, 0.34);

  /* --- Status --- */
  --color-success:       #4CAF6D;
  --color-error:         #E0475C;
  --color-warning:       #D9A441;

  /* --- Effects --- */
  --shadow-card:         0 8px 30px rgba(0, 0, 0, 0.55);
  --shadow-card-lg:      0 22px 60px rgba(0, 0, 0, 0.62);
  --shadow-glow-maroon:  0 0 28px rgba(122, 17, 40, 0.45);
  --shadow-glow-gold:    0 0 18px rgba(201, 162, 75, 0.30);
  --shadow-inset-hair:   inset 0 1px 0 rgba(201, 162, 75, 0.12);

  /* --- Gradients --- */
  --grad-accent:   linear-gradient(135deg, #8E1730 0%, #4A0E1C 100%);
  --grad-accent-hover: linear-gradient(135deg, #B8253F 0%, #6A1226 100%);
  --grad-gold:     linear-gradient(135deg, #E0C583 0%, #C9A24B 45%, #8C6C28 100%);
  --grad-surface:  linear-gradient(160deg, #1F0D12 0%, #14080B 100%);
  --grad-panel:    linear-gradient(150deg, rgba(46, 21, 27, 0.85) 0%, rgba(18, 7, 9, 0.92) 100%);
  --grad-hairline: linear-gradient(90deg, transparent, rgba(201, 162, 75, 0.55), transparent);

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

  --fs-eyebrow:  0.72rem;
  --fs-xs:       0.8125rem;
  --fs-sm:       0.9063rem;
  --fs-base:     1rem;
  --fs-md:       1.0625rem;
  --fs-lg:       1.1875rem;
  --fs-xl:       clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-h3:       clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --fs-h2:       clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --fs-h1:       clamp(2.15rem, 1.5rem + 3.2vw, 4rem);

  --lh-tight:    1.18;
  --lh-snug:     1.4;
  --lh-body:     1.78;

  --ls-eyebrow:  0.42em;
  --ls-display:  0.02em;

  /* --- Spacing scale --- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.75rem;
  --sp-8:  3.5rem;
  --sp-9:  4.5rem;
  --sp-10: 6rem;

  --section-pad: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Layout --- */
  --container-max:  1200px;
  --container-wide: 1360px;
  --container-gutter: clamp(1.25rem, 7vw, 9rem);

  /* --- Radii --- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Motion --- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;

  /* --- Z-index scale --- */
  --z-weave:   0;
  --z-base:    1;
  --z-sticky:  60;
  --z-header:  80;
  --z-drawer:  90;
  --z-modal:   100;
  --z-toast:   110;
}

/* Urdu / RTL adjustments */
html[dir='rtl'] {
  --ls-eyebrow: 0.06em;
  --ls-display: 0;
}

html[dir='rtl'] body {
  font-family: var(--font-urdu);
}

html[dir='rtl'] .u-eyebrow {
  letter-spacing: 0.06em;
}

/* English-only fragments keep LTR ordering inside an RTL document */
html[dir='rtl'] .device-chip,
html[dir='rtl'] .hero__badge-dot,
html[dir='rtl'] .dlband__spec,
html[dir='rtl'] .dlcard__val,
html[dir='rtl'] .step__meta,
html[dir='rtl'] .tg-card__handle,
html[dir='rtl'] .footer__badge,
html[dir='rtl'] .stat,
html[dir='rtl'] .marquee-label,
html[dir='rtl'] .tagcloud,
html[dir='rtl'] .filter-pill,
html[dir='rtl'] .game-card__body,
html[dir='rtl'] .shots__caption,
html[dir='rtl'] .legal__meta {
  direction: ltr;
  unicode-bidi: isolate;
}