/* ══════════════════════════════════════════════
   aurorae-estetica — tokens.css
   A direção visual em código (ver yzze/direcao.md).
   Importado do sistema de design "Atelier Aethitica" (Claude Design) e
   adaptado ao padrão yzze — ver yzze/decisoes.md, 2026-08-19.
   Nenhum valor bruto de cor, tamanho ou espaçamento fora daqui.
   Carregar ANTES de styles.css.
   ══════════════════════════════════════════════ */

:root {
  /* ── cor — escala quente de neutros ──
     Sem cor de destaque: o contraste vem de claro/escuro e de tipografia. */
  --espresso-950: #20191A;
  --espresso-900: #2B2721;
  --espresso-800: #39342C;
  --espresso-700: #453F36;
  --espresso-600: #554E43;
  --taupe-500:    #6F675C;
  --taupe-400:    #8A8177;
  --taupe-300:    #A19F9B;
  --sand-400:     #C9BEAE;
  --sand-300:     #DED5C6;
  --sand-200:     #EAE3D8;
  --sand-100:     #F2EEE7;
  --porcelain-100: #FCFAF6;
  --porcelain-50:  #FFFFFB;
  --line-100: #EFEBE3;
  --line-200: #E2DCD1;
  --line-inverse: rgba(255, 255, 251, .16);
  --blush-200: #E8D9CB;
  --blush-300: #D8C2AF;
  /* terracota — o único tom com croma real da paleta, e existe por um
     motivo estreito: rotular seções sobre fundo claro. Está mais escuro
     que o caramelo da referência de propósito, porque texto de 13px
     precisa de 4.5:1 e o tom claro dava 2.7:1. Aqui dá 4.7:1. */
  --terracota-600: #8A6142;
  /* degrau claro da MESMA rampa terracota — não é uma cor nova na paleta.
     Existe para o numeral gigante da Equipe (01/02/03): no blush ele
     sumia contra o papel, no 600 competia com o nome ao lado. Só decora
     (os numerais são aria-hidden), então não precisa passar em contraste. */
  --terracota-400: #B5855D;
  /* o "caramelo" original que o comentário acima menciona — reintroduzido
     por pedido explícito do usuário em 2026-08-20, só para a seção
     Procedimentos, para bater com a referência visual. TROCA CONSCIENTE DE
     ACESSIBILIDADE: dá 2,9:1 sobre --sand-100 e 3,4:1 como texto branco
     sobre este fundo — abaixo do mínimo de 4,5:1 para texto normal.
     Aceitável para rótulo/seta/ícone (elementos de apoio, não o texto
     principal do cartão); mais discutível no botão do fechamento, que é a
     única peça onde este tom carrega uma ação primária — ver
     decisoes.md. NÃO usar fora de `.procedimentos`. */
  /* --terracota-300, --terracota-250, --creme-bloco e --creme-cartao: os
     quatro hex abaixo vieram de conta-gotas do próprio usuário em cima da
     referência (2026-08-20), não de estimativa visual — por isso os
     valores "estranhos" (não redondos, não batendo com a rampa terracota
     principal). NÃO usar fora de `.procedimentos`: são tons de UMA
     referência específica, e o resto do site usa a rampa terracota
     acessível de sempre (ver decisoes.md, mesma data, sobre o porquê de
     não replicar globalmente).

     TROCA CONSCIENTE DE ACESSIBILIDADE, medida contra os dois fundos novos:
     3,26:1 (--terracota-300 sobre --creme-bloco), 3,09:1 (sobre
     --creme-cartao), 3,56:1 (texto branco sobre --terracota-300 no botão) —
     todos abaixo do mínimo de 4,5:1 para texto normal. Ver decisoes.md
     para o porquê disso foi aceito mesmo assim. */
  --terracota-300: #CC8467;
  /* hover do --terracota-300 (pedido do usuário, 2026-08-21) — só onde o
     300 é fundo interativo (.btn--terracota); não é um degrau novo da
     rampa, é o estado :hover dele. */
  --terracota-300-hover: #BF6440;
  /* variante levemente mais rosada do mesmo tom — usada só no acento
     itálico do título, perceptivelmente mais suave que o terracota dos
     botões/ícones/eyebrow na referência, mesmo os dois hex sendo próximos.
     3,04:1 sobre --creme-bloco — mesma troca de acessibilidade acima,
     mitigada aqui por ser texto grande (64px+): o mínimo AA para texto
     grande é 3:1, não 4,5:1, então esta cor especificamente PASSA. */
  --terracota-250: #BB7E6B;
  /* terracota dos rótulos sobre fundo escuro ("ANTES & DEPOIS",
     "HARMONIZAÇÃO FACIAL"). Valor dado pelo cliente em 2026-08-20, colhido
     do arquivo de design. TROCA CONSCIENTE DE ACESSIBILIDADE: dá 3,95:1
     sobre o #20191A do palco de Antes e Depois, abaixo do mínimo de 4,5:1
     para texto de 13px — mesma natureza da troca já registrada no
     --terracota-300 de Procedimentos. Ver decisoes.md. */
  --terracota-200: #A36B58;
  /* dois tons de fundo próprios da seção, também medidos com conta-gotas:
     o do bloco inteiro (mais claro) e o dos cartões pequenos (levemente
     mais escuro, para separar cartão de fundo sem depender de borda). NÃO
     são degraus da rampa sand — mais rosados/quentes que o sand-100 do
     resto do site. */
  --creme-bloco: #F8F4F0;
  --creme-cartao: #F3EEE8;

  /* papéis semânticos — usar estes no styles.css, não os nomes de cor */
  --text-primary:            var(--espresso-800);
  --text-secondary:          var(--taupe-500);
  --text-muted:              var(--taupe-400);
  --text-disabled:           var(--taupe-300);
  --text-inverse:            var(--porcelain-50);
  --text-inverse-secondary:  rgba(255, 255, 251, .66);

  --surface-canvas: var(--sand-300);
  --surface-page:   var(--porcelain-50);
  --surface-card:   var(--porcelain-50);
  --surface-sunken: var(--sand-100);
  --surface-dark:     var(--espresso-800);
  --surface-dark-alt: var(--espresso-900);
  --surface-image:    var(--sand-400);

  --border-subtle:  var(--line-100);
  --border-default: var(--line-200);
  --border-strong:  var(--taupe-400);
  --border-inverse: var(--line-inverse);

  --action-primary-bg:        var(--espresso-800);
  --action-primary-fg:        var(--porcelain-50);
  --action-primary-bg-hover:  var(--espresso-900);
  --action-secondary-bg:       var(--porcelain-50);
  --action-secondary-fg:       var(--espresso-800);
  --action-secondary-bg-hover: var(--sand-100);
  --action-ghost-fg: var(--espresso-800);
  --focus-ring: var(--espresso-800);

  /* véus sobre fotografia — nunca preto neutro, sempre "preto quente" */
  --scrim-hero:   linear-gradient(180deg, rgba(43,39,33,.55) 0%, rgba(43,39,33,.12) 38%, rgba(43,39,33,.78) 100%);
  --scrim-bottom: linear-gradient(180deg, rgba(43,39,33,0) 0%, rgba(43,39,33,.72) 100%);
  --scrim-flat:   rgba(43,39,33,.34);
  /* camada do bloco de texto sobre a foto do destaque em Procedimentos:
     10% de transparência (90% opaca), não um degradê — a foto atravessa o
     cartão inteiro e fica quase apagada atrás do texto, sem transição de
     clara pra escura. Ver decisoes.md, 2026-08-20. */
  --scrim-destaque: rgba(43,39,33,.9);

  /* ── tipografia ──
     Instrument Sans carrega tudo; Instrument Serif itálico é o único acento —
     nunca as duas no mesmo trecho, nunca nenhuma. Ver direcao.md § Tipografia. */
  --font-sans:    "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif:   "Instrument Serif", "Times New Roman", Times, serif;
  --font-display: var(--font-sans);
  --font-accent:  var(--font-serif);

  --text-display-xl: 128px;
  --text-display-lg: 52px;
  --text-display-md: 44px;
  --text-display-sm: 32px;
  --text-title:      24px;
  --text-body-lg:    18px;
  --text-body:       16px;
  --text-body-sm:    14px;
  --text-caption:    13px;
  /* nome da aba em serif romano: o serif pesa menos que o sans no mesmo
     corpo, então precisa de um degrau acima do --text-title para ter a
     mesma presença. Cresce com a tela, mas com teto — três abas lado a
     lado precisam caber na régua sem quebrar. */
  --text-aba: clamp(1.375rem, 1.05rem + .62vw, 1.75rem);
  --text-micro:      11px;

  --leading-display: 1.02;
  --leading-heading: 1.12;
  --leading-title:   1.25;
  --leading-body:    1.55;
  --leading-relaxed: 1.7;

  --tracking-display: -.028em;
  --tracking-heading: -.02em;
  --tracking-title:   -.012em;
  --tracking-body:    -.004em;
  --tracking-caption: 0;
  --tracking-wide:    .06em;
  /* só para o logotipo do menu de tela cheia (AURORAE versaletado) — nenhum
     outro rótulo do site pede tanto tracking quanto uma wordmark isolada */
  --tracking-logotipo: .22em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* hero: ~104px em 1920, que é onde a proporção foi calibrada.
     O teto é 8.5rem e não 6.5rem porque em 6.5 a conta já saturava em
     1920: de 1080p para 2K a fonte ficava travada no mesmo tamanho
     absoluto numa tela 33% maior, e encolhia de 5,4% para 4,1% da
     largura. Com 8.5 ela segue a tela até ~2630px e só então trava —
     abaixo de 1920 nada muda, a conta nem chega perto do teto.
     Ver direcao.md § Tipografia. */
  --text-hero: clamp(2.6rem, 1.6rem + 4.2vw, 7.5rem);

  /* ── espaço — base 4px ── */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --space-40: 160px;

  --section-padding-y:       var(--space-40);
  --section-padding-y-tight: var(--space-20);
  --gutter-desktop: 64px;
  --gutter-mobile:  24px;
  --container-max:  1440px;
  /* moldura do topo + hero. Larga de propósito: o design nasceu em 1440,
     onde ela não age e o gutter continua sendo os 64px originais. Só entra
     em cena em monitores ultra-wide, onde ancorar na borda real espalha
     título e apoio para extremos distantes demais e quebra a harmonia. */
  --container-wide: 2200px;
  --measure:        60ch;
  --measure-tight:  44ch;

  --control-height-lg: 56px;
  --control-height:    48px;
  --control-height-sm: 40px;
  --control-padding-x: 28px;

  /* ── forma ── */
  --radius-none:   0px;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     12px;
  --radius-sheet:  24px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ── elevação ── */
  --shadow-none:     none;
  --shadow-raised:   0 1px 2px rgba(43,39,33,.04), 0 8px 24px rgba(43,39,33,.06);
  --shadow-overlay:  0 2px 6px rgba(43,39,33,.06), 0 24px 64px rgba(43,39,33,.14);
  --shadow-sheet:    0 -8px 48px rgba(43,39,33,.18);
  --blur-nav:   saturate(160%) blur(32px);
  /* barra de navegação sobre o conteúdo. Escura, não clara: o header nasce
     sobre a fotografia com texto claro, e inverter para preto-no-branco no
     meio da rolagem entrega um header genérico.

     Cor pedida pelo usuário (2026-08-21), #582E1D — mantém o mesmo alpha
     .94 e o blur da versão anterior (base espresso-800), só troca o tom. */
  --glass-nav:  rgba(88, 46, 29, .94);
  --blur-glass: blur(24px);
  --glass-light: rgba(255,255,251,.72);
  --glass-dark:  rgba(43,39,33,.42);

  /* ── camadas ──
     Escala nomeada em vez de números avulsos espalhados pelo CSS: quando
     tudo é 20, 30, 9999, ninguém sabe o que deve ficar por cima de quê. */
  --z-base:    1;
  --z-veu:     5;
  --z-conteudo: 6;
  --z-topo:    20;
  --z-flutuante: 25;
  --z-menu:    30;
  --z-skip:    40;

  /* ── movimento ── */
  --ease-standard: cubic-bezier(.22,1,.36,1);
  --ease-entrance: cubic-bezier(.16,1,.3,1);
  --ease-exit:     cubic-bezier(.4,0,1,1);
  --ease-linear:   linear;
  --duration-instant:  120ms;
  --duration-fast:     200ms;
  --duration-base:     320ms;
  --duration-slow:     560ms;
  --duration-editorial: 900ms;
  --reveal-distance: 24px;
  --image-zoom-hover: 1.03;
  --press-scale: .985;

  /* proporção dos slots fotográficos — trocar imagem não pode exigir
     mexer em layout. */
  --slot-retrato:   4 / 5;
}