/* =====================================================================
   base.css — Resets, typographie globale, body
   Dépend de : style.css (tokens CSS)
   ===================================================================== */

/* --- Reset minimal --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Body --- */
body {
  font-family:      var(--font-body);
  font-size:        16px;
  line-height:      1.6;
  color:            var(--buma-ink);
  background-color: var(--buma-cream);
  -webkit-font-smoothing: antialiased;
}

/* --- Conteneur standard --- */
.buma-container {
  max-width:  var(--container-max);
  margin:     0 auto;
  padding:    0 var(--container-padding);
}

/* -----------------------------------------------------------------------
   Typographie
   ----------------------------------------------------------------------- */

/* Titres : Cormorant Garamond italic */
h1, h2, h3,
.buma-title {
  font-family:  var(--font-display);
  font-style:   italic;
  font-weight:  600;
  color:        var(--buma-ink);
  line-height:  1.15;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }

/* Sous-titres / corps : Hanken Grotesk */
h4, h5, h6,
p, li, td, th,
.buma-body {
  font-family: var(--font-body);
  font-style:  normal;
}

/* Logotype Bum@shop : Parisienne uniquement */
.buma-logotype {
  font-family:  var(--font-script);
  font-weight:  400;
  font-style:   normal;
  line-height:  1;
}

/* Le "@" prend la couleur bronze */
.buma-logotype .buma-at {
  color: var(--buma-bronze);
}

/* Micro-labels en majuscules : JetBrains Mono */
.buma-mono,
.buma-label,
.buma-chapter-label {
  font-family:     var(--font-mono);
  font-size:       0.6875rem; /* 11px */
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  font-weight:     500;
}

/* Texte secondaire */
.buma-muted {
  color: var(--buma-muted);
}

/* Liens */
a {
  color:           var(--buma-green);
  text-decoration: none;
}
a:hover {
  color: var(--buma-green-dark);
}

/* --- Séparateur décoratif doré --- */
.buma-divider {
  border: none;
  border-top: 1px solid var(--buma-gold);
  margin: 2rem 0;
}

/* -----------------------------------------------------------------------
   Accessibilité
   ----------------------------------------------------------------------- */

/* Focus visible amélioré */
:focus-visible {
  outline:        2px solid var(--buma-gold);
  outline-offset: 3px;
  border-radius:  4px;
}

/* Texte masqué visuellement mais lisible par les lecteurs d'écran */
.screen-reader-text {
  position:   absolute !important;
  width:      1px;
  height:     1px;
  overflow:   hidden;
  clip:       rect(1px, 1px, 1px, 1px);
  word-wrap:  normal !important;
}

/* -----------------------------------------------------------------------
   Responsive — variables par breakpoint
   ----------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --container-padding: 16px;
  }
}