/* =============================================================
   Mateus Protetico, laboratorio de protese dentaria
   Design tokens. Ponto unico de cor e de tipografia do site.

   Paleta da marca (definida no brief, nao inventada):
     nacar        #F2EBDD   o branco quente da resina
     perola       #E0D3C0   superficie de apoio
     coral seco   #D98C86   acento, o tom de gengiva
     onix         #0D0D0D   primaria: display, botoes, o fundo de estudio
     bronze       #A9754F   acento metalico, rotulos
     fuligem      #262220   texto principal e secoes escuras

   Cada token dependente foi recalculado a partir desses seis, e o
   contraste medido de cada par texto/fundo em uso esta anotado ao
   lado. O minimo para texto de corpo e AA, 4.5:1.

   Duas cores da marca NAO servem como texto sobre fundo claro, e o
   numero e o motivo: bronze puro rende 3.31:1 sobre o nacar e coral
   seco rende 2.20:1. Elas existem para outra funcao. O bronze tem uma
   versao rebaixada (--bronze-deep) que passa nos dois fundos claros;
   o coral seco so vira texto sobre fundo escuro, onde chega a 6.04:1.
   ============================================================= */

:root {
  /* ---------- Cor: superficies ---------- */
  --nacar:        #f2ebdd;  /* fundo principal, o branco quente da resina */
  --perola:       #e0d3c0;  /* superficie de apoio, faixas, placeholders */
  --white:        #fffdf8;  /* cards: nacar puxado para a luz, nunca branco frio */

  /* ---------- Cor: marca ---------- */
  --onix:         #0d0d0d;  /* primaria: botoes, o fundo de estudio do portfolio */
  --onix-800:     #1a1917;  /* hover do botao escuro */
  --fuligem:      #262220;  /* texto principal e secoes escuras */
  --coral-seco:   #d98c86;  /* acento, o tom de gengiva. Decorativo no claro;
                               texto so sobre escuro (6.04:1 sobre --fuligem) */
  --bronze:       #a9754f;  /* acento metalico. Decorativo: 3.31:1 no claro */
  --bronze-deep:  #75543c;  /* o mesmo bronze rebaixado ate passar nos DOIS
                               fundos claros: 5.73:1 no nacar, 4.61:1 na perola.
                               E ESTE que pode virar rotulo, kicker ou icone */

  /* ---------- Cor: texto ---------- */
  --ink:          #262220;  /* texto principal, 13.29:1 sobre --nacar */
  --ink-soft:     #635e59;  /* texto secundario,  5.40:1 sobre --nacar (AA) */

  /* ---------- Rampa da ilustracao ----------
     O unico eixo de cor das pecas do hero e dos cards: do nacar ate a
     fuligem, sem trocar de matiz. As vieiras e as nuvens sao pintadas
     so nestes valores, e por isso o bando le como um objeto so visto
     de varios angulos. Coral seco e bronze estao PROIBIDOS ali dentro:
     um acento dentro da peca nao le como acento, le como erro de
     pintura. Eles existem justamente para destoar no layout. */
  --ramp-1: #f2ebdd;
  --ramp-2: #e0d3c0;
  --ramp-3: #c9c3b7;
  --ramp-4: #a09b91;
  --ramp-5: #78726c;
  --ramp-6: #262220;

  /* ---------- Ceu do hero (gradiente literal do brief) ---------- */
  --sky-top:      #262220;
  --sky-bottom:   #e0d3c0;
  --sky-stop:     84%;

  /* Veu de leitura. O pior fundo do titulo nao e o degrade: e a base do
     ceu, que termina em perola clara, onde texto nacar renderia 1.24:1.
     Medido no browser, o veu abaixo entrega 7.4:1 para o titulo sobre o
     pior ponto do gradiente. O brief fixa 0.55 como piso, e e por isso
     que nenhuma das camadas abaixo desce disso na faixa do texto. */
  --sky-veil:     rgba(38, 34, 32, 0.62);

  /* ---------- Superficies de apoio ----------
     A perola nao serve como fundo de secao inteira: o texto secundario sobre
     ela rende 4.35:1 e reprova AA por pouco. Estas duas sao o mesmo tom um
     passo mais claro, e passam. A perola continua util em faixa curta, em
     placeholder e em moldura, onde nao ha texto de corpo. */
  --paper-soft:  #eae1cf;   /* faixa de secao. --ink 12.14:1 · --ink-soft 4.94:1 */
  --wash:        #ebe2d1;   /* painel de card e aviso. --ink-soft 4.99:1 */

  /* ---------- Cor: semanticos ---------- */
  --bg:            var(--nacar);
  --bg-soft:       var(--paper-soft);
  --surface:       var(--white);
  --fg:            var(--ink);
  --fg-muted:      var(--ink-soft);
  --fg-on-dark:    #f2ebdd;                      /* 16.38:1 sobre --onix */
  --fg-on-dark-mu: rgba(242, 235, 221, 0.80);    /* 10.60:1 sobre --onix */
  --pale:          var(--perola);                /* claro sobre escuro: 13.19:1 */
  --border:        rgba(38, 34, 32, 0.12);
  --border-strong: rgba(38, 34, 32, 0.24);
  --accent:        var(--onix);
  --dark-section:  var(--onix);

  --inset-hairline: rgba(38, 34, 32, 0.07) 0 0 0 1px inset;

  /* ---------- Tipografia ----------
     Sem serifa e sem italico neste site. O display e a Space Grotesk, o corpo
     e a Lexend e a mono marca kickers, numeros e registro. A enfase do
     display se faz por COR e PESO, nunca por inclinacao. */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Lexend', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, Menlo, monospace;
  --otf: 'kern' 1, 'liga' 1, 'calt' 1;

  --display-weight:      500;
  --display-emph-style:  normal;      /* regra dura: nenhum italico no site */
  --display-emph-color:  var(--bronze-deep);
  --display-emph-weight: 600;

  /* 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 pagina respira */

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

  /* ---------- Espacamento (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 duracoes que o js/main.js espelha. Nao renomear: o reveal em
     spring e o parallax dependem destes nomes. */
  --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                                            */