/* =========================================================================
   AZORSOUL · STYLE SHEET DA MARCA
   A alma dos Açores em cinco sentidos.
   -------------------------------------------------------------------------
   Design tokens: cor, tipografia, escala, espaçamento, sombras, movimento.
   Importar ANTES de qualquer folha de estilo de componentes.
   ========================================================================= */

/* ---- Fontes locais (pasta /fonts) ------------------------------------- */
/* Ficheiro único mapeado a todos os pesos → sem faux-bold. */
@font-face {
  font-family: "Murecho";
  src: url("../fonts/Murecho-Regular.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sorts Mill Goudy";
  src: url("../fonts/SortsMillGoudy-Regular.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* ----------------------------------------------------------------------
     COR — PALETA DE MARCA
     Principal e secundária carregam a identidade.
     As restantes são acentos: usar muito pontualmente (ou não de todo).
     ---------------------------------------------------------------------- */

  /* Principal — verde criptoméria / musgo */
  --c-primary:        #414c0a;
  --c-primary-700:    #333c08;   /* mais escura, para fundos profundos   */
  --c-primary-900:    #212706;   /* quase preta, texto sobre claro       */
  --c-primary-300:    #6d7a2f;   /* clareada, para estados hover         */
  --c-primary-100:    #dfe2c8;   /* véu de verde, fundos suaves          */

  /* Secundária — dourado hortênsia seca / trigo */
  --c-secondary:      #c3ba76;
  --c-secondary-700:  #a49a58;   /* dourado mais denso                   */
  --c-secondary-200:  #e7e2c4;   /* areia clara                          */
  --c-secondary-100:  #f2efdd;   /* pergaminho                           */

  /* Acentos — só em pequenos toques (dados, tags, um detalhe, um sublinhado).
     Nunca como fundos de secção nem grandes áreas.                        */
  --a-atlantic:       #243d59;   /* azul-oceano profundo                 */
  --a-sky:            #6096c8;   /* azul-céu, golfinhos                   */
  --a-bark:           #a8835e;   /* casca, terra                         */
  --a-terracotta:     #b05e3a;   /* barro, telha                         */
  --a-ember:          #df9034;   /* pôr do sol                           */
  --a-gold:           #d7a43a;   /* luz da tarde                         */
  --a-sun:            #e9bf38;   /* raio de sol entre as árvores         */

  /* Neutros derivados da terra, não do cinzento puro */
  --c-ink:            #26290f;   /* texto principal — verde-tinta        */
  --c-ink-soft:       #4a4d33;   /* texto secundário                     */
  --c-mist:           #8b8d76;   /* legendas, meta                       */
  --c-paper:          #f7f5ec;   /* fundo — luz sobre folha              */
  --c-paper-warm:     #efece0;   /* fundo alterno                        */
  --c-line:           #dcd9c6;   /* filetes, contornos finos             */
  --c-white:          #ffffff;

  /* Papéis semânticos (usar estes nos componentes) */
  --bg:               var(--c-paper);
  --bg-alt:           var(--c-paper-warm);
  --bg-deep:          var(--c-primary-900);
  --text:             var(--c-ink);
  --text-soft:        var(--c-ink-soft);
  --text-muted:       var(--c-mist);
  --accent:           var(--c-secondary);
  --brand:            var(--c-primary);

  /* ----------------------------------------------------------------------
     TIPOGRAFIA
     Fraunces — display, serifa orgânica, voz poética.
     Mulish  — corpo, sans humanista, leitura serena.
     ---------------------------------------------------------------------- */
  --font-display: "Sorts Mill Goudy", "Fraunces", Georgia, "Times New Roman", serif;   /* títulos */
  --font-body:    "Murecho", "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;  /* textos */
  --font-button:  "Murecho", "Mulish", -apple-system, sans-serif;  /* botões */

  /* Escala tipográfica fluida (min .. max via clamp) */
  --step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.30vw, 1.19rem);
  --step-1:  clamp(1.25rem, 1.14rem + 0.55vw, 1.62rem);
  --step-2:  clamp(1.56rem, 1.36rem + 1.00vw, 2.37rem);
  --step-3:  clamp(1.95rem, 1.62rem + 1.65vw, 3.45rem);
  --step-4:  clamp(2.44rem, 1.90rem + 2.70vw, 5.03rem);
  --step-5:  clamp(3.05rem, 2.19rem + 4.30vw, 7.33rem);

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.62;
  --tracking-kicker: 0.28em;
  --tracking-wide:   0.06em;

  /* ----------------------------------------------------------------------
     ESPAÇAMENTO — escala harmónica
     ---------------------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;
  --space-4xl: 13rem;

  --measure: 62ch;              /* largura ideal de leitura              */
  --container: 78rem;           /* largura máxima do conteúdo            */
  --container-narrow: 46rem;

  /* ----------------------------------------------------------------------
     RAIOS, SOMBRAS, MOVIMENTO
     ---------------------------------------------------------------------- */
  --radius-s:  6px;
  --radius-control: 10px;   /* botões, tags, pills, inputs — cantos consistentes */
  --radius-m:  14px;
  --radius-l:  26px;
  --radius-pill: 999px;

  --shadow-s:  0 1px 2px rgba(38,41,15,.06), 0 2px 6px rgba(38,41,15,.05);
  --shadow-m:  0 6px 18px rgba(38,41,15,.08), 0 2px 6px rgba(38,41,15,.06);
  --shadow-l:  0 24px 60px rgba(38,41,15,.14), 0 8px 20px rgba(38,41,15,.08);

  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, .05, .36, 1);
  --dur-fast:   .25s;
  --dur:        .5s;
  --dur-slow:   .9s;
}

/* =========================================================================
   PRIMITIVAS DE MARCA — pequenas classes reutilizáveis
   ========================================================================= */

.kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--c-secondary-700);
}

.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--brand);
}

.lede {
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: var(--lh-snug);
  color: var(--text-soft);
}

/* Botões de marca */
.btn {
  --btn-bg: var(--c-primary);
  --btn-fg: var(--c-paper);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .85em 1.6em;
  font-family: var(--font-button);
  font-weight: 400;
  font-size: var(--step-0);
  letter-spacing: var(--tracking-wide);
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover  { background: var(--c-primary-300); transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-primary);
  border-color: var(--c-primary);
}
.btn--ghost:hover { background: var(--c-primary); --btn-fg: var(--c-paper); }

.btn--on-dark {
  --btn-bg: var(--c-secondary);
  --btn-fg: var(--c-primary-900);
}
.btn--on-dark:hover { background: var(--c-secondary-200); }

.btn--ghost.btn--on-dark {
  --btn-bg: transparent;
  --btn-fg: var(--c-secondary);
  border-color: var(--c-secondary);
}
.btn--ghost.btn--on-dark:hover { background: var(--c-secondary); --btn-fg: var(--c-primary-900); }

/* Ligação-texto com seta */
.link-arrow {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--c-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.link-arrow:hover { color: var(--c-primary-300); gap: .75em; }
.link-arrow .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(2px); }