/* =========================================================
   ESMALTE ODONTOLOGIA — tokens de identidade visual
   (cliente FICTÍCIO — modelo demo nº 2 da p.ontu)
   Use SEMPRE estas variáveis no site.
   ========================================================= */

/* Fontes (SIL Open Font License — ver pasta fontes/) */
@font-face {
  font-family: "Fraunces";
  src: url("../fontes/fraunces-soft.woff") format("woff");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fontes/figtree.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Cor primária (SÓ para o que é clicável) ---- */
  --ameixa: #6A377A;          /* HSB 285/55/48 — botões, links, item ativo. Branco 8,61:1 · na porcelana 8,07:1 */
  --ameixa-forte: #522761;    /* hover / pressionado */

  /* ---- Escala do professor (matiz 285, saturação 10, varia o brilho) ---- */
  --tinta: #1E1C1F;      /* B12 — títulos */
  --grafite: #322E33;    /* B20 — texto corrido (12,5:1 na porcelana) */
  --cinza: #706773;      /* B45 — apoio, dicas, borda de campo (5,08:1 na porcelana) — NUNCA sobre névoa/menta */
  --cinza-claro: #AEA1B2;/* B70 — divisórias; texto sobre ameixa-noite (6,48:1) */
  --nevoa: #E0CFE6;      /* B90 — fundos de seção e cards sutis */
  --porcelana: #F5F8FA;  /* fundo principal */
  --branco: #FFFFFF;

  /* ---- Fundo escuro ---- */
  --ameixa-noite: #2E1A36; /* seções escuras. Aqui o botão é INVERTIDO (porcelana + texto ameixa) */

  /* ---- Cores decorativas (NUNCA em botão, link ou item clicável) ---- */
  --menta: #BFE3D6;   /* formas, brilhos, fundos de destaque */
  --marfim: #F3E9D2;  /* escala de cor dos dentes (abas), detalhes quentes */
  --marfim-2: #EADBB8;
  --marfim-3: #E2CC9C;

  /* ---- Feedback ---- */
  --erro: #B42318;     /* 6,16:1 na porcelana */
  --sucesso: #1E7B46;  /* 4,95:1 na porcelana */

  /* ---- Tipografia ---- */
  --fonte-display: "Fraunces", Georgia, "Times New Roman", serif;
  --fonte-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-hero: clamp(2.75rem, 8vw, 6rem);
  --t-h1: clamp(2.25rem, 5.5vw, 4rem);
  --t-h2: clamp(1.875rem, 4vw, 3rem);
  --t-h3: clamp(1.25rem, 2.2vw, 1.5rem);
  --t-texto: clamp(1rem, 1.1vw, 1.125rem);
  --t-pequeno: 0.875rem;
  --lh-hero: 1.08;
  --lh-h: 1.3;
  --lh-texto: 1.6;
  --medida: 62ch;

  /* ---- Espaços (múltiplos de 4) ---- */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-6: 24px;
  --e-8: 32px; --e-12: 48px; --e-16: 64px; --e-24: 96px; --e-32: 128px;

  /* ---- Formas: tudo arredondado e macio, como esmalte ---- */
  --raio-botao: 14px;
  --raio-card: 24px;
  --raio-aba: 18px 18px 40px 40px; /* forma de "aba de escala de cor" */
  --sombra: 0 1px 2px rgba(46,26,54,.06), 0 18px 40px -18px rgba(46,26,54,.25);
  --borda: 1px solid rgba(46,26,54,.12);

  /* ---- Movimento: temperamento CALMO ---- */
  --rapido: 220ms;
  --medio: 520ms;
  --lento: 850ms;
  --curva-entrada: cubic-bezier(.22, .61, .36, 1);
  --curva-saida: cubic-bezier(.55, .06, .68, .19);
  --curva-movimento: cubic-bezier(.65, 0, .35, 1);
  --curva-assinatura: cubic-bezier(.33, 0, .2, 1); /* o "polimento": começa devagar, termina macio */
  --angulo-brilho: 112deg;
  --toque: 48px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --rapido: 0ms; --medio: 0ms; --lento: 0ms; }
}