/* ============================================================================
   Tavroo Radio — Design Tokens
   Based on brandbook v1.0
   ============================================================================ */

:root {
    /* === Colors — primary === */
    --color-orange: #FF6B35;
    --color-orange-dim: rgba(255, 107, 53, 0.85);
    --color-navy: #0F1B2D;
    --color-navy-light: #1A2638;
    --color-navy-lighter: #243349;
    --color-sun: #F5A623;

    /* === Colors — neutral === */
    --color-charcoal: #1A1A1A;
    --color-gray-light: #94A3B8;
    --color-gray-mid: #64748B;
    --color-gray-dark: #334155;
    --color-cream: #F5F1E8;
    --color-white: #FFFFFF;

    /* === Surfaces === */
    --bg-page: var(--color-navy);
    --bg-card: var(--color-navy-light);
    --bg-card-hover: var(--color-navy-lighter);
    --bg-input: rgba(255, 255, 255, 0.05);
    --bg-overlay: rgba(15, 27, 45, 0.95);

    /* === Text === */
    --text-primary: var(--color-cream);
    --text-secondary: var(--color-gray-light);
    --text-muted: var(--color-gray-mid);
    --text-accent: var(--color-orange);

    /* === Borders === */
    --border-subtle: rgba(245, 241, 232, 0.08);
    --border-default: rgba(245, 241, 232, 0.15);
    --border-strong: rgba(245, 241, 232, 0.3);

    /* === Typography === */
    --font-display: 'Oswald', 'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    --fs-display-xl: clamp(3rem, 6vw, 5rem);
    --fs-display-l: clamp(2rem, 4vw, 3rem);
    --fs-display-m: clamp(1.5rem, 3vw, 2rem);
    --fs-h1: clamp(2rem, 3.5vw, 2.5rem);
    --fs-h2: clamp(1.5rem, 2.5vw, 2rem);
    --fs-h3: 1.375rem;
    --fs-h4: 1.125rem;
    --fs-body-l: 1.125rem;
    --fs-body: 1rem;
    --fs-body-s: 0.875rem;
    --fs-caption: 0.75rem;

    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* === Spacing === */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* === Layout === */
    --container-max: 1280px;
    --container-pad: clamp(1rem, 4vw, 2rem);
    --grid-gap: var(--space-5);

    /* === Radius === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* === Shadows === */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 24px rgba(255, 107, 53, 0.4);

    /* === Transitions === */
    --transition-fast: 150ms ease;
    --transition: 250ms ease;
    --transition-slow: 400ms ease;

    /* === Z-indexes === */
    --z-player: 50;
    --z-nav: 100;
    --z-modal: 200;
    --z-toast: 300;
}