/* =========================================================================
   light.css — thème clair aligné sur le portail CreaSong.
   À charger APRÈS style.css : redéfinit la palette (le design system est
   entièrement piloté par variables CSS).
   ========================================================================= */

:root {
  --bg:            #f9fafb;   /* gray-50 */
  --bg-2:          #f3f4f6;   /* gray-100 */
  --surface:       #ffffff;
  --surface-2:     #f9fafb;
  --surface-3:     #f3f4f6;
  --border:        #e5e7eb;   /* gray-200 */
  --border-2:      #d1d5db;   /* gray-300 */
  --text:          #374151;   /* gray-700, comme les titres du portail */
  --text-dim:      #4b5563;   /* gray-600 */
  --text-mute:     #9ca3af;   /* gray-400 */
  --accent:        #2563eb;   /* blue-600, couleur d'action du portail */
  --accent-2:      #1d4ed8;   /* blue-700 */
  --accent-soft:   rgba(37, 99, 235, 0.12);
  --success:       #16a34a;
  --success-soft:  rgba(22, 163, 74, 0.12);
  --danger:        #dc2626;
  --danger-soft:   rgba(220, 38, 38, 0.10);
  --warning:       #d97706;
  --live:          #dc2626;
  --shadow:        0 10px 25px -12px rgba(0, 0, 0, 0.18);
  --shadow-sm:     0 2px 8px -2px rgba(0, 0, 0, 0.08);
  --ring:          0 0 0 3px var(--accent-soft);
}

/* Fonds fixés en dur dans style.css */
body { background: var(--bg); color: var(--text); }
.topbar { background: rgba(255, 255, 255, 0.92); }
.brand .logo { background: #2563eb; box-shadow: 0 6px 18px -6px rgba(37, 99, 235, 0.5); }

/* La scène vidéo reste sombre (zone lecteur), comme dans le portail. */
.stage { background: #000; }

/* Lisibilité sur fond clair */
.badge.warn { color: #b45309; }