/*
 * tokens.css — Design System v2 (Radio Passion Varadero)
 * Single source of truth for colors, typography, spacing, radii, shadows.
 *
 * v2: responsive tokens with clamp() for app-like mobile experience.
 * All sizes scale fluidly between 375px (mobile) and 1200px (desktop).
 */

:root {
    /* ---- Canvas (backgrounds) — near-black chaud, pas bleu ---- */
    --bg-0: #0a0806;     /* page */
    --bg-1: #14100c;     /* surface 1 */
    --bg-2: #1c1611;     /* cards */
    --bg-3: #2a1f17;     /* hover / elevated */

    /* ---- Borders ---- */
    --border:    rgba(255, 255, 255, 0.08);
    --border-hi: rgba(255, 255, 255, 0.16);

    /* ---- Text ---- */
    --text-1: #ffffff;
    --text-2: rgba(255, 255, 255, 0.72);
    --text-3: rgba(255, 255, 255, 0.50);

    /* ---- Accents (use sparingly, ~15% of screen) ---- */
    --orange:    #ff6b00;
    --orange-hi: #ff8b33;
    --gold:      #f5c518;
    --red:       #e63946;
    --cyan:      #4cc9f0;
    --green:     #2ecc71;

    /* ---- Gradients (reserved: hero + primary CTA) ---- */
    --grad-cuban: linear-gradient(135deg, #ff8533, #f5c518);
    --grad-night: radial-gradient(ellipse at top, #ff8533 0%, #0d1424 60%);

    /* ---- Typography ---- */
    --font-display: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-text:    'Inter',   system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* Scale — fluid with clamp(mobile, preferred, desktop)
       Mobile values are BIGGER than before for readability */
    --fs-display: clamp(28px, 5vw, 40px);
    --fs-h1:      clamp(22px, 3.5vw, 28px);
    --fs-h2:      clamp(18px, 2.8vw, 20px);
    --fs-body:    clamp(15px, 2vw, 15px);
    --fs-small:   clamp(13px, 1.8vw, 13px);
    --fs-meta:    clamp(11px, 1.5vw, 12px);

    --lh-tight: 1.1;
    --lh-snug:  1.2;
    --lh-body:  1.55;

    /* ---- Spacing (fluid 4/8 scale) ---- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: clamp(12px, 2.5vw, 16px);
    --s-5: clamp(16px, 3vw, 24px);
    --s-6: clamp(20px, 4vw, 32px);
    --s-7: clamp(28px, 5vw, 48px);
    --s-8: clamp(36px, 7vw, 64px);

    /* ---- Radii ---- */
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   16px;
    --r-xl:   24px;
    --r-pill: 999px;

    /* ---- Shadows ---- */
    --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.30);
    --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 20px rgba(255, 133, 51, 0.25);

    /* ---- Breakpoints (referenced by JS; CSS queries use raw px) ---- */
    --bp-mobile: 640px;
    --bp-tablet: 1024px;
    --bp-desk:   1200px;

    /* ---- Transition durations ---- */
    --t-fast:   120ms;
    --t-normal: 200ms;
    --t-slow:   320ms;

    /* ---- Touch targets (Apple HIG: 44px min) ---- */
    --touch-min: 44px;
    --touch-sm:  36px;

    /* ---- Z-index system ---- */
    --z-bg:         0;
    --z-content:    10;
    --z-sticky:     50;
    --z-overlay:    90;
    --z-nav:        95;
    --z-fullscreen: 200;
    --z-dropdown:   300;

    /* ---- Additional fonts (pages with editorial feel) ---- */
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-mono:  'DM Mono', 'Fira Mono', monospace;

    /* ---- Semantic accents ---- */
    --success:  #2ecc71;
    --warning:  #ffa500;
    --error:    #e63946;

    /* ---- Accents sémantiques canoniques (lock-in 2026-04-29 — voir .stitch/DESIGN.md)
       Ces 5 tokens sont LES SEULS accents autorisés pour le nouveau code.
       Les anciens (--orange, --gold, --cyan, --green, --red) restent pour rétro-compat. ---- */
    --accent-primary: var(--orange);              /* #ff6b00 — action principale, DJ live */
    --accent-info:    #00d2ff;                    /* notifs, info, auditeurs */
    --accent-warning: var(--gold);                /* #f5c518 — sondage, vote, alerte */
    --accent-success: #06d6a0;                    /* OK, quiz, valider */
    --accent-danger:  #ff4757;                    /* erreur, ban, trigger irréversible */

    /* ---- Vote widget ---- */
    --vote-up:      #4cd137;
    --vote-down:    #ff4757;
    --vote-neutral: #ffa500;

    /* ---- Engagement / ranks ---- */
    --xp-gold:   #f5c518;
    --xp-silver: #c0c0c0;
    --xp-bronze: #cd7f32;

    /* ---- Track display (mobile-first minimums) ---- */
    --fs-track-title:  clamp(15px, 2.5vw, 17px);
    --fs-track-artist: clamp(13px, 2vw, 15px);
    --fs-score:        clamp(17px, 2.5vw, 18px);
    --fs-label:        clamp(11px, 1.6vw, 12px);

    /* ---- Container widths (responsive) ---- */
    --app-gutter: clamp(8px, 2vw, 16px);
    --app-max:    1200px;
    --page-max:   clamp(640px, 80vw, 960px);
}

/* ============================================================
   v3 — App-native overrides
   Ajoutés 2026-04-27. Spec : docs/superpowers/specs/2026-04-27-stitch-v3-app-native-design.md
   ============================================================ */
:root {
    /* Hauteurs des éléments fixes mobile */
    --top-bar-h:     48px;
    --mini-player-h: 60px;
    --nav-bottom-h:  56px;

    /* Gap interne d'une section (titre ↔ contenu) */
    --section-gap:   8px;
}

/* Mobile : fixe les tokens flous. */
@media (max-width: 1024px) {
    :root {
        --s-4:        12px;
        --s-5:        16px;
        --s-6:        20px;
        --app-gutter: 12px;
    }
}

/* ════════════════════════════════════════
   DESKTOP ≥ 1025px — Toutes les pages
   ════════════════════════════════════════ */
@media (min-width: 1025px) {
    :root {
        /* Conteneurs : page-max monte à 1280px au lieu de 960px */
        --page-max:   1280px;
        --app-gutter: 32px;

        /* Typographie : augmente les plafonds pour PC */
        --fs-display: 52px;
        --fs-h1:      34px;
        --fs-h2:      26px;
        --fs-body:    16px;
        --fs-small:   14px;
        --fs-meta:    13px;

        /* Pistes musicales */
        --fs-track-title:  18px;
        --fs-track-artist: 15px;
        --fs-score:        22px;
        --fs-label:        13px;

        /* Espacement */
        --s-4: 16px;
        --s-5: 24px;
        --s-6: 32px;
        --s-7: 48px;
        --s-8: 64px;
    }
}