/* Alcont — tokens de identidade visual
   Importar em qualquer página: <link rel="stylesheet" href="tokens.css">
   Fonte: Outfit (400 texto, 600 rótulos e botões, 700 títulos e logotipo), servida de assets/fontes/.
   O logotipo é o símbolo (o A de três traços) no lugar da letra A, seguido de "lcont": usar os SVGs de assets/logo/.
*/

:root {
  /* Cores do símbolo */
  --al-azul: #186696;         /* cor principal: botões, destaques */
  --al-verde: #129684;        /* apoio */
  --al-amarelo: #FCC00C;      /* só detalhe, nunca em texto */

  /* Cores de interface */
  --al-tinta: #0E1E2B;        /* texto e fundos escuros */
  --al-alta: var(--al-azul);  /* acento (botões) */
  --al-alta-escura: #13547D;  /* links e texto azul sobre fundo claro (contraste AA) */
  --al-alta-clara: #5FB3E6;   /* azul sobre fundo escuro */
  --al-grafite: #3D4A58;      /* texto de apoio */
  --al-nevoa: #F4F6F8;        /* fundo claro */
  --al-linha: #E3E8EC;        /* bordas e divisórias */
  --al-branco: #FFFFFF;

  /* Tipografia — Outfit em tudo */
  --al-fonte: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --al-fonte-logo: 'Outfit', system-ui, sans-serif;
  --al-peso-logo: 700;
  --al-peso-titulo: 700;
  --al-peso-rotulo: 600;
  --al-peso-texto: 400;
  --al-tracking-titulo: -0.02em;
  --al-tracking-rotulo: 0.16em;

  /* Escala de texto */
  --al-t-xs: 12px;
  --al-t-sm: 14px;
  --al-t-md: 16px;
  --al-t-lg: 20px;
  --al-t-xl: 28px;
  --al-t-2xl: 40px;

  /* Espaçamento e cantos */
  --al-esp-1: 4px;
  --al-esp-2: 8px;
  --al-esp-3: 12px;
  --al-esp-4: 16px;
  --al-esp-5: 24px;
  --al-esp-6: 32px;
  --al-esp-7: 48px;
  --al-raio-sm: 10px;
  --al-raio-md: 16px;
  --al-raio-lg: 24px;

  /* Derivados para uso direto */
  --al-bg: var(--al-nevoa);
  --al-superficie: var(--al-branco);
  --al-texto: var(--al-tinta);
  --al-texto-apoio: var(--al-grafite);
}

/* Tema escuro: mesmas marcas, superfícies invertidas. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --al-bg: #0B141C;
    --al-superficie: #121F2A;
    --al-texto: #F2F5F7;
    --al-texto-apoio: #AEB8C2;
    --al-linha: #233240;
    --al-alta-escura: #5FB3E6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --al-bg: #0B141C;
  --al-superficie: #121F2A;
  --al-texto: #F2F5F7;
  --al-texto-apoio: #AEB8C2;
  --al-linha: #233240;
  --al-alta-escura: #5FB3E6;
  color-scheme: dark;
}