/* ============================================================
   TOKENS — Brand Guidelines Kit
   Único arquivo que muda de cliente para cliente (junto com
   assets/js/brand.config.js). Estrutura espelhada do sistema
   de referência: 5 acentos + 5 escuros pareados + 5 neutros.
   ============================================================ */

:root {
  /* @@BRAND-COLORS-START — bloco reescrito pela interface (_builder) */
  /* ---------- 1. Acentos (5) ---------- */
  --c-accent-1:        #CBA868;  /* Harvest Gold */
  --c-accent-2:        #EECF8F;  /* Harvest Gold */
  --c-accent-3:        #CBA868;  /* Harvest Gold */
  --c-accent-4:        #EECF8F;  /* Harvest Gold */
  --c-accent-5:        #EECF8F;  /* Harvest Gold */

  /* ---------- 2. Escuros pareados ---------- */
  --c-pair-1:          #323A7A;  /* Astronaut */
  --c-pair-2:          #242B6A;  /* Astronaut */
  --c-pair-3:          #242B6A;  /* Astronaut */
  --c-pair-4:          #323A7A;  /* Astronaut */
  --c-pair-5:          #465093;  /* Astronaut */

  /* ---------- 3. Neutros ---------- */
  --c-black:       #232323;
  --c-dark-gray:   #2E2E2E;
  --c-gray:        #C1C1C1;
  --c-light-gray:  #FCFCFC;
  --c-white:       #FCFCFC;

  --c-stone-lighter:   #E6E6EC;
  --c-stone-dark:      #323A7A;

  /* Papéis de tema (interface → aba Cores → Tema) */
  --ink:                #242B6A;
  --theme-dark-bg:      #242B6A;
  --theme-dark-surface: #323A7A;
  /* @@BRAND-COLORS-END */

  /* ---------- 4. Papéis semânticos (tema claro) ---------- */
  --bg:                var(--c-light-gray);
  --bg-elevated:       var(--c-white);
  --fg:                var(--ink);
  --fg-muted:          var(--c-dark-gray);
  --border:            var(--c-gray);
  --nav-active-bg:     var(--c-stone-lighter);
  --nav-hover-bg:      var(--c-gray);
  --footer-bg:         var(--theme-dark-bg);
  --footer-fg:         var(--c-white);
  --footer-border:     var(--theme-dark-surface);

  /* Cor de destaque de texto: no claro usa o par escuro (contraste),
     no escuro usa o acento puro. É a regra do sistema de referência. */
  --c-accent:          var(--c-accent-1);
  --c-accent-text:     var(--c-pair-1);

  /* ---------- 5. Grade ---------- */
  --cols: 8;                 /* 8 colunas até 1079px, 12 a partir de 1080px */
  --sidenav-cols: 2;         /* colunas ocupadas pela navegação lateral     */

  /* ---------- 6. Tipografia ---------- */
  /* @@BRAND-FONT-START */
  --font-brand: "Outfit", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Geologica", var(--font-brand);
  /* @@BRAND-FONT-END */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  /* ---------- 7. Movimento ---------- */
  --t-theme: 500ms cubic-bezier(.4, 0, .2, 1);
  --t-ui: 250ms cubic-bezier(.4, 0, .2, 1);

  /* ---------- 8. Alturas fixas ---------- */
  --header-h: 60px;
}

@media (min-width: 1080px) {
  :root {
    --cols: 12;
    --header-h: 76px;
  }
}

/* ============================================================
   TEMA ESCURO — inversão dos papéis semânticos.
   Ativado pela classe .dark no <html> (persistida em localStorage).
   ============================================================ */
:root.dark {
  --bg:            var(--theme-dark-bg);
  --bg-elevated:   var(--theme-dark-surface);
  --fg:            var(--c-white);
  --fg-muted:      var(--c-gray);
  --border:        var(--theme-dark-surface);
  --nav-active-bg: var(--theme-dark-surface);
  --nav-hover-bg:  var(--theme-dark-surface);
  --footer-bg:     var(--c-light-gray);
  --footer-fg:     #000000;
  --footer-border: var(--c-gray);

  --c-accent-text: var(--c-accent-1);
}

/* ============================================================
   ESCALA FLUIDA
   A referência interpola linearmente em 3 faixas (384→768,
   768→1072, 1080→1920). Aqui a mesma escala é expressa em
   clamp() contínuo — mesmos extremos, sem o degrau que a
   referência produz na fronteira 1079px→1080px.
   Ver docs/ANALISE-REFERENCIA.md, achado #2.
   ============================================================ */
:root {
  /* min = 384px  ·  max = 1920px */
  --step: (100vw - 384px) / (1920 - 384);

  --fs-display: clamp(59px, calc(59px + 55  * var(--step)), 114px); /* nº do capítulo / título de página */
  --fs-h1:      clamp(38px, calc(38px + 35  * var(--step)), 73px);
  --fs-h2:      clamp(30px, calc(30px + 26  * var(--step)), 56px);
  --fs-h3:      clamp(24px, calc(24px + 23  * var(--step)), 47px);  /* = .fluidText da ref */
  --fs-body:    clamp(16px, calc(16px + 8   * var(--step)), 24px);  /* = .b1 */
  --fs-small:   clamp(14px, calc(14px + 6   * var(--step)), 20px);  /* = .b2 */
  --fs-link:    clamp(20px, calc(20px + 10  * var(--step)), 30px);  /* = .b3 */
  --fs-caption: clamp(12px, calc(12px + 4   * var(--step)), 16px);

  /* Espaçamentos fluidos */
  --gutter-half: clamp(12px, calc(12px + 28 * var(--step)), 40px);
  --sp-xs:  clamp(8px,  calc(8px  + 8  * var(--step)), 16px);
  --sp-sm:  clamp(16px, calc(16px + 8  * var(--step)), 24px);
  --sp-md:  clamp(24px, calc(24px + 16 * var(--step)), 40px);
  --sp-lg:  clamp(38px, calc(38px + 21 * var(--step)), 59px);
  --sp-xl:  clamp(73px, calc(73px + 70 * var(--step)), 143px);
  --sp-hero: clamp(114px, calc(114px + 29 * var(--step)), 143px);
}

/* @@BRAND-FONTFACE-START — @font-face gerados pela interface (_builder) */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/marca-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("../fonts/titulos-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
  /* @@BRAND-FONTFACE-END */