/* ============================================================
   1JJ GAME — DESIGN TOKENS
   Royal Blue + Luxury Gold · Light Mode · Premium Gaming
   ============================================================ */

:root {
  /* ---------- Brand Colors ---------- */
  --royal-blue:      #1A3C8F;   /* primary deep regal blue */
  --royal-blue-700:  #16337a;
  --royal-blue-900:  #0F2560;
  --royal-blue-050:  #EEF2FC;

  --gold:            #C9A84C;   /* luxury accent gold */
  --gold-bright:     #F0C94B;   /* highlight gold for glows / CTAs */
  --gold-deep:       #A9862F;
  --gold-050:        #FBF6E6;

  /* ---------- Surfaces & Backgrounds ---------- */
  --bg:              #FFFFFF;
  --bg-alt:          #F5F7FF;   /* very light blue-white */
  --bg-tint:         #EEF2FC;
  --surface:         #FFFFFF;
  --surface-2:       #FAFBFF;

  /* ---------- Text ---------- */
  --text:            #0D1B3E;   /* near-black navy */
  --text-2:          #4A5568;   /* secondary */
  --text-3:          #7B879B;   /* muted */
  --text-on-blue:    #FFFFFF;
  --text-on-gold:    #0D1B3E;

  /* ---------- Semantic ---------- */
  --success:         #16A34A;
  --warning:         #D97706;
  --danger:          #DC2626;

  /* ---------- Borders & Lines ---------- */
  --border:          rgba(26, 60, 143, 0.15);
  --border-soft:     rgba(26, 60, 143, 0.09);
  --border-gold:     rgba(201, 168, 76, 0.40);

  /* ---------- Gradients ---------- */
  --grad-gold:       linear-gradient(135deg, #C9A84C 0%, #F0C94B 100%);
  --grad-gold-soft:  linear-gradient(135deg, #F0C94B 0%, #C9A84C 100%);
  --grad-blue:       linear-gradient(135deg, #1A3C8F 0%, #0F2560 100%);
  --grad-royal:      linear-gradient(140deg, #1A3C8F 0%, #16337a 45%, #0F2560 100%);
  --grad-text:       linear-gradient(100deg, #1A3C8F 0%, #3457b3 30%, #C9A84C 70%, #F0C94B 100%);
  --grad-hero-bg:    radial-gradient(1200px 600px at 80% -10%, rgba(201,168,76,0.14), transparent 60%),
                     radial-gradient(900px 500px at -5% 10%, rgba(26,60,143,0.10), transparent 55%),
                     linear-gradient(180deg, #FFFFFF 0%, #F5F7FF 100%);

  /* ---------- Shadows ---------- */
  --shadow-xs:  0 1px 2px rgba(13, 27, 62, 0.06);
  --shadow-sm:  0 2px 8px rgba(13, 27, 62, 0.06);
  --shadow-md:  0 8px 24px rgba(13, 27, 62, 0.08);
  --shadow-lg:  0 18px 44px rgba(13, 27, 62, 0.12);
  --shadow-blue: 0 16px 40px rgba(26, 60, 143, 0.22);
  --shadow-gold: 0 18px 40px rgba(201, 168, 76, 0.28);
  --shadow-gold-sm: 0 6px 18px rgba(201, 168, 76, 0.22);
  --glow-gold:  0 0 0 1px rgba(240,201,75,0.5), 0 8px 30px rgba(240,201,75,0.35);

  /* ---------- Typography ---------- */
  --font-display: "Cinzel", "Playfair Display", Georgia, serif;
  --font-body:    "Inter", "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-accent:  "Rajdhani", "Bebas Neue", var(--font-body);

  --fs-eyebrow: 0.82rem;
  --fs-body:    1.02rem;
  --fs-lead:    1.18rem;
  --fs-h6:      1.05rem;
  --fs-h5:      1.28rem;
  --fs-h4:      1.6rem;
  --fs-h3:      2.05rem;
  --fs-h2:      clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  --fs-h1:      clamp(2.4rem, 1.4rem + 4.2vw, 4.4rem);

  --lh-tight:   1.12;
  --lh-snug:    1.35;
  --lh-normal:  1.7;

  --ls-wide:    0.14em;
  --ls-wider:   0.22em;

  /* ---------- 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: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --section-y: clamp(4rem, 3rem + 5vw, 7rem);

  /* ---------- Layout ---------- */
  --container:      1200px;
  --container-wide: 1360px;
  --container-text: 820px;
  /* generous side gutter — extra blank space left & right */
  --gutter:         clamp(1.25rem, 4.5vw, 5rem);

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   0.18s;
  --dur:        0.32s;
  --dur-slow:   0.6s;

  /* ---------- Z-index ---------- */
  --z-header: 1000;
  --z-menu:   1100;
  --z-toast:  1200;

  --header-h: 76px;
}