/* ============================================================
   Design Tokens — Montanhesa FM
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* ── Colors ─────────────────────────────────────────────── */
    --color-bg: #0A0A0F;
    --color-bg-2: #10101A;
    --color-bg-card: rgba(255, 255, 255, .04);
    --color-bg-glass: rgba(255, 255, 255, .06);
    --color-border: rgba(255, 255, 255, .08);
    --color-border-glow: rgba(124, 58, 237, .4);

    /* Brand */
    --color-primary: #7C3AED;
    /* violet */
    --color-primary-2: #4F46E5;
    /* indigo */
    --color-accent: #F97316;
    /* orange — logo color */
    --color-accent-2: #FB923C;

    /* Gradient */
    --grad-primary: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%);
    --grad-accent: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);
    --grad-hero: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(124, 58, 237, .35) 0%, transparent 70%);
    --grad-cta: linear-gradient(135deg, #7C3AED, #F97316);

    /* Text */
    --color-white: #FFFFFF;
    --color-text: rgba(255, 255, 255, .87);
    --color-text-muted: rgba(255, 255, 255, .45);
    --color-text-dim: rgba(255, 255, 255, .28);

    /* State */
    --color-live: #EF4444;
    --color-live-glow: rgba(239, 68, 68, .35);

    /* ── Typography ─────────────────────────────────────────── */
    --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;

    --text-xs: .75rem;
    /* 12px */
    --text-sm: .875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2.25rem;
    /* 36px */
    --text-5xl: 3rem;
    /* 48px */
    --text-6xl: 3.75rem;
    /* 60px */
    --text-7xl: 4.5rem;
    /* 72px */

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    /* ── Spacing ─────────────────────────────────────────────── */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;

    /* ── Layout ──────────────────────────────────────────────── */
    --container: 1200px;
    --container-narrow: 800px;

    /* ── Radius ──────────────────────────────────────────────── */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* ── Shadows & Effects ───────────────────────────────────── */
    --shadow-glow-primary: 0 0 40px rgba(124, 58, 237, .3);
    --shadow-glow-accent: 0 0 40px rgba(249, 115, 22, .3);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, .4);
    --shadow-player: 0 -4px 40px rgba(124, 58, 237, .2);

    /* ── Transitions ─────────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms cubic-bezier(.4, 0, .2, 1);
}