/* ==========================================================================
   L'INSTANT — tokens de design
   --------------------------------------------------------------------------
   Paleta derivada das cores REALMENTE aplicadas no manual de identidade,
   não das declaradas. O manual apresenta #8C9B87 como cor principal, mas
   essa cor não aparece uma única vez como preenchimento em nenhuma das 19
   páginas; o verde aplicado é #68796D. Ver secção 06 do PLANO.md.

   Contrastes medidos sobre --ground (#EAE5E1), WCAG 2.1:
     #8C9B87  2,35:1  falha tudo — só decorativo
     #68796D  3,70:1  só texto grande (>=24px, ou >=18,66px bold)
     #5F6F57  4,31:1  falha texto corrido por pouco
     #545454  6,06:1  passa AA para texto corrido
   ========================================================================== */

:root {
  /* --- Cor: superfícies --- */
  --ground:        #EAE5E1;  /* fundo base. Nunca branco puro */
  --surface:       #F6F5F1;  /* cartões, blocos elevados */
  --surface-sunk:  #E1DBD5;  /* secções alternadas, campos */

  /* --- Cor: marca --- */
  --green:         #68796D;  /* verde aplicado no manual. Botões, filetes,
                                títulos grandes (>=24px). NUNCA texto corrido
                                nem ligações — 3,70:1 sobre o fundo. */
  --green-deep:    #46534A;  /* títulos, LIGAÇÕES e hover. 6,47:1 sobre o fundo.
                                O --green dá só 3,70:1 e não serve para texto. */
  --sage:          #8C9B87;  /* sálvia declarado. Filetes, ícones — NUNCA texto */
  --sand:          #DCD6C8;  /* bege areia. Padrão de folhas, alternância */
  --copper:        #B08159;  /* acento do arco do chuveiro e dos espelhos.
                                NÃO consta do manual — proposta pendente de
                                validação pela Inês Marques */

  /* --- Cor: texto --- */
  --ink:           #3A3A38;  /* títulos e ênfase */
  --ink-body:      #545454;  /* texto corrido. 6,06:1 — o cinzento que o
                                manual aplica sem o declarar */
  --ink-muted:     #676662;  /* legendas, metadados. 4,60:1 — passa AA.
                                Era #83817C, que dava 3,11:1 e falhava. */

  /* --- Cor: linhas --- */
  --rule:          #CEC7BF;
  --rule-soft:     #DED8D1;

  /* --- Cor: sobre o footer ---
     O footer usa --green-deep, não --green. Sobre #68796D o branco dava
     4,62:1 e não sobrava margem para um segundo nível: o texto esbatido
     só passaria a 93% de branco, ou seja, indistinguível do branco.
     Sobre #46534A o branco dá 8,09:1 e há espaço para hierarquia. */
  --footer-bg:         #46534A;
  --on-green:          #FFFFFF;   /* 8,09:1 */
  --on-green-muted:    #CBD5CD;   /* 5,37:1 */

  /* --- Tipografia ---
     Work Sans e Inter são OFL: auto-hospedadas em woff2, sem CDN.
     Serve performance e RGPD ao mesmo tempo — nenhum pedido a terceiros.
     A Aura do manual é comercial e precisa de licença web; sem confirmação,
     não é usada. A serifada editorial fica pendente de validação. */
  --font-display: "Work Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Escala tipográfica — 1,25 (major third), base 17px.
     O manual não define escala; esta é proposta nossa. */
  --text-xs:   0.7111rem;  /* 12,1px — só para maiúsculas espaçadas */
  --text-sm:   0.8rem;     /* 13,6px */
  --text-base: 1rem;       /* 17px — corpo */
  --text-lg:   1.25rem;    /* 21,3px */
  --text-xl:   1.5625rem;  /* 26,6px */
  --text-2xl:  1.9531rem;  /* 33,2px */
  --text-3xl:  2.4414rem;  /* 41,5px */
  --text-4xl:  3.0518rem;  /* 51,9px */

  --leading-tight: 1.12;
  --leading-snug:  1.3;
  --leading-body:  1.65;

  --tracking-tight: -0.022em;
  --tracking-caps:   0.14em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  /* --- Ritmo vertical ---
     A marca vende lentidão, mas lentidão não é vazio. A primeira versão dava
     8,5rem de padding em cima E em baixo de cada secção: como as secções se
     encostam, cada transição valia 272px, um terço de um ecrã de 720px sem
     nada. A home media 8104px. O ar mudou-se para DENTRO das secções (--gap-*)
     e o ritmo entre elas passou a --section-y, medido para dar ~136px de
     transição em desktop. */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3.25rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;   /* momentos grandes: statement, faixa de CTA */

  /* Padding vertical de secção. Duas secções encostadas dão o dobro:
     4,25rem × 2 = 136px de transição. */
  --section-y: 4.25rem;

  --measure:      68ch;   /* largura máxima de texto corrido */
  --measure-wide: 80rem;  /* largura máxima de layout */

  /* --- Formas ---
     O logo é todo curvas e a capa do manual usa uma curva ampla.
     Raios generosos; nada de cartões retangulares duros. */
  --radius-sm:   6px;
  --radius-md:   14px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  /* Sombra única, muito baixa. --surface (#F6F5F1) sobre --ground (#EAE5E1)
     difere 1,05:1 em luminância: sozinho não define cartão nenhum. O que
     desenha a aresta é o filete, não a sombra — a sombra só a assenta. */
  --shadow-card: 0 1px 2px rgba(58, 58, 56, 0.04), 0 8px 24px rgba(58, 58, 56, 0.05);

  /* --- Movimento ---
     400-600ms, ease-out. Qualquer animação rápida contradiz o que a marca
     vende. Sem paralaxe, sem contadores. */
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration:     480ms;
  --duration-sm:  240ms;

  /* --- Logo: mínimos medidos ---
     Ver website/assets/logo/README.md para a fundamentação. */
  --logo-mark-min:       40px;   /* marca isolada. 48px preferível */
  --logo-horizontal-min: 32px;   /* altura da variante horizontal (4,51:1) */
  --logo-full-min:      200px;   /* largura do lockup com descritor */
}

/* Área de proteção do logo: metade do diâmetro da marca, em todos os lados.
   Regra auto-escalável — derivável da arte, sem valores a memorizar. */
.logo { display: block; padding: calc(var(--logo-size, 40px) * 0.5); }
.logo img { display: block; height: var(--logo-size, 40px); width: auto; }

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0.01ms; --duration-sm: 0.01ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* O site compromete-se com um único registo claro — não há modo escuro.
   Uma marca de spa com paleta bege e verde-sálvia não tem equivalente
   escuro honesto, e inventar um enfraquece a identidade. O fundo é sempre
   pintado explicitamente para não herdar o tema do sistema. */
html { background: var(--ground); color-scheme: light; }