/* ══════════════════════════════════════════════════════════════════════════════
   DATTA theme.css — bridge para Material Design 3 (Maio/2026)
   ══════════════════════════════════════════════════════════════════════════════
   O design system canonico vive em `colors_and_type.css` (M3 tokens com seed
   #018BFF). As paginas legadas referenciam `theme.css` por historico — este
   arquivo e um shim que completa aliases DATTA-especificos nao cobertos pelo
   design system. Para novas paginas, use `colors_and_type.css` direto +
   classes `.md-*`.

   ORDEM OBRIGATORIA — o DOCUMENTO linka os tres, nesta sequencia:

     <link rel="stylesheet" href="/documentacao/colors_and_type.css">
     <link rel="stylesheet" href="/documentacao/m3-overrides.css">
     <link rel="stylesheet" href="/documentacao/theme.css">

   A sequencia nao e estetica: o `m3-overrides.css` diz, no proprio cabecalho,
   que ganha especificidade "via cascata (ordem de import)", e os aliases daqui
   dependem dos tokens `--md-*` que o `colors_and_type.css` declara. Inverter a
   ordem muda o resultado visual.

   POR QUE OS @import SAIRAM DAQUI

   Este arquivo trazia `@import url('colors_and_type.css')` e
   `@import url('m3-overrides.css')`. Funcionava, mas colocava os dois no pior
   lugar possivel do carregamento: o `theme.css` chega ao browser com
   `?v=<hash>` — reescrito pelo AssetVersionResolver — e portanto vem do cache;
   os dois @import dele, nao, porque a reescrita so alcanca o HTML. Resultado
   medido em producao em 2026-08-31, com cache QUENTE: `theme.css` em 0ms de
   rede, e os dois filhos revalidando EM SERIE logo depois
   (`colors_and_type.css` 162ms, `m3-overrides.css` 166ms) — os dois eram o
   ultimo CSS a liberar o render, ou seja, eram eles que definiam quando a
   primeira pintura acontecia.

   Linkados pelo documento, os tres ganham `?v=<hash>`, saem do cache sem ida a
   rede e descem em PARALELO, em vez de um descobrir o outro em cadeia.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Aliases DATTA extras (nao previstos pelo design system aliases) ───────── */
:root,
[data-theme="light"] {
  /* Fluxo DATTA — teal/aqua de marca (mapeados ao --md-tertiary M3) */
  --teal:        var(--md-tertiary);
  --teal-soft:   var(--md-tertiary-container);
  --aqua:        var(--md-tertiary);

  /* Card / input / popover — surface tonal M3 */
  --card-bg:     var(--md-surface);
  --card-border: var(--md-outline-variant);
  --input-bg:    var(--md-surface-container-low);
  --input-border:var(--md-outline-variant);
  --popover-bg:  var(--md-surface-container-high);
  --popover-border: var(--md-outline-variant);

  /* Muted text/surface */
  --muted:       var(--md-surface-container-low);
  --muted-fg:    var(--md-on-surface-variant);

  /* Scrollbar */
  --scrollbar-thumb:       var(--md-outline-variant);
  --scrollbar-thumb-hover: var(--md-outline);
}

[data-theme="dark"] {
  --teal:        var(--md-tertiary);
  --teal-soft:   var(--md-tertiary-container);
  --aqua:        var(--md-tertiary);
  --card-bg:     var(--md-surface);
  --card-border: var(--md-outline-variant);
  --input-bg:    var(--md-surface-container-low);
  --input-border:var(--md-outline-variant);
  --popover-bg:  var(--md-surface-container-high);
  --popover-border: var(--md-outline-variant);
  --muted:       var(--md-surface-container-low);
  --muted-fg:    var(--md-on-surface-variant);
  --scrollbar-thumb:       var(--md-outline-variant);
  --scrollbar-thumb-hover: var(--md-outline);
}

/* ── Reset minimo (compativel com o reset do colors_and_type.css) ─────────── */
*{margin:0;padding:0}