/* ============================================================
   Rhino Thai Boxing Gym — Design Tokens (single source of truth)
   Ported near-verbatim from the client-approved concept-1 prototype
   (design/prototypes/concept-1/assets/tokens.css), itself extracted
   from design/DESIGN-rhino-boxing.md.

   These :root CSS custom properties are the authoritative design
   tokens for the theme and all widgets. Token names are kept
   consistent with style.css (--font-body, --font-display, --text,
   --atmo0, ...) and the prototype.
   ============================================================ */
:root {
    /* === Atmosphere / Surface === */
    --atmo0: #000000;          /* page background */
    --atmo1: #0A0A0A;
    --atmo2: #141414;          /* card surface */
    --atmo3: #2A2A2A;
    --atmo4: #3A3A3A;
    --light-relief: #FFF8F1;   /* cream alternating sections */
    --overlay: rgba(0,0,0,0.6);

    /* === Accent / Interactive === */
    --text: #FFFFFF;           /* body text on dark */
    --placeholder: #B8B8B8;    /* muted text, captions */
    --disabled: #6D6D6D;
    --brand: #E59744;          /* brand orange — primary accent */
    --brand-amber: #EF9300;    /* amber — secondary accent */
    --brand-vivid: #F36E36;    /* hover / highlight */
    --red: #AE090A;            /* combat red — urgent CTA (BOOK NOW) */
    --red-bright: #E01A1A;     /* bright red — error / alert */
    --link: #E59744;
    --link-hover: #F36E36;
    --border: #2A2A2A;         /* dividers, borders on dark */

    /* === Semantic / Status === */
    --positive: #2E9E5B;
    --positive-20: #D9F0E2;
    --warning: #EF9300;
    --warning-20: #FDE298;
    --negative: #E01A1A;
    --negative-20: #F8D5D5;
    --info: #3C72F9;
    --info-20: #D8E3FE;

    /* === Base / Invariant === */
    --base-dark: #000000;
    --base-light: #FFF8F1;

    /* === Fonts ===
       Stacks end in system-ui, -apple-system, sans-serif so text renders
       in the system sans-serif if Anton / Archivo / Be Vietnam Pro fail to
       load within the swap window. Weight, case and line-height are set on
       the elements (main.css), not here, so they survive the fallback. (Req 2.2, 2.3) */
    --font-display: 'Anton', system-ui, -apple-system, sans-serif;
    --font-body: 'Archivo', 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;

    /* === Letter spacing === */
    --tracking-tight: 0.01em;
    --tracking-wide: 0.08em;
    --tracking-wider: 0.12em;

    /* === Spacing scale === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;
    --space-10: 64px;
    --space-12: 80px;
    --space-16: 120px;

    /* === Radius === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 9999px;     /* pill-shaped buttons */
    --radius-full: 50%;

    /* === Shadow / Elevation === */
    --shadow-subtle: 0 1px 4px rgba(0,0,0,0.4);
    --shadow-card: 0 4px 16px rgba(0,0,0,0.5);
    --shadow-card-hover: 0 12px 32px rgba(0,0,0,0.7);
    --shadow-dropdown: 0 8px 32px rgba(0,0,0,0.7);
    --shadow-nav: 0 2px 12px rgba(0,0,0,0.6);
    --glow: 0 8px 24px rgba(243,110,54,0.4);   /* accent glow — single primary CTA */

    /* === Gradients === */
    --gradient-heat: linear-gradient(135deg, #F36E36 0%, #E59744 100%);
    --gradient-scrim: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);

    /* === Motion === */
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-slow: 300ms;
    --dur-slower: 600ms;
    --ease-out: cubic-bezier(0.16,1,0.3,1);
}