/* Tokens da OZATI: o único lugar com cores, e também a escala de texto, espaço, largura, cantos e
   movimento que todo componente usa. Cada cor vem em light-dark(claro, escuro): a página segue o tema
   do sistema sem JavaScript, e a escolha manual (data-tema, cookie ozati_tema) só troca o color-scheme.
   A linha simples antes de cada light-dark() é a reserva para navegador antigo. Regras de uso em
   docs/design-system.md. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fontes/inter-latin.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* Cores por papel. Identidade OZATI: preto e branco, com os cinzas neutros da Apple (tokens do
     apple.com em docs/arquitetura/referencias/apple-tokens/: obsidian, carbon, steel, slate, ash, porcelain). */
  --cor-fundo: #ffffff;
  --cor-fundo: light-dark(#ffffff, #000000);
  /* Faixas e cartões que se separam do fundo, sem sombra */
  --cor-superficie: #f5f5f7;
  --cor-superficie: light-dark(#f5f5f7, #1d1d1f);
  --cor-texto: #1d1d1f;
  --cor-texto: light-dark(#1d1d1f, #f5f5f7);
  /* Texto de apoio (slate e ash): 5,1:1 no branco, 4,7:1 na porcelain, 5,8:1 no preto e 4,7:1 no carbon */
  --cor-texto-suave: #6e6e73;
  --cor-texto-suave: light-dark(#6e6e73, #86868b);
  /* Rótulos pequenos: os mesmos cinzas de apoio (a Apple trabalha com dois cinzas de texto) */
  --cor-texto-apagado: #6e6e73;
  --cor-texto-apagado: light-dark(#6e6e73, #86868b);
  --cor-linha: #e8e8ed;
  --cor-linha: light-dark(#e8e8ed, #333336);
  --cor-linha-forte: #d2d2d7;
  --cor-linha-forte: light-dark(#d2d2d7, #6e6e73);
  --cor-hover: #f5f5f7;
  --cor-hover: light-dark(#f5f5f7, #1d1d1f);
  /* Foco de teclado no azul da Apple (apple-blue e electric-link): 4,7:1 no branco e 7:1 no preto */
  --cor-foco: #0071e3;
  --cor-foco: light-dark(#0071e3, #2997ff);
  /* Ação principal: o botão é a inversão do fundo (preto no claro, branco no escuro) */
  --cor-acao: #1d1d1f;
  --cor-acao: light-dark(#1d1d1f, #f5f5f7);
  --cor-acao-hover: #333336;
  --cor-acao-hover: light-dark(#333336, #ffffff);
  --cor-acao-texto: #ffffff;
  --cor-acao-texto: light-dark(#ffffff, #000000);
  /* Retorno de formulários: 5,0:1 e 6,5:1 no branco; 9:1 ou mais no preto */
  --cor-sucesso: #15803d;
  --cor-sucesso: light-dark(#15803d, #4ade80);
  --cor-erro: #b91c1c;
  --cor-erro: light-dark(#b91c1c, #f87171);
  /* Vidro (Liquid Glass da Apple em preto e branco; docs/arquitetura/referencias/apple-liquid-glass.md e
     developer.apple.com/documentation/technologyoverviews/adopting-liquid-glass). É uma lente, não um
     fosco: o fundo aparece através dele, as quinas pegam luz e uma sombra curta o separa do conteúdo. */
  /* Vidro neutro (glass): quase transparente; o texto fica legível pelo desfoque e pela saturação */
  --vidro: rgb(255 255 255 / 0.22);
  --vidro: light-dark(rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.08));
  --vidro-hover: rgb(255 255 255 / 0.4);
  --vidro-hover: light-dark(rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.14));
  /* Vidro forte, para legenda sobre foto: mantém 4,5:1 sobre qualquer imagem */
  --vidro-forte: rgb(255 255 255 / 0.72);
  --vidro-forte: light-dark(rgb(255 255 255 / 0.72), rgb(20 20 22 / 0.68));
  /* Vidro de destaque (prominentGlass): tingido de preto no claro e de branco no escuro, ainda
     translúcido. Pior caso, sobre fundo oposto: 5,7:1 (claro) e 11:1 (escuro). */
  --vidro-acao: rgb(10 10 12 / 0.86);
  --vidro-acao: light-dark(rgb(10 10 12 / 0.86), rgb(255 255 255 / 0.86));
  --vidro-acao-hover: rgb(10 10 12 / 0.94);
  --vidro-acao-hover: light-dark(rgb(10 10 12 / 0.94), rgb(255 255 255 / 0.95));
  /* A lente: luz especular nas quinas, sombra interna na base e sombra curta por fora */
  --vidro-luz: rgb(255 255 255 / 0.95);
  --vidro-luz: light-dark(rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.7));
  --vidro-luz-suave: rgb(255 255 255 / 0.5);
  --vidro-luz-suave: light-dark(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.22));
  --vidro-contorno: rgb(0 0 0 / 0.06);
  --vidro-contorno: light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.1));
  --vidro-sombra-interna: rgb(0 0 0 / 0.16);
  --vidro-sombra-interna: light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.45));
  --vidro-sombra: rgb(0 0 0 / 0.1);
  --vidro-sombra: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.5));
  /* O brilho que acende do ponto tocado (isInteractive) */
  --vidro-toque: rgb(255 255 255 / 0.55);
  --vidro-toque: light-dark(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.3));
  --vidro-desfoque: 10px;
  --vidro-saturacao: 180%;

  /* Tipografia: uma família, hierarquia por tamanho, peso e espaço entre letras */
  /* No iPhone e no Mac, a fonte do sistema é a SF Pro (a da Apple, sem servir o arquivo, que a licença
     não permite); nos outros aparelhos entra a Inter, a mais próxima dela */
  --fonte-texto: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --fonte-codigo: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* Escala do apple.com: display de 80 a 96px, títulos de 48, 40 e 21px, destaque de 21px, corpo de
     17px, apoio de 14px e legenda de 12px */
  --texto-display: clamp(3rem, 1.4rem + 6vw, 6rem);
  --texto-titulo-1: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --texto-titulo-2: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  --texto-titulo-3: 1.3125rem;
  --texto-destaque: clamp(1.1875rem, 1rem + 0.6vw, 1.3125rem);
  --texto-corpo: 1.0625rem;
  --texto-apoio: 0.875rem;
  --texto-legenda: 0.75rem;
  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;
  --entrelinha-titulo: 1.08;
  --entrelinha-texto: 1.47;
  --tracking-display: -0.02em;
  --tracking-titulo: -0.018em;
  --tracking-texto: -0.022em;

  /* Espaço em passos de 4px, e o respiro entre seções que cresce com a tela */
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.5rem;
  --espaco-6: 2rem;
  --espaco-7: 3rem;
  --espaco-8: 4rem;
  --espaco-secao: clamp(4rem, 2rem + 7vw, 9rem);

  /* Larguras: texto corrido, conteúdo da página e faixas largas */
  --largura-texto: 42rem;
  --largura-conteudo: 64rem;
  --largura-ampla: 80rem;
  --margem-lateral: max(1rem, env(safe-area-inset-left));
  --altura-barra: 3.25rem;
  --alvo-toque: 44px;

  /* Cantos 100% redondos (decisão do Kenio, 23/10/2026): botão, campo, selo e link em cápsula;
     cartão, aviso e bloco de código com canto largo. Linhas finas, sem sombra. */
  --raio-controle: 999px;
  --raio-cartao: 28px;
  /* Tecla do teclado de vidro (keyboard.css): o canto da tecla do Mac, o único raio que não é cápsula nem cartão */
  --raio-tecla: 10px;
  --linha: 1px solid var(--cor-linha);

  /* Movimento curto, que explica a mudança. Com movimento reduzido, vira troca imediata. */
  --duracao-rapida: 150ms;
  --duracao-media: 250ms;
  --curva-padrao: cubic-bezier(0.25, 0.1, 0.25, 1);
  --curva-saida: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Mola curta (resposta de ~250 ms, amortecimento ~0,8): o vidro cede e volta, sem oscilar */
  --curva-mola: cubic-bezier(0.3, 1.3, 0.5, 1);
  /* Transição fluida da barra e dos cartões (estilo Bonança / Apple) */
  --curva-fluida: cubic-bezier(0.16, 1, 0.3, 1);
  --duracao-entrada: 600ms;
  --duracao-longa: 750ms;
}

:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }

@media (min-width: 40rem) {
  :root { --margem-lateral: max(1.5rem, env(safe-area-inset-left)); }
}

/* Espaço que a barra flutuante ocupa no topo (folga de cima + cápsula): 52px no celular, 60px do
   tablet para cima, onde os links de 44px entram na barra */
:root { --barra-total: calc(var(--espaco-3) + 3.25rem); }
@media (min-width: 48rem) {
  :root { --barra-total: calc(var(--espaco-3) + 3.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracao-rapida: 0ms;
    --duracao-media: 0ms;
    --duracao-entrada: 0ms;
    --duracao-longa: 0ms;
  }
}