/* ============================================
   BPM — Battements Par Match
   Design tokens officiels · à importer en premier
   ============================================ */

:root {
  /* — Couleurs marque — */
  --bpm-ink:          #08080c;  /* fond sombre principal — night stadium */
  --bpm-ink-soft:     #111116;  /* cartes / surfaces sur sombre */
  --bpm-coral:        #ff4a3d;  /* accent · pouls · live · CTA */
  --bpm-coral-deep:   #e23a2e;  /* hover / corail sur fond clair */
  --bpm-cream:        #f5efe6;  /* fond clair */
  --bpm-paper:        #ffffff;  /* surfaces sur clair */

  /* — Texte — */
  --bpm-text-on-dark:       #f5f4f1;
  --bpm-text-on-dark-soft:  #9a98a0;
  --bpm-text-on-light:      #1f1b18;
  --bpm-text-on-light-soft: #6b6862;

  /* — États pronos — */
  --bpm-win:   #2fbf71;  /* prono gagné */
  --bpm-live:  #ff4a3d;  /* match en direct (= corail) */
  --bpm-lock:  #9a98a0;  /* mises fermées */

  /* — Typo — */
  --bpm-font-display: 'Space Grotesk', system-ui, sans-serif;
  --bpm-font-body:    'Space Grotesk', system-ui, sans-serif; /* uniformisé — une seule voix typographique */

  /* — Rayons — */
  --bpm-radius-sm: 8px;
  --bpm-radius-md: 14px;
  --bpm-radius-lg: 20px;
  --bpm-radius-xl: 28px;   /* grands écrans / bottom sheet */

  /* ─ Dérivés app (non dans le token officiel) ─
     Uniquement des nuances d'opacité sur les couleurs marque.
     Pas de nouvelles couleurs inventées. */
  --bpm-border:        rgba(255,255,255,0.07);
  --bpm-border-strong: rgba(255,255,255,0.12);
  --bpm-coral-tint:    rgba(255, 74, 61, 0.10);
  --bpm-win-tint:      rgba(47, 191, 113, 0.12);
  --bpm-lock-tint:     rgba(154, 152, 160, 0.12);
  --bpm-yellow:        #f2a928;
  --bpm-yellow-tint:   rgba(242, 169, 40, 0.12);
  /* Alias raccourcis (dark par défaut) */
  --bpm-text:          #f5f4f1;
  --bpm-muted:         #9a98a0;
}

/* ── BPM Cream Mode — crème premium / luxe sportif ───────────── */
[data-theme="light"] {
  --bpm-ink:           #F5EFE6;  /* fond crème papier */
  --bpm-ink-soft:      #FFF9F1;  /* surfaces */
  --bpm-coral:         #C94B45;  /* rouge grenat chaud */
  --bpm-coral-deep:    #B23F3A;
  --bpm-border:        rgba(32,26,23,0.08);
  --bpm-border-strong: rgba(32,26,23,0.15);
  --bpm-coral-tint:    rgba(201,75,69,0.09);
  --bpm-win-tint:      rgba(47,191,113,0.10);
  --bpm-lock-tint:     rgba(32,26,23,0.06);
  --bpm-yellow-tint:   rgba(184,117,69,0.12);
  --bpm-text-on-dark:       #201A17;
  --bpm-text-on-dark-soft:  #756B63;
  --bpm-text:          #201A17;
  --bpm-muted:         #756B63;
}
/* ─────────────────────────────────────────────────────────────── */

/* Styles de base — thème sombre par défaut */
body {
  background: var(--bpm-ink);
  color: var(--bpm-text-on-dark);
  font-family: var(--bpm-font-body);
  transition: background 0.25s, color 0.25s;
}

h1, h2, h3, .bpm-display {
  font-family: var(--bpm-font-display);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.bpm-btn {
  background: var(--bpm-coral);
  color: var(--bpm-ink);   /* texte encre sur corail — règle marque */
  border: none;
  border-radius: var(--bpm-radius-md);
  font-family: var(--bpm-font-display);
  font-weight: 500;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
}
.bpm-btn:hover { background: var(--bpm-coral-deep); }

.bpm-card {
  background: var(--bpm-ink-soft);
  border-radius: var(--bpm-radius-lg);
}