/* Design tokens — Lassiê Clínica Estética
   Fonte: brand book "Apresentação Lassiê" (Clinica Lassie Marketing/Apresentanção Lassiê.pdf).
   As 3 cores abaixo marcadas [swatch oficial] vêm literalmente da página de paleta do brand book
   (hex + CMYK impressos ali). O restante (tons derivados, tinta escura, sombras) é extrapolação
   nossa para dar conta de UI — o brand book não define esses tokens, só a identidade estática.
   Mudar cor/tipografia aqui é evolução de marca, não ajuste de bug — ver CLAUDE.md, "Definição
   contratual" (falha vs. evolução).

   Site institucional comprometido com um único tema (claro) — decisão deliberada, não omissão.
   Clínica de estética premium não alterna claro/escuro por preferência de sistema; o `prefers-
   color-scheme: dark` do visitante estava invertendo a página inteira para um fundo escuro sem
   pedir isso a ninguém. O /painel (ferramenta operacional interna, não a marca voltada à
   paciente) mantém seu próprio suporte a modo escuro em painel/gerar.js — são públicos e
   propósitos diferentes. */

:root {
  /* ===== Paleta de marca ===== */
  --lassie-champagne: #CDB17D;      /* [swatch oficial] dourado champagne — símbolo, destaque primário */
  --lassie-champagne-rgb: 205, 177, 125;
  --lassie-marrom: #AA9368;         /* [swatch oficial] marrom amendoado — wordmark, contraste secundário */
  --lassie-marrom-rgb: 170, 147, 104;
  --lassie-offwhite: #F9F5F1;       /* [swatch oficial] off-white — fundo base da marca */
  --lassie-offwhite-rgb: 249, 245, 241;

  /* Tons derivados (não estão no brand book — extrapolados para hover/active/borda) */
  --lassie-champagne-escuro: #B79865;   /* hover/active sobre champagne */
  --lassie-champagne-claro: #E4D3B3;    /* tint suave — badges, fundos de destaque */
  --lassie-marrom-escuro: #8C7852;      /* hover/active sobre marrom */
  --lassie-marrom-claro: #C9B896;

  /* Tinta escura — aproximada por amostragem das páginas de fundo escuro do brand book
     (~#343434 medido no render); não é um swatch com hex/CMYK impresso como os 3 acima.
     Usar como neutro de texto/superfície escura, não como 4ª cor "oficial" da marca. */
  --lassie-tinta: #332B22;
  --lassie-tinta-suave: #4A4034;

  --lassie-branco: #FFFFFF;

  /* ===== Tokens semânticos — tema único, claro ===== */
  --cor-fundo: var(--lassie-offwhite);
  --cor-fundo-alt: #FCFAF7;            /* variação quase imperceptível do off-white — separa
                                           seções sem recorrer a blocos sólidos de cor da marca */
  --cor-superficie: var(--lassie-branco);
  --cor-superficie-marcada: rgba(var(--lassie-champagne-rgb), 0.12);  /* tint suave, não a cor cheia */
  --cor-borda: rgba(var(--lassie-marrom-rgb), 0.16);
  --cor-borda-forte: rgba(var(--lassie-marrom-rgb), 0.28);
  --cor-texto: var(--lassie-tinta);
  --cor-texto-fraco: rgba(51, 43, 34, 0.62);
  --cor-texto-sobre-acento: var(--lassie-tinta);
  --cor-acento: var(--lassie-champagne);
  --cor-acento-hover: var(--lassie-champagne-escuro);
  --cor-acento-secundario: var(--lassie-marrom);
  --cor-link: var(--lassie-marrom);
  --cor-link-hover: var(--lassie-marrom-escuro);
  --cor-foco: var(--lassie-champagne);

  /* ===== Tipografia =====
     O logotype "LASSIÊ" em si é uma peça de logotipo (curvas customizadas do Illustrator,
     não um typeface) — nunca digitar "LASSIÊ" em texto corrido tentando imitar o traço; usar
     sempre o SVG do logo. Para título/corpo no site, o brand book só nomeia formalmente a
     Montserrat (tipografia complementar). Para dar ao site a leveza rastreada do logotype nos
     títulos, pareamos Montserrat (peso leve, tracking largo) como "display" com a própria
     Montserrat em peso regular no corpo — mantém 1 família só, reduz risco de licenciamento/
     carregamento, e já é a família validada pelo brand book. */
  --fonte-base: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fonte-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --peso-thin: 300;
  --peso-regular: 400;
  --peso-medium: 500;
  --peso-semibold: 600;

  --rastreio-overline: 0.18em;   /* tracking largo, como a tagline "CLÍNICA ESTÉTICA" do logo */
  --rastreio-display: 0.04em;

  --tamanho-display: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
  --tamanho-h1: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
  --tamanho-h2: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --tamanho-h3: 1.25rem;
  --tamanho-corpo: 1.0625rem;
  --tamanho-pequeno: 0.875rem;
  --tamanho-overline: 0.75rem;

  --altura-linha-titulo: 1.15;
  --altura-linha-corpo: 1.7;

  /* ===== Espaçamento (escala 4px) ===== */
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.5rem;
  --espaco-6: 2rem;
  --espaco-7: 3rem;
  --espaco-8: 4.5rem;
  --espaco-9: 6.5rem;

  /* ===== Raio — a marca é construída em curvas suaves (gota, pétalas, arcos da clínica);
     preferir raios generosos a cantos retos em qualquer superfície fechada. ===== */
  --raio-sm: 8px;
  --raio-md: 14px;
  --raio-lg: 24px;
  --raio-arco: 999px 999px 0 0;   /* topo em meia-lua — motivo recorrente no ambiente físico */
  --raio-pill: 999px;

  /* ===== Sombra — suave e quente, nunca cinza puro. Difusa e de baixo contraste: sombra
     "premium" é discreta, não um bloco escuro atrás do cartão. ===== */
  --sombra-sm: 0 1px 3px rgba(51, 43, 34, 0.05);
  --sombra-md: 0 12px 32px -8px rgba(51, 43, 34, 0.10);
  --sombra-lg: 0 24px 56px -12px rgba(51, 43, 34, 0.14);

  --largura-conteudo: 1120px;
  --duracao-transicao: 220ms;
  --easing-padrao: cubic-bezier(0.16, 1, 0.3, 1);
}