:root {

  /* ---------- Vinho institucional (cor principal da marca) ---------- */
  --wine: #6E0F12;
  --bordo: #5A1224;
  --marrom: #8A514E;
  --rosa: #C99A92;

  /* Azul exclusivo do plano empresarial — diferenciação funcional, não decorativa.
     Não substituir por vinho/bege. */
  --azul: #566E88;
  --azul-claro: #8FA2BC;

  /* ---------- Bege rosado: família derivada da referência aprovada ----------
     Um único matiz quente (H≈26) variando só na luminosidade, para dar
     profundidade entre fundo, superfície e superfície elevada sem sair da
     família. --bege-4 é a REFERÊNCIA APROVADA (#CAAA93). */
  --bege-1: #F0E1D3;   /* header, footer-claro, cards, chips */
  --bege-2: #E7D3C2;   /* fundo principal da página */
  --bege-3: #D9BDA6;   /* fundo secundário, seções claras alternadas */
  --bege-4: #CAAA93;   /* REFERÊNCIA cromática aprovada, mantida exata */

  /* Aliases históricos. Os nomes ficam (são usados em ~31 pontos), os valores
     passam a apontar para a nova família. --cream ainda faz papel duplo:
     superfície clara e texto claro sobre vinho — nas duas funções funciona. */
  --cream: var(--bege-2);
  --cream-2: var(--bege-3);
  --cream-3: var(--bege-4);

  /* Bege de texto sobre vinho (topbar, seções escuras). Reaquecido para a nova
     família, mantendo luminosidade alta: 9,6:1 sobre --bordo. */
  --bege: #E6D5C5;

  /* --ink-soft escureceu de #6E555B para acompanhar os fundos mais encorpados:
     sobre #CAAA93 o valor antigo dava 3,1:1 (abaixo de AA). Usado só em
     superfície clara, então escurecer é seguro. */
  --ink: #2B1318;
  --ink-soft: #54393E;

  /* Divisores: opacidade levemente maior para continuarem perceptíveis sobre
     um fundo mais escuro do que o creme anterior. */
  --line: rgba(43, 19, 24, .16);
  --line-soft: rgba(43, 19, 24, .11);

  /* Anel de foco. Padrão vinho (10:1 sobre a nova família bege); as seções
     escuras sobrescrevem para bege em css/base/polish.css. O --rosa anterior
     rendia 2,3:1 sobre creme e cairia para 1,8:1 sobre o novo bege. */
  --focus-ring: var(--bordo);

  --grad-wine: linear-gradient(135deg, #7A1418 0%, #5A1224 55%, #3E0C1A 100%);
  --grad-rose: linear-gradient(135deg, #C99A92 0%, #8A514E 100%);
  --grad-blue: linear-gradient(135deg, #6C86A4 0%, #566E88 100%);

  --shadow-sm: 0 1px 2px rgba(58, 12, 26, .05), 0 4px 12px -6px rgba(58, 12, 26, .10);
  --shadow-md: 0 4px 10px -4px rgba(58, 12, 26, .10), 0 20px 42px -20px rgba(58, 12, 26, .26);
  --shadow-lg: 0 8px 22px -10px rgba(58, 12, 26, .16), 0 46px 84px -34px rgba(58, 12, 26, .42);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);

  /* Uma única família para tudo: Inter (variável, 300-700, romano + itálico).
     A hierarquia vem de tamanho, peso, line-height e tracking — nunca de largura
     de caractere. --font-display continua existindo como alias para não espalhar
     a troca por dezenas de seletores, e para manter o vocabulário do projeto. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);

  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 30px;
  --container: 1200px;

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4.5rem;

  /* Altura da topbar e da nav fixas. Ambas são medidas em runtime por
     js/components/header.js (a topbar quebra em 2 linhas em telas estreitas e
     a nav cresce quando os links dobram, então valor fixo erra). Os números
     abaixo são só o fallback do primeiro paint e do cenário sem JS. */
  --topbar-h: 36px;
  --nav-h: 88px;
  --header-h: calc(var(--topbar-h) + var(--nav-h));

  /* Altura de "uma tela cheia".
     svh = menor viewport possível: no mobile já desconta a barra do navegador,
     então a seção nunca deixa vazar a próxima e — ao contrário de dvh — não
     muda de tamanho durante o scroll, o que evitaria reflow e recálculo do
     ScrollTrigger no meio da rolagem. 100vh fica como fallback. */
  --vh-full: 100vh;
}
@supports (height: 100svh) {
  :root { --vh-full: 100svh; }
}
@media (max-width: 560px) { :root { --topbar-h: 32px; --nav-h: 72px; } }