/* =============================================================
   Dr. Victor Hugo · Odontologia especializada
   Design tokens. Ponto único de cor e de tipografia do site.

   O vocabulário de cor é próprio desta clínica, não uma rampa
   numérica. Os sete nomes abaixo são a paleta literal do projeto:

     --porcelana       #F7FAFB   fundo principal
     --azul-petroleo   #1B4B7A   cor de marca, botões, links
     --azul-noite      #12314F   seções escuras, rodapé
     --cristal         #DCE7EE   acento legível sobre escuro
     --menta           #5FA69B   acento frio de apoio
     --tinta           #10222F   texto principal
     --tinta-suave     #526673   texto secundário

   Tudo o mais nasce desses sete. Cada derivado traz, ao lado, o
   contraste medido do par em que ele é usado. O mínimo para texto
   de corpo é AA (4.5:1).
   ============================================================= */

:root {
  /* ---------- A paleta literal ---------- */
  --porcelana:      #f7fafb;
  --azul-petroleo:  #1b4b7a;
  --azul-noite:     #12314f;
  --cristal:        #dce7ee;
  --menta:          #5fa69b;
  --tinta:          #10222f;
  --tinta-suave:    #526673;

  /* ---------- Derivados de superfície ---------- */
  --branco:         #ffffff;  /* cards e pills */
  --porcelana-fria: #edf3f5;  /* faixas discretas, placeholder de mídia */
  --cristal-lavado: #eaf1f5;  /* painéis de apoio e avisos */

  /* ---------- Derivados de marca ---------- */
  --petroleo-fundo: #164066;  /* hover do botão de marca; não escurece para
                                 fora da paleta, só desce dentro dela */
  --menta-funda:    #3b6f68;  /* a menta rebaixada até 5.5:1 sobre --porcelana:
                                 é ESTA que pode virar rótulo, seta ou ícone
                                 no claro. A --menta pura fica em 2.7:1 e é
                                 decorativa, nunca texto. */

  /* ---------- Céu do hero (gradiente literal do brief) ---------- */
  --sky-top:      #12314f;
  --sky-bottom:   #dce7ee;
  --sky-stop:     84.31%;

  /* Véu do hero. O fundo do céu deste site termina em #DCE7EE, que é claro:
     sem véu, o texto branco no pé do hero cai para menos de 3:1. Em 0.62 a
     faixa de leitura fica em 5.1:1 no pior ponto e em 8.4:1 no miolo, e o
     bando continua visível. É este número que segura o AA do hero. */
  --sky-veil:     rgba(16, 34, 47, 0.62);

  /* ---------- Semânticos ---------- */
  --bg:            var(--porcelana);
  --surface:       var(--branco);
  --fg:            var(--tinta);          /* 16.0:1 sobre --porcelana */
  --fg-muted:      var(--tinta-suave);    /*  5.7:1 sobre --porcelana (AA) */
  --fg-on-dark:    #f7fafb;               /* 12.7:1 sobre --azul-noite */
  --fg-on-dark-mu: rgba(247, 250, 251, 0.78);  /* 8.2:1 sobre --azul-noite */
  --border:        rgba(16, 34, 47, 0.12);
  --border-strong: rgba(16, 34, 47, 0.22);
  --accent:        var(--azul-petroleo);  /* 8.6:1 sobre --porcelana */
  --dark-section:  var(--azul-noite);

  --inset-hairline: rgba(16, 34, 47, 0.06) 0 0 0 1px inset;

  /* ---------- Tipografia ----------
     Sem serifa e sem itálico neste site. O display é a Plus Jakarta Sans,
     precisa e moderna; o corpo é a Inter Tight, que compacta a linha e
     ganha densidade de leitura; o mono é a Kode Mono, que dá ar técnico
     aos rótulos de procedimento. A ênfase do display se faz por COR e PESO,
     nunca por inclinação. */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Kode Mono', ui-monospace, Menlo, monospace;

  --display-weight:      600;
  --display-emph-style:  normal;      /* regra dura: nenhum itálico no site */
  --display-emph-color:  var(--azul-petroleo);
  --display-emph-weight: 800;

  /* Escala fluida entre mobile e desktop */
  --t-display: clamp(2.125rem, 1.2rem + 3.9vw, 3.75rem);     /* hero  34 → 60px */
  --t-h1:      clamp(2rem, 1.4rem + 2.6vw, 3.25rem);         /* 32 → 52px */
  --t-h2:      clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);     /* 28 → 42px */
  --t-h3:      clamp(1.5rem, 1.28rem + 0.95vw, 2rem);        /* 24 → 32px */
  --t-h4:      clamp(1.3125rem, 1.18rem + 0.55vw, 1.625rem); /* 21 → 26px */
  --t-h5:      1.375rem;                                     /* 22px */
  --t-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);    /* 17 → 19px */
  --t-body:    1.0625rem;                                    /* 17px */
  --t-sm:      1rem;                                         /* 16px */
  --t-xs:      0.875rem;                                     /* 14px */
  --t-stat:    clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem);

  --lh-display: 1.06;
  --lh-tight:   1.14;
  --lh-snug:    1.28;
  --lh-body:    1.4;
  --lh-relaxed: 1.45;
  --lh-loose:   1.6;
  --lh-prose:   1.68;   /* corpo longo: a página respira */

  --ls-display: -0.025em;
  --ls-tight:   -0.011em;
  --ls-caps:    0.09em;

  --otf: 'cv03' on, 'cv04' on, 'cv09' on, 'cv11' on;

  /* ---------- Espaçamento (escala 8) ---------- */
  --sp-xs:    4px;
  --sp-sm:    8px;
  --sp-md:    10px;
  --sp-lg:    12px;
  --sp-xl:    16px;
  --sp-2xl:   20px;
  --sp-3xl:   24px;
  --sp-4xl:   32px;
  --sp-5xl:   48px;
  --sp-6xl:   64px;
  --sp-7xl:   96px;

  --section-y: clamp(72px, 8vw, 140px);
  --gutter:    clamp(20px, 4vw, 64px);
  --maxw:      1280px;
  --maxw-text: 62ch;

  /* ---------- Raios ---------- */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 24px;
  --r-card: 24px;
  --r-pill: 999px;

  /* ---------- Movimento ----------
     Eases e durações do template. Não renomear: js/main.js depende
     deles para o reveal em spring e para o parallax. */
  --ease-brand:  cubic-bezier(0.44, 0, 0.56, 1);
  --ease-drift:  cubic-bezier(0.34, 0.64, 0.34, 1);
  --ease-snap:   cubic-bezier(0.27, 0, 0.51, 1);
  --dur-fast:    0.2s;
  --dur-base:    0.4s;
  --dur-slow:    1s;
  --dur-cinema:  2s;
}

/* Breakpoints do template (preservados):
   mobile  ≤ 699.98px
   tablet    700px a 1199.98px
   desktop ≥ 1200px                                            */