/* Aliceri — tokens de marca (13/11/2026; cor "Cobalto", escolhida pelo André; substituiu a "Turmalina").
   Fonte única das cores, tipos e medidas. O site e o app importam daqui.
   Contraste WCAG medido (fórmula de luminância relativa WCAG 2.x) — ver MARCA.md §4.
   Tema: claro por padrão; escuro por prefers-color-scheme ou data-theme="dark". */

:root {
  /* — Paleta base (nomes de material de obra: base sólida) — */
  --al-basalto: #17181C;      /* texto principal no claro; fundo de ícone (16,27:1 sobre cal) */
  --al-grafite: #2C2E32;
  --al-pedra-600: #55575D;    /* texto secundário no claro (6,63:1 sobre cal) */
  --al-pedra-500: #7F8289;    /* borda de campo / divisor que informa (3,53:1 sobre cal) */
  --al-pedra-300: #CACCD0;    /* divisor decorativo (não informa) */
  --al-pedra-100: #E9EAEC;
  --al-cal: #F4F5F8;          /* fundo claro (cal fria) */
  --al-branco: #FFFFFF;

  /* Cobalto: azul elétrico e saturado (OKLCH H 266°). MESMO matiz do marinho da VPAX: diferenciar por brilho,
     saturação e neutros grafite; nunca usar com dourado. Ver MARCA.md §1. */
  --al-cobalto-700: #1429D9; /* texto/link/botão no claro (8,20:1 sobre cal; branco sobre ele 8,94:1) */
  --al-cobalto-500: #2B57FF; /* cor da marca; gráfico, foco e texto (4,93:1 sobre cal; 5,37:1 sobre branco: AA) */
  --al-cobalto-300: #8FB1FF; /* marca, link e botão no escuro (9,04:1 sobre noite; 8,30:1 sobre superfície) */
  --al-cobalto-50:  #E9F0FF; /* fundo suave de destaque no claro (700 sobre ele 7,82:1) */
  --al-cobalto-950: #14203E; /* fundo suave de destaque no escuro (300 sobre ele 7,58:1). ⚠ ≈ marinho VPAX #111f45 (MARCA.md §1) */

  --al-musgo-600: #2E7A3E;    /* sucesso no claro (4,85:1 sobre cal); verde-folha, longe do matiz da marca */
  --al-musgo-300: #6BCB80;    /* sucesso no escuro (8,79:1 sobre superfície) */

  --al-noite: #0E0F11;        /* fundo escuro */
  --al-noite-sup: #17191C;    /* superfície no escuro */
  --al-noite-borda: #2C2E33;
  --al-osso: #EAEBEE;         /* texto no escuro (16,09:1 sobre noite) */
  --al-osso-mudo: #A2A4AA;    /* texto secundário no escuro (7,07:1 sobre superfície) */

  /* — Papéis semânticos: tema claro — */
  --fundo: var(--al-cal);
  --superficie: var(--al-branco);
  --superficie-2: var(--al-pedra-100);
  --texto: var(--al-basalto);
  --texto-mudo: var(--al-pedra-600);
  --borda: var(--al-pedra-300);
  --borda-forte: var(--al-pedra-500);
  --marca: var(--al-cobalto-500);
  --marca-texto: var(--al-cobalto-700);
  --marca-suave: var(--al-cobalto-50);
  --sobre-marca: var(--al-branco);
  --botao: var(--al-cobalto-700);
  --ok: var(--al-musgo-600);
  --bloco-cima: var(--al-basalto);
  --bloco-base: var(--al-cobalto-500);

  /* — Tipografia (Google Fonts, SIL OFL 1.1) — */
  --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --larg-titulo: 112;   /* eixo wdth do Archivo nos títulos (semi-expandido) */
  --peso-titulo: 750;
  --peso-texto: 420;

  /* — Medidas — */
  --raio: 10px;
  --raio-bloco: 4px;      /* mesmo raio relativo dos blocos do símbolo */
  --gutter: 16px;
  --largura-max: 1160px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: var(--al-noite);
    --superficie: var(--al-noite-sup);
    --superficie-2: #1F2125;
    --texto: var(--al-osso);
    --texto-mudo: var(--al-osso-mudo);
    --borda: var(--al-noite-borda);
    --borda-forte: #686B71;
    --marca: var(--al-cobalto-300);
    --marca-texto: var(--al-cobalto-300);
    --marca-suave: var(--al-cobalto-950);
    --sobre-marca: var(--al-noite);
    --botao: var(--al-cobalto-300);
    --ok: var(--al-musgo-300);
    --bloco-cima: var(--al-osso);
    --bloco-base: var(--al-cobalto-300);
  }
}
:root[data-theme="dark"] {
  --fundo: var(--al-noite);
  --superficie: var(--al-noite-sup);
  --superficie-2: #1F2125;
  --texto: var(--al-osso);
  --texto-mudo: var(--al-osso-mudo);
  --borda: var(--al-noite-borda);
  --borda-forte: #686B71;
  --marca: var(--al-cobalto-300);
  --marca-texto: var(--al-cobalto-300);
  --marca-suave: var(--al-cobalto-950);
  --sobre-marca: var(--al-noite);
  --botao: var(--al-cobalto-300);
  --ok: var(--al-musgo-300);
  --bloco-cima: var(--al-osso);
  --bloco-base: var(--al-cobalto-300);
}