/* Premier Kings — design tokens. Use these vars everywhere; no hard-coded colours. */
:root {
  /* Brand */
  --pk-royal-950: #12071F;
  --pk-royal-900: #1C0B33;
  --pk-royal-800: #2A1150;
  --pk-royal-700: #3C1870;
  --pk-royal-600: #5222A0;
  --pk-royal-500: #6B35C9;
  --pk-royal-100: #EEE7FA;
  --pk-royal-50:  #F7F3FD;

  --pk-gold-700: #8A6500;
  --pk-gold-600: #B38600;
  --pk-gold-500: #D4A417;
  --pk-gold-400: #E9BE3A;
  --pk-gold-100: #FBF1D3;

  --pk-court-500: #E4632A;

  /* Neutrals */
  --pk-ink:      #0F0B16;
  --pk-grey-800: #2C2735;
  --pk-grey-600: #5F586B;
  --pk-grey-400: #9B94A8;
  --pk-grey-200: #E4E0EB;
  --pk-grey-100: #F2F0F6;
  --pk-white:    #FFFFFF;

  /* Status */
  --pk-success: #1D8A57; --pk-success-100: #E2F5EB;
  --pk-warning: #B86E00; --pk-warning-100: #FDF0DA;
  --pk-danger:  #C0303D; --pk-danger-100:  #FBE4E6;
  --pk-info:    #2D66D2; --pk-info-100:    #E3ECFB;

  /* Semantic aliases */
  --pk-bg: var(--pk-white);
  --pk-bg-subtle: var(--pk-royal-50);
  --pk-bg-inverse: var(--pk-royal-900);
  --pk-surface: var(--pk-white);
  --pk-surface-inverse: var(--pk-royal-800);
  --pk-text: var(--pk-ink);
  --pk-text-muted: var(--pk-grey-600);
  --pk-text-inverse: var(--pk-white);
  --pk-text-inverse-muted: #C9BFDD;
  --pk-border: var(--pk-grey-200);
  --pk-border-inverse: rgba(233,190,58,.25);
  --pk-accent: var(--pk-gold-500);
  --pk-accent-text: var(--pk-gold-700);
  --pk-link: var(--pk-royal-600);
  --pk-focus: var(--pk-gold-400);

  /* Typography */
  --pk-font-display: 'Anton', 'Impact', sans-serif;
  --pk-font-body: 'DM Sans', system-ui, sans-serif;
  --pk-font-accent: 'Playfair Display', Georgia, serif;

  --pk-text-hero:     clamp(48px, 7vw, 96px);
  --pk-text-h1:       clamp(36px, 5vw, 64px);
  --pk-text-h2:       clamp(28px, 3.5vw, 44px);
  --pk-text-h3:       clamp(20px, 1.9vw, 24px);
  --pk-text-h4:       clamp(17px, 1.4vw, 18px);
  --pk-text-body-lg:  clamp(18px, 1.6vw, 20px);
  --pk-text-body:     16px;
  --pk-text-sm:       14px;
  --pk-text-xs:       12px;
  --pk-text-stat:     clamp(44px, 5.6vw, 72px);

  --pk-leading-display: 1.0;
  --pk-leading-heading: 1.2;
  --pk-leading-body: 1.6;

  /* Spacing (4px base) */
  --pk-space-1: 4px;  --pk-space-2: 8px;  --pk-space-3: 12px; --pk-space-4: 16px;
  --pk-space-5: 24px; --pk-space-6: 32px; --pk-space-7: 48px; --pk-space-8: 64px;
  --pk-space-9: 96px; --pk-space-10: 128px;

  --pk-container: 1200px;
  --pk-container-narrow: 760px;
  --pk-gutter: 16px;

  --pk-radius-sm: 6px;
  --pk-radius-md: 12px;
  --pk-radius-lg: 20px;
  --pk-radius-pill: 999px;

  --pk-shadow-sm: 0 1px 2px rgba(18,7,31,.08);
  --pk-shadow-md: 0 6px 20px rgba(18,7,31,.10);
  --pk-shadow-lg: 0 18px 48px rgba(18,7,31,.18);
  --pk-shadow-gold: 0 0 0 1px var(--pk-gold-500), 0 10px 30px rgba(212,164,23,.25);

  --pk-ease: cubic-bezier(.2,.7,.2,1);
  --pk-dur-fast: 120ms; --pk-dur: 200ms; --pk-dur-slow: 400ms;
}

/* Breakpoints (reference only — use in media queries):
   sm 480 · md 768 · lg 1024 · xl 1280 */

/* Side gutter steps up with the viewport: 16px mobile, 24px >=768, 32px >=1024. */
@media (min-width: 768px) { :root { --pk-gutter: 24px; } }
@media (min-width: 1024px) { :root { --pk-gutter: 32px; } }