/* Dravina 2 · tokens (fonte: 05_Marca/DESIGN.md v2). Todo arquivo do site importa este. Não criar cor fora daqui. */
@import url("https://fonts.googleapis.com/css2?family=Martian+Mono:wdth,wght@87.5..112.5,400;87.5..112.5,700&family=Schibsted+Grotesk:wght@400;500;800&display=swap");

:root {
  --breu: #0E1114;
  --luz: #F1F2F3;
  --sodio: #FFA41B;
  --passado-noite: #7E8792;
  --passado-dia: #59616B;
  --madrugada: #1A1F25;
  --concreto: #DCDFE3;
  --ocorrencia-noite: #FF6A55;
  --ocorrencia-dia: #C2382A;

  /* papéis — o tema troca só estes 5 */
  --fundo: var(--luz);
  --texto: var(--breu);
  --secundario: var(--passado-dia);
  --linha: var(--concreto);
  --ocorrencia: var(--ocorrencia-dia);

  --f-frase: "Schibsted Grotesk", system-ui, sans-serif;
  --f-medida: "Martian Mono", ui-monospace, monospace;

  --t-titulo: clamp(2.25rem, 5.2vw, 4.75rem);
  --t-secao: clamp(1.75rem, 3.6vw, 3rem);
  --t-grande: 1.1875rem;
  --t-corpo: 1.0625rem;
  --t-pequeno: 0.9375rem;
  --t-medida: 0.8125rem;

  --margem: 16px;
  --raio: 4px;
  --d-micro: 120ms; --d-pequeno: 220ms; --d-saida: 160ms; --d-rastro: 400ms; --d-anoitecer: 600ms;
  --e-entra: cubic-bezier(0.16, 1, 0.3, 1);
  --e-sai: cubic-bezier(0.7, 0, 0.84, 0);
}
@media (min-width: 900px) { :root { --margem: 56px; } }

/* noite: o script de tema põe data-tema="noite" no <html> pelo sol de Recife (ou escolha guardada) */
:root[data-tema="noite"] {
  --fundo: var(--breu);
  --texto: var(--luz);
  --secundario: var(--passado-noite);
  --linha: var(--madrugada);
  --ocorrencia: var(--ocorrencia-noite);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--f-frase); font-size: var(--t-corpo); line-height: 1.55; color: var(--texto); background: var(--fundo);
  transition: background-color var(--d-anoitecer) var(--e-entra), color var(--d-anoitecer) var(--e-entra); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.medida, time, .hora { font-family: var(--f-medida); font-variant-numeric: tabular-nums; font-stretch: 87.5%; }
.agora { color: var(--sodio); } /* só o agora; nunca sobre fundo claro como texto */
:root:not([data-tema="noite"]) .agora { color: var(--texto); background: var(--sodio); padding: 0 .15em; }
.demonstracao::after { content: "demonstração"; font-family: var(--f-medida); font-size: .75rem; color: var(--secundario);
  border: 1px solid var(--linha); padding: 1px 6px; margin-left: 8px; border-radius: 2px; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; } }