/* Cores, raios, sombras e fonte. O modo escuro só troca os valores. */

/*
  Papel e tinta: fundo papel-ofício frio, texto em tinta azul-escura e o
  azul de carimbo como cor de ação. As cores de situação só aparecem onde
  informam (régua de prazos, contadores e selos de situação).
*/
:root {
  color-scheme: light dark;
  --paper: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --ink: #19202c;
  --muted: #5d6677;
  --faint: #8a93a3;
  --line: #e2e5eb;
  --line-strong: #cdd2db;
  --brand: #233a7a;
  --brand-hover: #1b2e63;
  --brand-soft: #e9edf8;
  --on-brand: #ffffff;
  --overdue: #b42318;
  --overdue-soft: #fdecea;
  --soon: #a15c07;
  --soon-soft: #fdf3e1;
  --ok: #1d6b45;
  --ok-soft: #e7f4ec;
  --focus: #3b5bdb;
  --backdrop: rgb(16 22 38 / 44%);
  --shadow-dialog: 0 24px 60px -20px rgb(16 22 38 / 35%);
  --radius: 8px;
  --radius-small: 6px;
  --font: "Public Sans", "Segoe UI", system-ui, sans-serif;
  accent-color: var(--brand);
}
/* Modo escuro: pelo sistema (a menos que o usuário escolha claro) e por
   escolha manual (data-theme="dark"). O mesmo conjunto de variáveis. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #10131a;
    --surface: #171b24;
    --surface-2: #1c212c;
    --ink: #e6e9ef;
    --muted: #a0a8b8;
    --faint: #6f7888;
    --line: #272d3a;
    --line-strong: #343c4c;
    --brand: #8fa6ec;
    --brand-hover: #a9bbf2;
    --brand-soft: #1e2742;
    --on-brand: #0f1530;
    --overdue: #f27b6e;
    --overdue-soft: #3a1c1a;
    --soon: #e9ae52;
    --soon-soft: #3a2b12;
    --ok: #5cc08a;
    --ok-soft: #15301f;
    --focus: #a9bbf2;
    --backdrop: rgb(4 6 12 / 62%);
    --shadow-dialog: 0 24px 60px -20px rgb(0 0 0 / 70%);
  }
}
/* Controles nativos (campos, rolagem) acompanham a escolha. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="dark"] {
    --paper: #10131a;
    --surface: #171b24;
    --surface-2: #1c212c;
    --ink: #e6e9ef;
    --muted: #a0a8b8;
    --faint: #6f7888;
    --line: #272d3a;
    --line-strong: #343c4c;
    --brand: #8fa6ec;
    --brand-hover: #a9bbf2;
    --brand-soft: #1e2742;
    --on-brand: #0f1530;
    --overdue: #f27b6e;
    --overdue-soft: #3a1c1a;
    --soon: #e9ae52;
    --soon-soft: #3a2b12;
    --ok: #5cc08a;
    --ok-soft: #15301f;
    --focus: #a9bbf2;
    --backdrop: rgb(4 6 12 / 62%);
    --shadow-dialog: 0 24px 60px -20px rgb(0 0 0 / 70%);
  }