/* Date: 2026-07-06 | File: assets/css/tokens.css
   Purpose: Design tokens — the ONLY place colors, fonts, spacing are defined.
   Loaded by header.php BEFORE style.css. Never hardcode these values elsewhere. */

:root {
    /* Brand */
    --brand-primary: #d1320d;
    --brand-secondary: #005786;
    --brand-accent-blue: #0078d4;
    --brand-accent-green: #00a651;
    --brand-accent-red: #d32f2f;

    /* Text */
    --text-primary: #222222;
    --text-secondary: #555555;
    --text-muted: #676767;
    --text-light: #999999;
    --text-on-dark: #ffffff;

    /* Backgrounds */
    --bg-white: #ffffff;
    --bg-glass: rgba(255,255,255,0.88);
    --bg-light: #f8f9fa;
    --bg-alt: #f9f9f9;
    --bg-dark: #0b2634;
    --bg-featured-band: #003d5e;
    --bg-gradient-hero: linear-gradient(135deg, #cfe6f7 0%, #f2dada 55%, #f7b3a6 100%);
    --bg-gradient-cta: linear-gradient(135deg, #005786 0%, #003d6b 100%);
    --bg-gradient-footer: linear-gradient(120deg, #f1c2b6, #d9d9d9);

    /* Borders */
    --border-light: #e7ebef;
    --border-medium: #d0d0d0;
    --border-dark: #696969;

    /* Spacing */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-base: 16px;
    --space-md: 20px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    --space-5xl: 80px;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-xs: 12px;
    --font-sm: 14px;
    --font-base: 16px;
    --font-md: 18px;
    --font-lg: 20px;
    --font-xl: 24px;
    --font-2xl: 28px;
    --font-3xl: 36px;
    --font-4xl: 48px;
    --font-hero: 56px;
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose: 1.8;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Radius & Shadows */
    --radius-sm: 8px;
    --radius-base: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 999px;
    --shadow-xs: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-sm: 0 4px 8px rgba(0,0,0,0.1);
    --shadow-base: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
    --overlay-dark: rgba(0,0,0,0.5);

    /* Motion & Layers */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-modal: 100;

    /* Layout */
    --container-max: 1200px;
    --container-narrow: 800px;
    --header-height: 72px; /* unscrolled header; JS syncs the real value on load/resize */
}