/* =====================================================================
   SALAM RADIO DAKAR — jetons de design
   Valeurs provisoires : à confirmer sur le logo réel en PHASE 0.
   ===================================================================== */

:root {
  /* --- Marque ------------------------------------------------------ */
  --srd-navy:      #0B1B3A;
  --srd-navy-2:    #13294F;
  --srd-navy-3:    #1D3A6B;
  --srd-pink:      #E6007E;
  --srd-pink-2:    #FF3DA6;
  --srd-white:     #FFFFFF;
  --srd-off:       #F6F5F2;
  --srd-gold:      #F2B705;   /* accent secondaire, usage parcimonieux */

  /* --- Sémantique (mode clair par défaut) -------------------------- */
  --bg:            var(--srd-off);
  --bg-elevated:   #FFFFFF;
  --bg-inset:      #ECEAE5;
  --surface-brand: var(--srd-navy);
  --text:          #14192B;
  --text-muted:    #5B6478;
  --text-invert:   #FFFFFF;
  --border:        #DCD8D1;
  --accent:        var(--srd-pink);
  --accent-hover:  var(--srd-pink-2);
  --accent-text:   #FFFFFF;
  --on-air:        #FF2D55;
  --offline:       #7A8296;
  --success:       #1B8A5A;
  --warning:       #B76E00;
  --danger:        #C62828;
  --focus-ring:    var(--srd-pink);

  /* --- Typographie ------------------------------------------------- */
  --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  clamp(2.25rem, 1.4rem + 3.4vw, 4rem);

  --lh-tight: 1.15;
  --lh-base:  1.6;

  /* --- Espacement (échelle 4 px) ----------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;

  /* --- Formes et profondeur ---------------------------------------- */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(11 27 58 / 8%);
  --shadow:    0 4px 16px rgb(11 27 58 / 10%);
  --shadow-lg: 0 16px 48px rgb(11 27 58 / 16%);
  --shadow-pink: 0 8px 32px rgb(230 0 126 / 28%);

  /* --- Mise en page ------------------------------------------------- */
  --container:      1280px;
  --container-text: 72ch;
  --header-h:       72px;
  --player-h:       76px;   /* barre ON AIR desktop */
  --player-h-mobile: 64px;  /* lecteur compact bas d'écran */

  /* --- Mouvement ---------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  120ms;
  --dur:       220ms;
  --dur-slow:  420ms;

  --z-header: 100;
  --z-player: 200;
  --z-modal:  300;
  --z-toast:  400;

  color-scheme: light;
}

/* --- Mode sombre : préférence système -------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #070F22;
    --bg-elevated: var(--srd-navy);
    --bg-inset:    var(--srd-navy-2);
    --text:        #EDF0F7;
    --text-muted:  #9AA5BD;
    --border:      #22335A;
    --shadow-sm:   0 1px 2px rgb(0 0 0 / 40%);
    --shadow:      0 4px 16px rgb(0 0 0 / 45%);
    --shadow-lg:   0 16px 48px rgb(0 0 0 / 55%);
    color-scheme: dark;
  }
}

/* --- Mode sombre : choix explicite ----------------------------------- */
:root[data-theme="dark"] {
  --bg:          #070F22;
  --bg-elevated: var(--srd-navy);
  --bg-inset:    var(--srd-navy-2);
  --text:        #EDF0F7;
  --text-muted:  #9AA5BD;
  --border:      #22335A;
  --shadow-sm:   0 1px 2px rgb(0 0 0 / 40%);
  --shadow:      0 4px 16px rgb(0 0 0 / 45%);
  --shadow-lg:   0 16px 48px rgb(0 0 0 / 55%);
  color-scheme: dark;
}

/* --- Points de rupture (rappel, à utiliser en media queries) ---------
   375px  mobile              768px  tablette portrait
   480px  grand mobile       1024px  tablette paysage / petit portable
  1440px  bureau             1920px  grand écran
--------------------------------------------------------------------- */

/* --- Réinitialisation minimale --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  /* Réserve la place du lecteur fixe en bas sur mobile. */
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3);
}

img, video { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Zones tactiles confortables. */
button, .btn, [role="button"] { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.container {
  width: min(100% - 2 * var(--sp-4), var(--container));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}