/*
 * Design tokens do SIGEN.
 *
 * Fonte visual de verdade: design_system/design-system.html (PRD seção 38).
 * Este arquivo apenas transforma as referências do design system em
 * CSS custom properties, para impedir divergência entre telas
 * (PRD seção 38.4 — DECISÃO ARQUITETURAL).
 *
 * Não redefinir estas cores em outro lugar do CSS da aplicação.
 */

:root {
  /* Cores de interface */
  --color-bg: #f5f8fb;
  --color-sidebar: #0c213a;
  --color-card: #ffffff;
  --color-border: #eceff5;
  --color-table-head: #f1f5fa;

  /* Cores semânticas */
  --color-primary: #1761fd;
  --color-success: #03d87f;
  --color-warning: #ffb822;
  --color-danger: #f5325c;
  --color-info: #12a4ed;
  --color-secondary: #9ba7ca;
  --color-dark: #1d2c48;

  /* Texto */
  --color-text: #303e67;
  --color-muted: #a4abc5;
  /* Texto sobre superfície soft-warning (badge/alert). Escuro no tema
     claro; sobrescrito para um âmbar claro no tema escuro (contraste). */
  --color-warning-text: #8a5c00;

  /* Tipografia */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Espaçamento base (mobile first) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Bordas e superfícies */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-card: 0 2px 4px rgba(31, 30, 47, 0.06);

  /* Navegação mobile (PRD seção 39) */
  --bottom-nav-height: 56px;
  /* Topbar desktop (PRD seção 38 §7 "Proporções do Shell" — 74px). Não
     existe topbar no mobile (ver docs/architecture/decisions/0008). */
  --topbar-height: 74px;
  --sidebar-width: 250px;
}

/*
 * Tema escuro. Como todo o CSS do app referencia as cores via
 * `--color-*`, redefinir esses tokens sob um seletor de tema vira o
 * app inteiro sem tocar em nenhum componente.
 *
 * Política de aplicação (JS mínimo em `templates/base.html`):
 * - sem atributo `data-theme`  -> segue o sistema (prefers-color-scheme);
 * - `data-theme="dark"`        -> escuro sempre;
 * - `data-theme="light"`       -> claro sempre (vence o sistema).
 *
 * A sidebar já é escura nos dois temas (`--color-sidebar`), então não
 * muda. As cores semânticas (primary/success/…) mantêm o mesmo tom —
 * leem bem sobre fundo escuro; só o texto de "warning" ganha um tom
 * mais claro para contraste (ver base.css/components.css).
 */
:root[data-theme='dark'],
:root[data-theme='dark'] body {
  color-scheme: dark;
}

:root[data-theme='dark'] {
  --color-bg: #0b1727;
  --color-card: #14243a;
  --color-border: #26374d;
  --color-table-head: #16273b;
  --color-text: #d3dcec;
  --color-dark: #eef3fb;
  --color-muted: #8592ad;
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.45);
  --color-warning-text: #ffce6b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --color-bg: #0b1727;
    --color-card: #14243a;
    --color-border: #26374d;
    --color-table-head: #16273b;
    --color-text: #d3dcec;
    --color-dark: #eef3fb;
    --color-muted: #8592ad;
    --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.45);
    --color-warning-text: #ffce6b;
  }
}

/*
 * Hospedagem de fontes (PRD seção 9.2 — antes "A DEFINIR"): decisão
 * adotada em `static/css/fonts.css` — self-host de Inter/Roboto via
 * `@font-face`, sem CDN externo. `tokens.css` só declara os nomes de
 * família; `fonts.css` precisa ser carregado antes deste arquivo (ver
 * `templates/base.html`) para o `font-family` acima resolver de fato
 * para os arquivos locais em vez de cair na fonte de sistema.
 */