/* ==========================================================================
   PK888 Game — Design tokens
   Royal Midnight Purple + Luxury Gold + Premium Red
   ========================================================================== */

:root {
  /* ---- Core palette ---- */
  --color-bg-primary: #150a24;
  --color-bg-secondary: #1f0f38;
  --color-bg-tertiary: #2a1547;
  --color-surface-glass: rgba(42, 21, 71, 0.55);
  --color-surface-solid: #241241;

  --color-gold: #d4af37;
  --color-gold-bright: #f4cd5b;
  --color-gold-deep: #9c7a1e;

  --color-red: #b01030;
  --color-red-bright: #e31c41;
  --color-red-deep: #7a0a21;

  --color-text-primary: #f5efe0;
  --color-text-secondary: #c9b8dc;
  --color-text-muted: #9c8cb5;

  --color-border: rgba(212, 175, 55, 0.25);
  --color-border-strong: rgba(212, 175, 55, 0.55);
  --color-border-soft: rgba(201, 184, 220, 0.14);

  --color-success: #35c98a;
  --color-info: #4aa8e8;

  /* ---- Gradients ---- */
  --gradient-royal: linear-gradient(135deg, #150a24 0%, #2a1547 50%, #1f0f38 100%);
  --gradient-gold: linear-gradient(90deg, #9c7a1e 0%, #d4af37 50%, #f4cd5b 100%);
  --gradient-gold-diag: linear-gradient(135deg, #f4cd5b 0%, #d4af37 45%, #9c7a1e 100%);
  --gradient-crimson: linear-gradient(135deg, #7a0a21 0%, #b01030 60%, #e31c41 100%);
  --gradient-royal-glow: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.15), transparent 60%);
  --gradient-panel: linear-gradient(160deg, rgba(42, 21, 71, 0.9) 0%, rgba(31, 15, 56, 0.72) 100%);
  --gradient-hairline: linear-gradient(90deg, transparent, var(--color-gold), transparent);

  /* ---- Elevation & glow ---- */
  --shadow-gold-glow: 0 0 24px rgba(212, 175, 55, 0.35);
  --shadow-gold-glow-lg: 0 0 48px rgba(212, 175, 55, 0.28);
  --shadow-red-glow: 0 0 24px rgba(227, 28, 65, 0.35);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---- Typography ---- */
  --font-display: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-body: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-display: clamp(2.35rem, 1.35rem + 4.4vw, 4.6rem);
  --fs-h1: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
  --fs-h3: clamp(1.24rem, 1.06rem + 0.8vw, 1.6rem);
  --fs-h4: clamp(1.06rem, 0.99rem + 0.34vw, 1.22rem);
  --fs-lead: clamp(1.02rem, 0.96rem + 0.32vw, 1.2rem);
  --fs-body: clamp(0.97rem, 0.94rem + 0.16vw, 1.04rem);
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;

  --lh-tight: 1.16;
  --lh-heading: 1.24;
  --lh-body: 1.78;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 44px;
  --sp-8: 60px;
  --sp-9: 84px;
  --sp-10: 112px;

  --section-pad: clamp(56px, 7vw, 104px);

  /* ---- Layout ---- */
  --wrap-max: 1220px;
  --wrap-narrow: 880px;
  --gutter: clamp(20px, 5.2vw, 76px);

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.68, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.5, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  --header-h: 76px;
  --z-header: 900;
  --z-float: 850;
  --z-modal: 1000;
}

@media (max-width: 640px) {
  :root {
    --header-h: 64px;
  }
}