/**
 * css/core/design-tokens.css
 * ===========================
 * SINGLE SOURCE OF TRUTH for spacing, colour, radius, and layout tokens.
 *
 * LOADING ORDER:
 *   1. css/core/design-tokens.css   ← this file (base values)
 *   2. css/themes/{brand}-theme.css ← maps brand colours onto --theme-* slots
 *   3. css/pages/{page}.css         ← page-specific layout
 *
 * USAGE:
 *   Engine components and pages consume tokens from this file.
 *   Theme files override only the --theme-* colour slots.
 *   Never hardcode hex values or pixel measurements in page CSS -- use tokens.
 *
 * MULTI-BRAND:
 *   To deploy a new brand, create css/themes/{new-brand}.css that overrides
 *   the --theme-* colour tokens below. Spacing, radius, and layout tokens
 *   are brand-neutral and inherit from this file unchanged.
 */

:root {

    /* -- Brand colour slots ---------------------------------------------------
       These are the only tokens a theme file needs to override.
       Default values match the Quy Nhon Sports Bar brand.
    ------------------------------------------------------------------------ */

    --theme-primary:          #00843D;   /* Main brand colour (buttons, borders, accents) */
    --theme-primary-hover:    #006b31;   /* Darkened primary for hover states */
    --theme-secondary:        #FFCD00;   /* Accent / highlight colour */
    --theme-secondary-hover:  #e6b800;   /* Darkened secondary for hover states */
    --theme-accent:           #FFCD00;   /* Alias for secondary -- used in badges, highlights */

    /* -- Surface & background colours ----------------------------------------
       Brand-neutral by default; theme files may override if needed.
    ------------------------------------------------------------------------ */

    --theme-bg:               #FFFFFF;   /* Page background */
    --theme-bg-alt:           #F5F5F5;   /* Alternating section background */
    --theme-surface:          #FFFFFF;   /* Card / panel background */
    --theme-border:           #E0E0E0;   /* Default border colour */

    /* -- Text colours ------------------------------------------------------- */

    --theme-text:             #1A1A1A;   /* Primary body text */
    --theme-text-muted:       #555555;   /* Secondary / helper text */
    --theme-text-light:       #888888;   /* Placeholder / disabled text */

    /* -- Typography --------------------------------------------------------- */

    --theme-font-display:     'Barlow Condensed', 'Arial Narrow', sans-serif;
    --theme-font-sans:        'Inter', 'Helvetica Neue', Arial, sans-serif;

    /* -- Spacing scale ------------------------------------------------------ */

    --space-xs:   0.5rem;    /*  8px */
    --space-sm:   1rem;      /* 16px */
    --space-md:   1.5rem;    /* 24px */
    --space-lg:   2.5rem;    /* 40px */
    --space-xl:   4rem;      /* 64px */
    --space-2xl:  5.5rem;    /* 88px */

    /* -- Border radius ------------------------------------------------------ */

    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  16px;

    /* -- Shadows ------------------------------------------------------------ */

    --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.12);

    /* -- Layout ------------------------------------------------------------- */

    --grid-gap:               var(--space-lg);  /* Default grid gap -- override in theme to tighten cards */
    --container-width:        1200px;
    --nav-height:             72px;
    --nav-link-gap:           0.25rem;

    /* -- Section rhythm ----------------------------------------------------
       Controls vertical padding on .section / .layout-section wrappers.
       Override in theme or page CSS for tighter/looser pages.
    ------------------------------------------------------------------------ */
    --section-spacing:        5rem;   /* 80px -- comfortable desktop rhythm */

    /* -- Card visual tokens ------------------------------------------------
       Named aliases for the card chrome values.
       Themes override these to restyle all cards from one place.
    ------------------------------------------------------------------------ */
    --card-border:            1px solid var(--theme-border);
    --card-shadow:            var(--shadow-sm);

    /* -- Tile tokens -------------------------------------------------------
       Aliases that let themes tighten/loosen tile grids independently
       of the card chrome tokens above.
    ------------------------------------------------------------------------ */
    --tile-gap:               var(--grid-gap);
    --tile-radius:            var(--radius-md);  /* 12px */

    /* -- Transitions -------------------------------------------------------- */

    --transition-fast:        all 0.15s ease;
    --transition-base:        all 0.2s ease;
    --transition-smooth:      all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}