/* AMVORA :: tokens, versão 2
   Fonte única de verdade visual. Ver DESIGN.md e MOTION-BLUEPRINT.md.
   Cores da marca extraídas do arquivo oficial do logotipo.

   REGRA DE CONTRASTE MEDIDA, não negociável:
     dourado sobre branco  = 2,18 : 1  -> REPROVADO, nunca texto em fundo claro
     azul sobre dourado    = 8,00 : 1  -> aprovado, é o botão principal
     dourado sobre azul    = 8,00 : 1  -> aprovado, texto e ícone em fundo escuro
     branco sobre azul     = 17,43 : 1 -> aprovado

   A versão 2 é dominada pelo escuro. O azul da marca deixa de ser um acento
   e passa a ser o ambiente: é o céu por onde a página sobe. */

:root {
  color-scheme: dark;

  /* marca, valores exatos do logotipo */
  --azul: #001F47;
  --dourado: #DAA951;

  /* céu, do mais profundo ao mais alto */
  --ceu-0: #00081A;
  --ceu-1: #00142F;
  --ceu-2: #001F47;
  --ceu-3: #0A2E5C;
  --ceu-4: #17416F;

  /* superfícies */
  --superficie-1: rgba(255, 255, 255, .045);
  --superficie-2: rgba(255, 255, 255, .075);
  --borda-1: rgba(218, 169, 81, .22);
  --borda-2: rgba(255, 255, 255, .14);

  /* o cume, única área clara da página */
  --areia: #F6F2EA;
  --branco: #FFFFFF;
  --borda-clara: #E2DACB;
  --tinta: #0B1420;
  --tinta-2: #46505F;

  /* dourado */
  --dourado-500: #DAA951;
  --dourado-400: #EBC685;
  --dourado-300: #F6E3BC;
  --dourado-600: #B8873A;

  /* texto sobre escuro */
  --claro-1: #FFFFFF;
  --claro-2: rgba(255, 255, 255, .84);
  --claro-3: rgba(255, 255, 255, .62);

  /* semânticos */
  --sucesso: #4ADE9B;
  --erro: #FF8A8A;
  --aviso: #F0B429;
  --foco: #7FB2FF;
  --sobre-dourado: #001F47;

  /* tipografia */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --txt-xs: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --txt-sm: clamp(0.9375rem, 0.91rem + 0.15vw, 1rem);
  --txt-base: clamp(1.0625rem, 1.02rem + 0.24vw, 1.1875rem);
  --txt-md: clamp(1.0625rem, 1.01rem + 0.3vw, 1.3125rem);
  --txt-lg: clamp(1.5rem, 1.28rem + 1.05vw, 2.125rem);
  --txt-xl: clamp(1.85rem, 1.45rem + 1.9vw, 3rem);
  --txt-2xl: clamp(2.3rem, 1.62rem + 3.1vw, 4.6rem);
  --linha-corpo: 1.58;
  --linha-titulo: 1.02;
  --medida: 58ch;
  --tracking-titulo: -0.035em;
  --tracking-eyebrow: 0.26em;

  /* espaço */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;
  --e-9: 96px; --e-10: 144px; --e-11: 200px;

  /* forma */
  --raio-sm: 6px;
  --raio-md: 14px;
  --raio-lg: 24px;
  --sombra-alta: 0 32px 80px rgba(0, 8, 26, .55);
  --sombra-media: 0 12px 40px rgba(0, 8, 26, .40);

  /* alvos */
  --alvo-min: 44px;
  --alvo-grande: 56px;

  /* motion, ver MOTION-BLUEPRINT.md seção 7 */
  --dur-1: 180ms;
  --dur-2: 380ms;
  --dur-3: 620ms;
  --dur-4: 1100ms;
  --ease-saida: cubic-bezier(.16, .84, .24, 1);
  --ease-suave: cubic-bezier(.4, 0, .2, 1);
  --desloc: 28px;
  --desloc-g: 64px;
  --escalonar: 90ms;
  --perspectiva: 1200px;

  /* layout */
  --largura: 74rem;
  --largura-texto: 46rem;
  --largura-guia: 34rem;
  --topo-altura: 72px;
}

/* altitude: 0 no topo da página, 1 no fim. Dirige o céu inteiro.
   Registrada para poder ser animada de forma contínua. */
@property --altitude {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* abertura do aparelho na cena de assinatura: 0 fechado e inclinado, 1 frontal.
   Começa em 1 para que, sem suporte a timeline de scroll, o estado final seja o padrão. */
@property --abertura {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

/* progresso da trilha das etapas: 0 vazia, 1 completa. Mesmo raciocínio. */
@property --progresso {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

/* deslocamento de entrada das cadeias no carregamento.
   Registrada para poder transitar, e somada ao parallax de altitude. */
@property --entrada {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* ============================================================
   COMPATIBILIDADE COM A VERSÃO 1
   O guia do hóspede foi escrito contra os nomes da primeira versão.
   Em vez de reescrever a folha inteira e arriscar regressão num
   produto já testado, os nomes antigos continuam existindo e
   apontam para os valores novos. Um nome, um valor, nenhuma cópia.
   ============================================================ */

:root {
  --azul-900: var(--ceu-1);
  --azul-800: var(--ceu-2);
  --azul-700: var(--ceu-3);
  --azul-600: var(--ceu-4);
  --azul-100: #E7ECF3;

  --borda: var(--borda-clara);
  --borda-escura: var(--ceu-4);
  --sobre-escuro: var(--claro-1);
  --dourado-100: #FAF2E3;

  --sombra-1: 0 1px 2px rgba(0, 20, 47, .06), 0 4px 16px rgba(0, 20, 47, .06);
  --sombra-2: var(--sombra-alta);
  --sombra-topo: 0 -2px 14px rgba(0, 8, 26, .18);
}