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

:root {
  /* — Couleurs marque — */
  --bpm-ink:          #19181c;  /* fond sombre principal */
  --bpm-ink-soft:     #232128;  /* 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:    'Inter', system-ui, sans-serif;

  /* — 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;  /* avertissement / coup de sang neutre */
  --bpm-yellow-tint:   rgba(242, 169, 40, 0.12);
}

/* ── Mode clair ──────────────────────────────────────────────── */
[data-theme="light"] {
  --bpm-ink:           #f0f2f7;
  --bpm-ink-soft:      #ffffff;
  --bpm-border:        rgba(0,0,0,0.07);
  --bpm-border-strong: rgba(0,0,0,0.13);
  --bpm-coral-tint:    rgba(255,74,61,0.08);
  --bpm-win-tint:      rgba(47,191,113,0.10);
  --bpm-lock-tint:     rgba(0,0,0,0.06);
  --bpm-yellow-tint:   rgba(242,169,40,0.10);
  --bpm-text-on-dark:       #1f1b18;
  --bpm-text-on-dark-soft:  #6b6862;
}
/* ─────────────────────────────────────────────────────────────── */

/* 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);
}