/* ============================================================
   x666play.com.pk — Design Tokens
   Premium LIGHT theme — "Royal Ivory" (ivory + royal blue + gold)
   ============================================================ */

:root {
  /* ---- Royal Blue scale (accents / text) ---- */
  --color-royal-blue-deep: #0A1140;
  --color-royal-blue: #1B2A8C;
  --color-royal-blue-light: #3450D6;
  --color-royal-blue-ink: #060A2A;

  /* ---- Premium Gold scale ---- */
  --color-gold-premium: #C9A227;      /* primary gold (slightly deeper for light bg) */
  --color-gold-bright: #F5D482;       /* bright gold — used on dark elements only */
  --color-gold-deep: #9C7A24;
  --color-gold-foil: #FBE9A6;
  --color-gold-text: #96751A;         /* readable gold for text on light surfaces */

  /* ---- Brand red (logo motif — used sparingly) ---- */
  --color-brand-red: #E8281E;

  /* ---- Light surfaces ---- */
  --color-bg: #FBF8F0;                 /* ivory page base */
  --color-bg-2: #F2ECDD;               /* deeper cream band */
  --color-surface: #FFFFFF;            /* card/panel background */
  --color-surface-2: #FBF9F3;
  --color-surface-glass: rgba(255, 255, 255, 0.66);
  --color-surface-glass-strong: rgba(255, 255, 255, 0.88);
  --color-hairline: rgba(201, 162, 39, 0.55);     /* gold hairline */
  --color-hairline-soft: rgba(24, 32, 74, 0.12);  /* navy soft line */

  /* ---- Text ---- */
  --color-text-primary: #1C2550;
  --color-text-strong: #0A1140;
  --color-text-muted: #55608A;
  --color-text-dim: #7C86AC;
  --color-text-on-gold: #23180A;

  /* ---- Interaction tints ---- */
  --tint: rgba(27, 42, 140, 0.06);
  --tint-strong: rgba(27, 42, 140, 0.12);

  /* ---- Status ---- */
  --color-success: #17A85C;
  --color-danger: #D23B3B;
  --color-warning: #C98A12;

  /* ---- Gradients ---- */
  --grad-gold: linear-gradient(135deg, #FBE9A6 0%, #F0CE6E 24%, #D4AF37 56%, #B08D22 100%);
  --grad-gold-text: linear-gradient(120deg, #C29B2B 0%, #9A7A1C 62%, #7E6316 100%);
  --grad-gold-sheen: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 45%, rgba(255,255,255,0) 60%);
  --grad-royal: linear-gradient(160deg, #2436a6 0%, #16205c 70%);
  --grad-surface: linear-gradient(165deg, #ffffff 0%, #f6f2e9 100%);
  --grad-page: radial-gradient(1100px 640px at 82% -6%, rgba(52,80,214,.10), transparent 60%),
               radial-gradient(950px 560px at 4% 3%, rgba(201,162,39,.14), transparent 62%),
               linear-gradient(180deg, #FCF9F2 0%, #F2ECDE 100%);

  /* ---- Typography ---- */
  --font-display: "Cinzel", "Marcellus", Georgia, serif;
  --font-head: "Sora", "Poppins", system-ui, sans-serif;
  --font-body: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.4rem, 6vw, 4.6rem);
  --fs-h1: clamp(2rem, 4.4vw, 3.2rem);
  --fs-h2: clamp(1.6rem, 3.2vw, 2.4rem);
  --fs-h3: clamp(1.2rem, 2.2vw, 1.55rem);
  --fs-lead: clamp(1.02rem, 1.6vw, 1.22rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;

  --lh-tight: 1.12;
  --lh-snug: 1.32;
  --lh-body: 1.72;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(3.5rem, 7vw, 6.5rem);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-wide: 1360px;
  --gutter: clamp(1.15rem, 5vw, 3.25rem);
  --header-h: 74px;

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* ---- Elevation (soft neutral shadows for light) ---- */
  --shadow-sm: 0 3px 12px rgba(26, 34, 80, 0.08);
  --shadow: 0 12px 30px rgba(26, 34, 80, 0.12);
  --shadow-lg: 0 26px 60px rgba(26, 34, 80, 0.18);
  --glow-gold: 0 0 0 1px rgba(201,162,39,.55), 0 10px 30px rgba(201,162,39,.30);
  --glow-blue: 0 0 40px rgba(52, 80, 214, 0.22);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  --z-header: 900;
  --z-fab: 940;
  --z-mobilebar: 930;
  --z-loader: 1000;
}