/* ============================================================
   1JJ GAME PK — Design Tokens
   Light Mode · Royal Blue & Luxury Gold
   ============================================================ */
:root {
  /* Backgrounds — LIGHT MODE */
  --color-bg-primary:       #FFFFFF;
  --color-bg-secondary:     #F4F6FB;
  --color-bg-card:          #FFFFFF;
  --color-bg-section-alt:   #EEF1F8;

  /* Royal Blue Scale */
  --color-blue-900:         #0A1628;
  --color-blue-800:         #0F2044;
  --color-blue-700:         #1A3575;
  --color-blue-600:         #1E4DB7;
  --color-blue-500:         #2860D4;
  --color-blue-400:         #4E80EE;
  --color-blue-100:         #DBE6FF;

  /* Luxury Gold Scale */
  --color-gold-600:         #A07418;
  --color-gold-500:         #C9950A;
  --color-gold-400:         #E8B020;
  --color-gold-300:         #F5CA4A;
  --color-gold-100:         #FDF3D0;
  --color-gold-shimmer:     linear-gradient(90deg, #C9950A 0%, #F5CA4A 40%, #E8B020 60%, #A07418 100%);

  /* Text */
  --color-text-primary:     #0A1628;
  --color-text-secondary:   #3B4D6E;
  --color-text-muted:       #6B7FA3;
  --color-text-inverse:     #FFFFFF;

  /* Borders */
  --color-border:           #D1DAF0;
  --color-border-gold:      #E8B020;

  /* Status */
  --color-success:          #0CAF60;
  --color-error:            #E53E3E;

  /* Gradients */
  --gradient-hero:          linear-gradient(135deg, #0F2044 0%, #1E4DB7 50%, #1A3575 100%);
  --gradient-hero-rich:     linear-gradient(135deg, #0A1628 0%, #14295C 45%, #1E4DB7 100%);
  --gradient-card-hover:    linear-gradient(145deg, #1E4DB7 0%, #0A1628 100%);
  --gradient-gold-btn:      linear-gradient(135deg, #C9950A 0%, #F5CA4A 50%, #A07418 100%);
  --gradient-section:       linear-gradient(180deg, #FFFFFF 0%, #EEF1F8 100%);
  --gradient-shimmer:       linear-gradient(90deg, transparent 0%, rgba(255,210,70,0.4) 50%, transparent 100%);
  --gradient-gold-text:     linear-gradient(90deg, #A07418 0%, #F5CA4A 45%, #E8B020 70%, #A07418 100%);

  /* Shadows */
  --shadow-sm:              0 2px 8px rgba(30, 77, 183, 0.08);
  --shadow-md:              0 8px 32px rgba(30, 77, 183, 0.14);
  --shadow-lg:              0 20px 60px rgba(10, 22, 40, 0.18);
  --shadow-gold:            0 4px 24px rgba(201, 149, 10, 0.35);
  --shadow-card-hover:      0 12px 48px rgba(30, 77, 183, 0.22);
  --shadow-btn:             0 6px 20px rgba(201, 149, 10, 0.4);

  /* Typography */
  --font-display:           'Playfair Display', Georgia, serif;
  --font-heading:           'Montserrat', 'Segoe UI', sans-serif;
  --font-body:              'Inter', 'Helvetica Neue', sans-serif;
  --font-accent:            'Cinzel', serif;

  /* Spacing (4px base) */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-pill: 999px;

  /* Animation */
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 0.2s var(--ease-smooth);
  --transition-mid:  0.4s var(--ease-smooth);
  --transition-slow: 0.7s var(--ease-smooth);

  /* Layout — generous side gutters requested */
  --container-max: 1240px;
  --gutter: clamp(20px, 6vw, 88px);
  --nav-h: 84px;
  --nav-h-scrolled: 66px;
}