:root {
  /* ── Sidebar ── */
  --color-sidebar-bg: #0C1A0D;
  --color-sidebar-text: rgba(255,255,255,0.65);
  --color-sidebar-text-active: #FFFFFF;
  --color-sidebar-item-hover: rgba(255,255,255,0.06);
  --color-sidebar-item-active-bg: rgba(255,255,255,0.08);
  --color-sidebar-border: rgba(255,255,255,0.07);

  /* ── Primária (verde floresta) ── */
  --color-primary: #2D5A27;
  --color-primary-hover: #245020;
  --color-primary-subtle: #E8F5E3;
  --color-primary-text: #FFFFFF;

  /* ── Dourado ── */
  --color-gold: #C9A837;
  --color-gold-light: #E2C35A;

  /* ── Ação (botão sólido / estado ativo) ──
     Semântico: hoje = verde quase-preto da sidebar, mas desacoplado p/ permitir
     ajuste futuro (ex.: clarear no escuro) sem mexer na sidebar. */
  --color-action: var(--color-sidebar-bg);

  /* ── Fundos ── */
  --color-content-bg: #F5F3EF;
  --color-card-bg: #FFFFFF;
  --color-header-bg: #FFFFFF;   /* faixa do título (page-header) */
  --color-topbar-bg: #FFFFFF;
  --color-topbar-border: #E8E4DC;

  /* ── Texto ── */
  --color-text-primary: #1A2118;
  --color-text-secondary: #6B7A6D;
  --color-text-muted: #9AA89C;

  /* ── Bordas ── */
  --color-border: #E2DDD6;
  --color-border-strong: #C8C3BC;

  /* ── Status ── */
  --color-success: #2D5A27;
  --color-success-bg: #E8F5E3;
  --color-success-text: #1E4020;

  --color-warning: #856404;
  --color-warning-bg: #FFF8DC;
  --color-warning-text: #613F00;

  --color-danger: #C62828;
  --color-danger-bg: #FFEBEE;
  --color-danger-text: #8B0000;

  --color-info: #1565C0;
  --color-info-bg: #E3F2FD;
  --color-info-text: #0D47A1;

  --color-orange: #E65100;
  --color-orange-bg: #FFF3E0;
  --color-orange-text: #BF360C;

  /* ── Sombras ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.10);

  /* ── Layout ── */
  --sidebar-width: 220px;
  --sidebar-width-collapsed: 56px;
  --topbar-height: 60px;

  /* ── Tipografia ── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;

  /* ── Raios ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ── Transições ── */
  --transition: 0.15s ease;
  --transition-slow: 0.25s ease;

  /* ── Aliases de compatibilidade ── */
  --color-surface: var(--color-card-bg);
  --color-text: var(--color-text-primary);
  --color-text-muted: #9AA89C;
  --color-text-inverse: #FFFFFF;
  --color-border-light: #F0EDE8;
  --color-primary-dark: var(--color-primary-hover);
  --color-primary-light: var(--color-primary-subtle);
  --color-success-light: var(--color-success-bg);
  --color-warning-light: var(--color-warning-bg);
  --color-danger-light: var(--color-danger-bg);
  --color-info-light: var(--color-info-bg);
  --color-accent: var(--color-gold);
  --color-warning-text: var(--color-warning);
  --sidebar-collapsed-width: var(--sidebar-width-collapsed);

  /* informa ao navegador o esquema (form controls, scrollbar nativa) */
  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════
   TEMA ESCURO — ativado por <html data-theme="dark"> (ver js/theme.js)
   Só redefine superfícies, texto, bordas, status e sombras.
   Dourado/verde-marca e cores de status (matiz) permanecem.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Sidebar — um pouco mais escura que os cards p/ manter a separação */
  --color-sidebar-bg: #090D0A;
  --color-sidebar-text: rgba(255,255,255,0.60);
  --color-sidebar-text-active: #FFFFFF;
  --color-sidebar-item-hover: rgba(255,255,255,0.07);
  --color-sidebar-item-active-bg: rgba(255,255,255,0.10);
  --color-sidebar-border: rgba(255,255,255,0.09);

  /* Fundos */
  --color-content-bg: #0E1310;
  --color-card-bg: #171E18;
  --color-header-bg: #141B15;
  --color-topbar-bg: #141B15;
  --color-topbar-border: rgba(255,255,255,0.08);

  /* Texto */
  --color-text-primary: #ECEFEA;
  --color-text-secondary: #A7B2A8;
  --color-text-muted: #76836F;

  /* Bordas */
  --color-border: rgba(255,255,255,0.11);
  --color-border-strong: rgba(255,255,255,0.22);
  --color-border-light: rgba(255,255,255,0.06);

  /* Status — fundos translúcidos p/ não estourar no escuro; texto mais claro */
  --color-success-bg: rgba(74,145,63,0.20);
  --color-success-text: #9FD89A;
  --color-warning-bg: rgba(201,168,55,0.16);
  --color-warning-text: #E2C35A;
  --color-danger-bg: rgba(198,40,40,0.20);
  --color-danger-text: #F2A6A0;
  --color-info-bg: rgba(21,101,192,0.20);
  --color-info-text: #9FC7F2;
  --color-orange-bg: rgba(230,81,0,0.18);
  --color-orange-text: #F2B07A;
  --color-primary-subtle: rgba(45,90,39,0.28);

  /* Sombras mais presentes no escuro */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.50);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.55);

  /* Aliases que no claro eram literais — reapontar p/ o escuro */
  --color-text-inverse: #0E1310;

  color-scheme: dark;
}

/* ── Tema escuro: overrides de seletor (o que token sozinho não cobre) ── */

/* ícones oficiais do topbar (lupa, calendário, chevron) usam filter p/ ficar
   cinza-escuro no claro; no escuro precisam clarear */
[data-theme="dark"] .ico-top { filter: brightness(0) invert(78%); }

/* sino do topbar desenha com stroke cravado #282C36 — CSS vence o atributo SVG */
[data-theme="dark"] .topbar-icon-btn svg path { stroke: var(--color-text-secondary); }

/* ícones de KPI (máscara) são cravados escuros sobre card claro — clarear no escuro */
[data-theme="dark"] .dash-kpi-ico .ico-mask,
[data-theme="dark"] .t8b-kpi-ico .ico-mask { background-color: #A7B2A8; }

/* toggle sol/lua: realce simétrico do lado ativo */
.theme-toggle .theme-sun.active { background: rgba(201,168,55,0.18); color: var(--color-gold); }
[data-theme="dark"] .theme-toggle .theme-moon.active { background: var(--color-gold); color: #0E1310; }

/* seletor de tema: cursor de mão ao passar sobre sol/lua */
.theme-toggle .theme-sun, .theme-toggle .theme-moon { cursor: pointer; }

/* gráfico: linhas de grade (claras) não podem estourar no escuro */
[data-theme="dark"] line[stroke="#ECE8E0"] { stroke: rgba(255,255,255,0.08); }