/* CÓPIA de paleta/tokens.css (fonte da verdade), sem o @import de fontes: elas são carregadas no <head> do index.html. */
/* =========================================================
   MHCB Estúdio — Design tokens (fonte da verdade)
   Base: cores extraídas do logotipo (img/logotipo.png)
   + a luz âmbar das luminárias do estúdio.
   Importar ANTES de qualquer outro CSS da landing page.
   ========================================================= */


:root {
  /* ---------- Cores da marca (do logotipo) ---------- */
  --mhcb-cafe:        #502D16; /* Café — marrom principal do logo (texto/títulos) */
  --mhcb-terracota:   #B17250; /* Terracota — borda e ondas do logo (destaque) */
  --mhcb-pessego:     #FFE6D5; /* Pêssego — fundo do selo do logo */

  /* ---------- Extensões da paleta ---------- */
  --mhcb-noite:       #1C120C; /* Noite — fundo escuro (seções "on air") */
  --mhcb-noite-2:     #2A1B12; /* Noite elevada — cards sobre fundo escuro */
  --mhcb-creme:       #FFF6EF; /* Creme — fundo claro principal da página */
  --mhcb-areia:       #F3D9C6; /* Areia — superfícies/cards sobre creme */
  --mhcb-terracota-escuro: #8F5536; /* Terracota escura — links/texto pequeno sobre claro */
  --mhcb-ambar:       #E8A33D; /* Âmbar — brilho das luminárias; CTA em fundo escuro */
  --mhcb-cacau:       #7A5A45; /* Cacau — texto secundário sobre claro */
  --mhcb-latte:       #C9A893; /* Latte — texto secundário sobre escuro */
  --mhcb-no-ar:       #3FD0B5; /* No ar — LED dos microfones; uso mínimo (badge "gravando", status) */

  /* ---------- Papéis semânticos (tema claro) ---------- */
  --bg:            var(--mhcb-creme);
  --surface:       var(--mhcb-pessego);
  --surface-2:     var(--mhcb-areia);
  --text:          var(--mhcb-cafe);
  --text-muted:    var(--mhcb-cacau);
  --accent:        var(--mhcb-terracota);
  --accent-text:   var(--mhcb-terracota-escuro);
  --border:        color-mix(in srgb, var(--mhcb-terracota) 30%, transparent);

  --btn-bg:        var(--mhcb-terracota);
  --btn-text:      var(--mhcb-noite);
  --btn-bg-hover:  var(--mhcb-terracota-escuro);
  --btn-text-hover:var(--mhcb-pessego);

  /* Seções escuras (hero, "on air", rodapé) */
  --dark-bg:       var(--mhcb-noite);
  --dark-surface:  var(--mhcb-noite-2);
  --dark-text:     var(--mhcb-pessego);
  --dark-muted:    var(--mhcb-latte);
  --dark-accent:   var(--mhcb-ambar);

  /* ---------- Tipografia ---------- */
  --font-display: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Escala fluida (mobile → desktop) */
  --fs-hero:  clamp(2.75rem, 6vw + 1rem, 5.5rem);
  --fs-h1:    clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --fs-h2:    clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  --fs-h3:    clamp(1.25rem, 1vw + 1rem, 1.625rem);
  --fs-body:  1.0625rem;  /* 17px */
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;    /* rótulos mono em caixa alta */

  --lh-tight: 1.05;
  --lh-body:  1.65;
  --tracking-display: -0.02em;
  --tracking-label:    0.14em;

  /* ---------- Forma e espaço ---------- */
  --radius-sm: 8px;
  --radius:    16px;
  --radius-lg: 28px;
  --radius-pill: 999px;   /* ecoa o selo circular do logo */
  --space: 8px;           /* múltiplos de 8 */
  --container: 1200px;
  --shadow-glow: 0 0 60px color-mix(in srgb, var(--mhcb-ambar) 35%, transparent);
}

/* Estilos base sugeridos */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}