/* ============================================================
   x666 Game — Royal Arena Design Tokens (LIGHT PREMIUM THEME)
   Single source of truth for colors, type, spacing, motion.
   Navy + gold accents on a soft ivory / blue-white canvas.
   ============================================================ */

:root {
  /* ---- Color: Arena palette (light) ---- */
  --color-arena-navy: #EEF2FC;        /* page canvas base */
  --color-royal-blue: #1A2C99;        /* primary brand blue */
  --color-royal-blue-glow: #3B57E0;   /* accents, active states */
  --color-gold-premium: #9C6F16;      /* deep gold — readable text/borders on light */
  --color-gold-bright: #B98A1E;       /* mid gold — icons / bold accents */
  --color-gold-deep: #6E5312;         /* engraved edges */
  --color-surface: #FFFFFF;           /* card / panel base */
  --color-surface-2: #F4F7FF;
  --color-surface-glass: rgba(255, 255, 255, 0.72);
  --color-text-primary: #0F1A44;      /* deep navy ink */
  --color-text-muted: #58648F;        /* slate blue */
  --color-success: #17915A;
  --color-danger: #CE3F39;

  /* ---- Derived / utility colors ---- */
  --color-hairline: rgba(156, 111, 22, 0.42);       /* gold hairline */
  --color-hairline-soft: rgba(26, 44, 153, 0.14);   /* blue soft border */
  --color-navy-80: rgba(255, 255, 255, 0.82);       /* light "glass" panels */
  --color-navy-95: rgba(255, 255, 255, 0.94);

  /* ---- Gradients ---- */
  --grad-gold: linear-gradient(135deg, #F6D883 0%, #D9A934 45%, #B0801A 100%);
  --grad-gold-text: linear-gradient(180deg, #C79A2A 0%, #9C6F16 100%);
  --grad-royal: linear-gradient(135deg, #3B57E0 0%, #1A2C99 100%);
  --grad-surface: linear-gradient(165deg, #FFFFFF 0%, #EFF3FE 100%);
  --grad-podium: linear-gradient(180deg, rgba(67, 97, 238, 0.10) 0%, rgba(255, 255, 255, 0) 100%);
  --grad-spotlight: conic-gradient(from 0deg,
      rgba(67, 97, 238, 0.00) 0deg,
      rgba(67, 97, 238, 0.14) 35deg,
      rgba(217, 169, 52, 0.10) 70deg,
      rgba(67, 97, 238, 0.00) 120deg,
      rgba(217, 169, 52, 0.12) 210deg,
      rgba(67, 97, 238, 0.00) 300deg);

  /* ---- Typography ---- */
  --font-display: "Playfair Display", "Cormorant SC", Georgia, "Times New Roman", serif;
  --font-heading: "Sora", "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Work Sans", "Segoe UI", system-ui, sans-serif;

  /* Fluid type scale */
  --fs-display: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 1.3rem + 1.9vw, 2.6rem);
  --fs-h3: clamp(1.28rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.28rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.78rem;

  /* ---- 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;
  --space-10: 8rem;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-wide: 1360px;
  /* Extra breathing room on the left/right of every page */
  --page-gutter: clamp(1.15rem, 5vw, 4.5rem);
  --section-pad: clamp(3.5rem, 6vw, 6.5rem);

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

  /* ---- Shadows (soft, blue-tinted for light theme) ---- */
  --shadow-sm: 0 4px 16px rgba(26, 44, 153, 0.08);
  --shadow-md: 0 16px 40px rgba(26, 44, 153, 0.12);
  --shadow-lg: 0 30px 72px rgba(26, 44, 153, 0.16);
  --shadow-gold: 0 12px 34px rgba(176, 128, 26, 0.28);
  --shadow-glow-blue: 0 0 40px rgba(67, 97, 238, 0.22);

  /* ---- Motion ---- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.4s;
  --dur-slow: 0.7s;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-fab: 90;
  --z-mobilebar: 95;
  --z-modal: 200;
}