/* ==========================================================================
   DESIGN TOKENS — Dra. Laiz Andrade (v2 — refresh visual "soft/neumorphic")
   Fonte: Brandbook Completo + protótipo Claude Design (Novo-Site/project).
   Paleta idêntica ao brandbook — só o tratamento visual (sombra/raio) mudou.
   ========================================================================== */

:root {
  /* ---- Cor: paleta de marca ---- */
  --rosa: #E1A7A6;
  --azul: #91B5CF;
  --amarelo: #E8C172;
  --verde: #BACC81;
  --lilas: #AD95C1;
  --bege: #C4A682;
  --creme: #F4F3E1;
  --creme-hover: #ECEBD8;
  --branco: #FFFFFF;
  --rosa-claro: #F0DCDA;
  --azul-claro: #DEE8F0;
  --azul-secao: #E9EEF3;
  --verde-claro: #EAF0DC;
  --amarelo-claro: #F4E9CE;

  --grafite: #3A2A2E;
  --cta-rosa: #926C6B;
  --cta-rosa-hover: #7E5C5B;
  --cta-azul: #5E7586;
  --cta-azul-hover: #4E6373;

  --sucesso: #5C7A4E;
  --erro: #A6483F;
  --aviso: #8A5F14;
  --info: #5E7586;

  /* ---- Tipografia ---- */
  --font-display: "Capriola", "Georgia", serif;
  --font-body: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Caveat", cursive;

  --text-h1: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);
  --text-h2: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
  --text-h3: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
  --text-body: 1rem;
  --text-lead: 1.0625rem;
  --text-caption: 0.8125rem;

  --lh-display: 1.3;
  --lh-h2: 1.3;
  --lh-h3: 1.35;
  --lh-body: 1.65;
  --lh-caption: 1.4;

  /* ---- Espaçamento (unidade base 8px) ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 5rem;
  --sp-8: 5.5rem;
  --sp-9: 7rem;

  --margin-mobile: 24px;
  --margin-tablet: 48px;
  --margin-desktop: 80px;

  --measure: 62ch;
  --max-content: 1240px;

  /* ---- Raio ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Sombra "soft UI" (dupla sombra clara/escura) ----
     Uma única linguagem de sombra usada em todo o site, independente da cor
     de fundo da seção — mantém coerência visual e evita CSS redundante. */
  --shadow-xs: 3px 3px 8px rgba(58, 42, 46, .12), -3px -3px 8px rgba(255, 255, 255, .8);
  --shadow-sm: 4px 4px 10px rgba(58, 42, 46, .12), -3px -3px 8px rgba(255, 255, 255, .8);
  --shadow-md: 6px 6px 14px rgba(58, 42, 46, .10), -6px -6px 14px rgba(255, 255, 255, .75);
  --shadow-lg: 10px 10px 26px rgba(58, 42, 46, .13), -8px -8px 18px rgba(255, 255, 255, .8);
  --shadow-inset: inset 3px 3px 7px rgba(58, 42, 46, .10), inset -3px -3px 7px rgba(255, 255, 255, .7);
  --shadow-float: 8px 8px 20px rgba(58, 42, 46, .28), -4px -4px 10px rgba(255, 255, 255, .5);

  /* ---- Motion (calibrado — nada de loop infinito, exceto decorativos "floaty") ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 560ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}