/* ==========================================================================
   Alojoeste — Design tokens
   Todos os valores da marca vivem aqui. Nunca usar cores literais fora deste
   ficheiro.
   ========================================================================== */

:root {
  /* --- Cor: marca ------------------------------------------------------ */
  /* #C35E40 é o tijolo do logótipo original. Em texto pequeno e em botões
     brancos sobre fundo cheio, esse tom fica em 4,2:1 — abaixo do mínimo
     WCAG AA (4,5:1). O acento operacional é por isso 4% mais escuro:
     visualmente igual, mas legível para toda a gente. */
  --tijolo-marca:      #C35E40;  /* referência do logótipo — não usar em texto */
  --tijolo:            #AE5237;  /* acento principal — 5,2:1 sobre branco */
  --tijolo-escuro:     #94422C;  /* hover / active */
  --tijolo-claro:      #DE8365;  /* sobre fundos escuros e cheios */
  --tijolo-palido:     #F2C6B4;  /* sobre fotografia: o tom acima não chega
                                    aos 4,5:1 quando o fundo é uma imagem
                                    desfocada em vez de uma cor sólida */
  --tijolo-10:         #F8EDE8;  /* preenchimento muito leve */
  --tijolo-20:         #F0DBD2;

  /* --- Cor: neutros ---------------------------------------------------- */
  --cacau:             #2B1B13;  /* texto de títulos, fundo escuro */
  --cacau-90:          #3B2519;
  --castanho:          #5C4A40;  /* corpo de texto */
  --castanho-suave:    #79665D;  /* texto secundário — 5,4:1 sobre branco */
  --creme:             #FAF5F0;  /* fundo alternado */
  --creme-fundo:       #F4ECE4;  /* fundo de blocos */
  --branco:            #FFFFFF;
  --linha:             #E7DCD2;  /* bordas */
  --linha-escura:      rgba(255, 255, 255, .14);

  /* --- Papéis semânticos ---------------------------------------------- */
  --fundo:             var(--branco);
  --fundo-alt:         var(--creme);
  --fundo-escuro:      var(--cacau);
  --texto:             var(--castanho);
  --texto-forte:       var(--cacau);
  --texto-suave:       var(--castanho-suave);
  --acento:            var(--tijolo);
  --acento-hover:      var(--tijolo-escuro);
  --borda:             var(--linha);

  /* --- Tipografia ------------------------------------------------------ */
  --fonte-titulo: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --fonte-corpo:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Escala tipográfica — razão 1.25, fluida com clamp() */
  --t-xs:   0.75rem;                                  /* 12px  — sobrelinhas */
  --t-sm:   0.8125rem;                                /* 13px  — legendas */
  --t-base: 1rem;                                     /* 16px  — corpo */
  --t-md:   clamp(1.0625rem, 0.35vw + 1rem, 1.125rem);
  --t-lg:   clamp(1.25rem,  0.6vw + 1.1rem, 1.5rem);
  --t-xl:   clamp(1.5rem,   1.2vw + 1.2rem, 2rem);
  --t-2xl:  clamp(1.875rem, 2.2vw + 1.25rem, 2.75rem);
  --t-3xl:  clamp(2.25rem,  3.4vw + 1.25rem, 3.75rem);
  --t-4xl:  clamp(2.75rem,  5vw + 1.1rem, 5rem);      /* headline do hero */

  --lh-apertado: 1.12;
  --lh-titulo:   1.18;
  --lh-corpo:    1.7;

  --ls-sobrelinha: .16em;  /* letter-spacing das sobrelinhas em maiúsculas */

  /* --- Espaçamento (múltiplos de 4) ------------------------------------ */
  --e-1:  .25rem;   --e-2:  .5rem;    --e-3: .75rem;   --e-4: 1rem;
  --e-5:  1.25rem;  --e-6:  1.5rem;   --e-8: 2rem;     --e-10: 2.5rem;
  --e-12: 3rem;     --e-16: 4rem;     --e-20: 5rem;    --e-24: 6rem;

  /* Ritmo vertical das secções — encolhe em ecrãs pequenos */
  --seccao:   clamp(3.5rem, 6.5vw, 7rem);
  --seccao-g: clamp(4.5rem, 9vw, 9.5rem);

  /* --- Layout ---------------------------------------------------------- */
  --wrap:       1180px;
  --wrap-largo: 1320px;
  --wrap-texto: 720px;   /* medida de leitura confortável */
  --goteira:    clamp(1.25rem, 4vw, 2.5rem);
  --altura-header: 76px;

  /* --- Raio ------------------------------------------------------------ */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 999px;

  /* --- Sombra ---------------------------------------------------------- */
  --sombra-sm: 0 1px 2px rgba(43, 27, 19, .05), 0 2px 6px rgba(43, 27, 19, .04);
  --sombra-md: 0 2px 4px rgba(43, 27, 19, .04), 0 8px 24px rgba(43, 27, 19, .07);
  --sombra-lg: 0 4px 8px rgba(43, 27, 19, .05), 0 20px 48px rgba(43, 27, 19, .11);
  --sombra-foco: 0 0 0 3px rgba(174, 82, 55, .32);

  /* --- Movimento ------------------------------------------------------- */
  --transicao:       180ms cubic-bezier(.4, 0, .2, 1);
  --transicao-lenta: 420ms cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transicao: 1ms;
    --transicao-lenta: 1ms;
  }
}