/* ============================================================
   CPULSE.TV — DESIGN SYSTEM
   Le pouls créatif de la RDC
   Palette moderne inspirée du drapeau congolais + thème dual
   ============================================================ */

:root {
  /* ============================================================
     COULEURS PRIMAIRES (constantes — ne changent JAMAIS)
     Utilisées dans sections sombres (hero, footer, ticker)
     Hybride : navy StreamVid + accents RDC (09/2026)
     ============================================================ */
  --ink: #06091A;           /* Navy profond (était #0A0E1A, plus saturé comme StreamVid #00031c) */
  --ink-soft: #0F1426;      /* Navy secondaire */
  --ink-2: #161B2E;
  --navy-deep: #00031c;     /* StreamVid body bg */
  --navy-item: #191c33;     /* StreamVid card bg */
  --navy-border: #292c41;   /* StreamVid borders */
  --cobalt: #1F4FD8;        /* Bleu Congo : teinte du drapeau, 6.2:1 sur crème (audit design 09/2026) */
  --cobalt-deep: #12349E;
  --royal: #1E3A8A;
  --sky: #5B8DEF;

  /* CTA StreamVid (primary action buttons) */
  --main: #7b61ff;          /* StreamVid violet primary */
  --main-2: #9e61ff;        /* StreamVid violet bright */
  --main-3: #619bff;        /* StreamVid blue CTA */
  --main-deep: #6c52ee;     /* StreamVid hover */
  --main-glow: rgba(123, 97, 255, 0.35);

  /* ACCENTS RDC */
  --terre: #B85C25;         /* Latérite, cuivre du Katanga (CPULSE 4, sport, cuisine) */
  --terre-deep: #8C4A1F;
  --gold: #F5C518;          /* Étoile du drapeau */
  --amber: #FF9500;
  --coral: #D62839;         /* Bande diagonale — assombri (ex #E63946) : blanc dessus 4.97:1, texte sur crème 4.65:1 */
  --coral-deep: #B91C2E;

  /* SURFACES FIXES (constantes pour sections toujours claires) */
  --paper: #FAF7F0;         /* Crème parchemin */
  --paper-2: #F0EBE0;
  --mist: #E5E7EB;
  --snow: #FFFFFF;

  /* ============================================================
     THEME-AWARE TOKENS — basculent selon [data-theme]
     Utilisés pour les pages qui s'adaptent au thème
     ============================================================ */
  --bg-page: var(--paper);
  --bg-section: var(--paper-2);
  --bg-elevated: var(--snow);
  --bg-input: var(--snow);
  --text-page: var(--ink);
  --text-muted: rgba(10, 14, 26, 0.65);
  --text-soft: rgba(10, 14, 26, 0.6);      /* 0.45 = 3.06:1 (échec AA) → 0.6 = 5.2:1 */
  --border-page: var(--mist);
  --border-strong: rgba(10, 14, 26, 0.15);
  --border-input: rgba(10, 14, 26, 0.45);  /* bordure des champs : 3:1 mini (WCAG 1.4.11), mist = 1.2:1 */
  --accent: var(--cobalt);                 /* couleur de texte/lien d'accent : cobalt sur crème 5.9:1, bascule vers --sky en sombre */
  --gold-text: #7A5E00;                    /* or lisible sur crème (5.7:1) ; l'or pur = 1.5:1 sur crème */
  --coral-text: #B71C2B;                   /* corail lisible sur crème (6.1:1) */
  --shadow-color: rgba(10, 14, 26, 0.08);
  --shadow-color-strong: rgba(10, 14, 26, 0.16);
  --nav-bg: rgba(250, 247, 240, 0.85);
  --nav-border: transparent;
  --on-dark-overlay: rgba(10, 14, 26, 0.85);

  /* ============================================================
     ÉTATS
     ============================================================ */
  --success: #157A52;       /* ex #10B981 (2.4:1 sur crème) → 5.0:1, blanc dessus 5.3:1 */
  --warning: #B45309;       /* ex #F59E0B (2.2:1 sur blanc) → 4.7:1 */
  --live: #DC2626;
  --live-on-dark: #FF6B6B;  /* le rouge live en texte sur encre : #DC2626 = 4.0:1 → 6.9:1 */
  --danger: #C62828;
  --info: #3B82F6;

  /* ============================================================
     TYPOGRAPHIE
     ============================================================ */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* ÉCHELLE TYPOGRAPHIQUE */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-6xl: 5rem;
  --text-7xl: 7rem;
  --text-8xl: 9rem;

  /* ============================================================
     ESPACEMENTS
     ============================================================ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;       /* manquait : annulait le padding de .cat-pill, .admin-btn, .time-slot, .channel-tab, .admin-toast, .highlight-card-content, .player-skip-btn */
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;       /* manquait : .hero-actions (margin), .admin-search input (padding-left), .queue */
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ============================================================
     FORMES & OMBRES
     ============================================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(10, 14, 26, 0.05);
  --shadow-md: 0 4px 12px rgba(10, 14, 26, 0.08);
  --shadow-lg: 0 12px 32px rgba(10, 14, 26, 0.12);
  --shadow-xl: 0 24px 64px rgba(10, 14, 26, 0.16);
  --shadow-glow: 0 0 32px rgba(0, 70, 255, 0.25);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max: 1440px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --nav-height: 72px;
}

/* ============================================================
   DARK THEME OVERRIDE — bascule via [data-theme="dark"]
   Hybrid StreamVid : navy plus profond, surfaces navy-item
   ============================================================ */
[data-theme="dark"] {
  --bg-page: var(--navy-deep);
  --bg-section: #0A0E22;
  --bg-elevated: var(--navy-item);
  --bg-input: #1F2335;
  --text-page: #FFFFFF;
  --text-muted: rgba(255, 255, 255, 0.72);
  --text-soft: rgba(255, 255, 255, 0.55);
  --text-faint: rgba(255, 255, 255, 0.38);
  --border-page: var(--navy-border);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-input: rgba(255, 255, 255, 0.32);
  --accent: var(--main-2);                 /* violet StreamVid bright */
  --gold-text: var(--gold);
  --coral-text: #FF6B6B;
  --success: #34D399;
  --warning: #FBBF24;
  --danger: #F87171;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --shadow-color-strong: rgba(0, 0, 0, 0.75);
  --nav-bg: rgba(0, 3, 28, 0.85);
  --nav-border: rgba(255, 255, 255, 0.06);
  --on-dark-overlay: rgba(0, 0, 0, 0.7);
}