/* ============================================================================
 * WSX Sports Stadium — Design Tokens
 * Source of truth for all colors, type, spacing, radius, shadow values.
 * Reference: SPEC.md §4 (visual) + §1.1.1 (owner constants).
 * Owner constants are exposed as CSS custom properties so the same
 * tokens.css works across multiple site forks by overriding the root
 * block with new site identity values.
 * ============================================================================ */

:root {
  /* ---------- Brand colors (owner-specified, SPEC §1.1.1) ---------- */
  --brand-pink:         #E83E8C;   /* {{BRAND_COLOR_PINK}}  primary */
  --brand-pink-soft:    #FFE5EE;   /* hover/active bg, soft accent */
  --brand-pink-deep:    #B5179E;   /* gradient anchor, deep variant */
  --brand-purple:       #3D2D7A;   /* {{BRAND_COLOR_PURPLE}}  secondary */
  --brand-purple-soft:  #E7E2FF;   /* secondary soft bg */
  --brand-yellow:       #FFD93D;   /* accent highlight */
  --brand-teal:         #4ECDC4;   /* accent secondary */
  --brand-bg:           #FFF5F8;   /* page background (very light pink) */
  --brand-card:         #FFFFFF;   /* surface / card */
  --brand-overlay:      rgba(61, 45, 122, 0.45); /* modal scrim */

  /* ---------- Category palette (cover backgrounds, SPEC §3) ---------- */
  --cat-arcade:     #E83E8C;  /* pink        */
  --cat-puzzle:     #3D2D7A;  /* purple      */
  --cat-skill:      #4361EE;  /* blue        */
  --cat-adventure:  #06D6A0;  /* green       */
  --cat-racing:     #FF8C42;  /* orange      */
  --cat-music:      #FFD93D;  /* yellow      */
  --cat-relaxing:   #4ECDC4;  /* teal        */
  --cat-cross:      #B5179E;  /* deep pink   */

  /* ---------- Neutrals ---------- */
  --neutral-900:    #1A1A2E;   /* near-black, body fallback */
  --neutral-800:    #2D2D44;
  --neutral-700:    #4A4A68;
  --neutral-600:    #6B7280;   /* text-muted */
  --neutral-500:    #9CA3AF;
  --neutral-300:    #D1D5DB;
  --neutral-200:    #E5E7EB;   /* border */
  --neutral-100:    #F3F4F6;
  --neutral-50:     #FAFAFA;
  --white:          #FFFFFF;

  /* ---------- Semantic ---------- */
  --text-primary:   #1A1A2E;   /* body text on light bg */
  --text-secondary: #4A4A68;   /* less prominent body */
  --text-muted:     #6B7280;   /* captions / meta */
  --text-on-brand:  #FFFFFF;   /* text on pink/purple */
  --text-link:      var(--brand-pink);
  --text-link-hover:var(--brand-pink-deep);

  --bg-page:        var(--brand-bg);
  --bg-surface:     var(--white);
  --bg-soft:        #FFF0F5;   /* soft pink panel */
  --bg-tint:        rgba(232, 62, 140, 0.06);

  --border-default: #E5E7EB;
  --border-soft:    #F0E5EB;
  --border-strong:  #D1D5DB;

  /* ---------- Type (owner-specified, SPEC §1.1.1) ---------- */
  --font-heading:   "Archivo Black", system-ui, sans-serif;
  --font-body:      "DM Sans", system-ui, -apple-system, sans-serif;

  /* type scale (mobile-first) */
  --fs-3xs:  10px;
  --fs-2xs:  11px;
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  20px;
  --fs-3xl:  24px;
  --fs-4xl:  28px;
  --fs-5xl:  32px;

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --fw-regular:  400;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

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

  /* ---------- Radius (SPEC §4) ---------- */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 9999px;
  --r-circle: 50%;

  /* ---------- Shadow (subtle only, SPEC §4.1) ---------- */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-pink: 0 4px 12px rgba(232, 62, 140, 0.25);
  --shadow-purple: 0 4px 12px rgba(61, 45, 122, 0.25);
  --shadow-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.04);

  /* ---------- Layout ---------- */
  --max-w:          480px;   /* mobile app frame (SPEC §4.1) */
  --topnav-h:       56px;    /* sticky top nav (SPEC §4.2) */
  --bottom-safe:    env(safe-area-inset-bottom, 0);
  --top-safe:       env(safe-area-inset-top, 0);
  --drawer-w:       280px;   /* drawer width */
  --drawer-buffer:  30px;    /* §4.4 — extra to hide scrollbar gap */

  /* ---------- Motion (transform/opacity only, SPEC §4.1) ---------- */
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Z-index ladder ---------- */
  --z-base:    1;
  --z-nav:     100;
  --z-drawer:  200;
  --z-overlay: 250;
  --z-modal:   300;
  --z-banner:  400;
  --z-toast:   500;

  /* ---------- Gradients ---------- */
  --grad-brand:    linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-purple) 100%);
  --grad-brand-h:  linear-gradient(90deg, var(--brand-pink) 0%, var(--brand-purple) 100%);
  --grad-soft:     linear-gradient(180deg, var(--brand-pink-soft) 0%, var(--white) 100%);
  --grad-night:    linear-gradient(160deg, #2D0A6B 0%, #6A1B9A 100%);
}