/* ===================================
   DESIGN SYSTEM - FAMILY COASTER (LIGHT)
   Warm, playful, WCAG-AA legible.
   Token NAMES kept identical to the old
   dark system so base/nav/main.css keep
   working unchanged — only VALUES changed.
   =================================== */

:root {
    /* Soft "chip / border" neutrals (was Executive Dark) */
    --executive-charcoal: #fff2ea;
    --executive-slate: #ffe8dc;
    --executive-graphite: #ffe4d6;
    --executive-steel: #ffd0bb;

    /* Background System - warm, airy, theme-park bright */
    --bg-primary: #fffaf6;      /* warm white */
    --bg-secondary: #fff2ea;    /* soft peach (alt sections + footer) */
    --bg-tertiary: #ffe8dc;
    --bg-quaternary: #ffdcca;

    /* Text Colors - deep coaster-night navy on light (high contrast) */
    --text-primary: #1d2440;
    --text-secondary: #333c5e;
    --text-tertiary: #545d80;
    --text-muted: #6b7391;

    /* Accent - sunset coaster coral. Deep enough to pass AA as TEXT
       (~5:1 on white) while still reading vivid + joyful. */
    --accent-primary: #d6390f;
    --accent-dark: #b42d09;
    --accent-darker: #8f2306;

    /* Fun secondary accents (coaster palette) - additive, used for
       play badges, gate highlights, emoji-adjacent pops. */
    --fun-teal: #1d9e96;
    --fun-yellow: #ffb703;
    --fun-blue: #3a86ff;

    /* Spacing System - 8pt Grid */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Fluid Typography Scale (clamp-based) */
    --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
    --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
    --text-base: clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem);
    --text-lg: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
    --text-xl: clamp(1.2rem, 1.05rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
    --text-3xl: clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem);
    --text-4xl: clamp(2rem, 1.6rem + 2vw, 3.25rem);
    --text-5xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    --text-6xl: clamp(3rem, 2.4rem + 3vw, 4.75rem);

    /* Animation Tokens */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Border Radius - a touch rounder for a friendly feel */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    /* Shadows - soft light-mode (navy-tinted, low alpha) */
    --shadow-sm: 0 1px 2px 0 rgba(29, 36, 64, 0.08);
    --shadow-md: 0 4px 10px -2px rgba(29, 36, 64, 0.10);
    --shadow-lg: 0 12px 24px -6px rgba(29, 36, 64, 0.14);
    --shadow-xl: 0 24px 40px -8px rgba(29, 36, 64, 0.18);
    --shadow-glow: 0 0 30px rgba(214, 57, 15, 0.18);
    --shadow-glow-strong: 0 0 50px rgba(214, 57, 15, 0.28);
}