:root {
  /* Escuro é o padrão: avisa o navegador pra desenhar barra de rolagem,
     calendário de input date etc. no esquema escuro também. */
  color-scheme: dark;

  /* Cores de marca */
  --gold-500: #c9a13b;
  --gold-400: #d9bc6b;
  --gold-300: #e8d6a3;
  --purple-600: #6c3ce0;
  --purple-500: #7c4dff;
  --purple-400: #9b74ff;
  --purple-100: #efe8ff;

  /* Tema escuro (padrão) */
  --bg-canvas: #121017;
  --bg-surface: #1a1721;
  --bg-surface-raised: #221e2c;
  --bg-sidebar: #16131c;
  --bg-topbar: #16131c;
  --border-subtle: #2c2836;
  --text-primary: #f5f3f8;
  --text-secondary: #a9a3b8;
  --text-muted: #726c81;
  --accent: var(--purple-500);
  --accent-hover: var(--purple-400);
  --accent-contrast: #ffffff;
  --accent-rgb: 124, 77, 255;
  --gold: var(--gold-400);
  --gold-rgb: 217, 188, 107;
  --teal: #2dd4bf;
  --teal-rgb: 45, 212, 191;
  --slate: #cbd5e1;
  --slate-rgb: 203, 213, 225;
  --coral: #fb923c;
  --coral-rgb: 251, 146, 60;
  --card-bg: #241f2e;
  --card-bg-hover: #2c2638;

  /* Sidebar é sempre escura, nos dois temas (identidade visual) — por isso
     usa suas próprias cores fixas em vez de --text-*/--border-subtle, que
     se invertem para servir o conteúdo claro/escuro. */
  --sidebar-text-primary: #f5f3f8;
  --sidebar-text-secondary: #a9a3b8;
  --sidebar-text-muted: #726c81;
  --sidebar-hover-bg: #221e2c;
  --sidebar-border: #2c2836;

  /* Card de login (index.html) é sempre escuro, nos dois temas — mesma lógica
     da sidebar acima. Só o fundo da página ao redor do card (.login-page)
     continua acompanhando o tema claro/escuro; o card em si (e tudo dentro
     dele) usa estas cores fixas em vez de --bg-surface/--bg-canvas/--text-*,
     que se invertem por tema. Não redefinir em :root[data-theme="light"]. */
  --login-card-bg: #1a1721;
  --login-field-bg: #121017;
  --login-border: #2c2836;
  --login-text-primary: #f5f3f8;
  --login-text-secondary: #a9a3b8;
  --login-text-muted: #726c81;

  --overlay-scrim: rgba(10, 8, 14, 0.72);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --danger: #e5484d;
  --danger-rgb: 229, 72, 77;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --sidebar-width: 264px;
  --sidebar-width-collapsed: 76px;
  --topbar-height: 64px;

  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-canvas: #f3f1f7;
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-sidebar: #1a1721;
  --bg-topbar: #ffffff;
  --border-subtle: #e4e0ec;
  --text-primary: #211d2b;
  --text-secondary: #5f5a6d;
  --text-muted: #8b8598;
  --accent: var(--purple-600);
  --accent-hover: var(--purple-500);
  --accent-contrast: #ffffff;
  --accent-rgb: 108, 60, 224;
  --gold: #b4872a;
  --gold-rgb: 180, 135, 42;
  --teal: #0d9488;
  --teal-rgb: 13, 148, 136;
  --slate: #475569;
  --slate-rgb: 71, 85, 105;
  --coral: #c2570a;
  --coral-rgb: 194, 87, 10;
  --card-bg: #ffffff;
  --card-bg-hover: #f6f3fc;
  --overlay-scrim: rgba(20, 16, 28, 0.55);
  --shadow-sm: 0 1px 2px rgba(20, 16, 28, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 16, 28, 0.10);
  --shadow-lg: 0 16px 40px rgba(20, 16, 28, 0.14);

  /* Exceção deliberada ao "sidebar sempre congelada" (ver layout.css/CLAUDE.md): só
     o texto/ícone do menu vira branco puro no tema claro, pedido explícito do
     usuário pra melhorar a legibilidade — o fundo da sidebar continua escuro e
     congelado nos dois temas, só essas três variáveis mudam aqui. */
  --sidebar-text-primary: #ffffff;
  --sidebar-text-secondary: #ffffff;
  --sidebar-text-muted: #ffffff;
}

/* Temas de cor (independentes de claro/escuro) — "Roxo" é o padrão, já
   definido acima; os demais só sobrescrevem --accent/--accent-hover/--accent-rgb. */
:root[data-color-theme="azul"] {
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-rgb: 59, 130, 246;
}

:root[data-theme="light"][data-color-theme="azul"] {
  --accent: #1d4ed8;
  --accent-hover: #2563eb;
  --accent-rgb: 29, 78, 216;
}

:root[data-color-theme="verde"] {
  --accent: #22c55e;
  --accent-hover: #4ade80;
  --accent-rgb: 34, 197, 94;
}

:root[data-theme="light"][data-color-theme="verde"] {
  --accent: #15803d;
  --accent-hover: #16a34a;
  --accent-rgb: 21, 128, 61;
}

:root[data-color-theme="ambar"] {
  --accent: #f59e0b;
  --accent-hover: #fbbf24;
  --accent-rgb: 245, 158, 11;
}

:root[data-theme="light"][data-color-theme="ambar"] {
  --accent: #b45309;
  --accent-hover: #d97706;
  --accent-rgb: 180, 83, 9;
}

:root[data-color-theme="rosa"] {
  --accent: #ec4899;
  --accent-hover: #f472b6;
  --accent-rgb: 236, 72, 153;
}

:root[data-theme="light"][data-color-theme="rosa"] {
  --accent: #be185d;
  --accent-hover: #db2777;
  --accent-rgb: 190, 24, 93;
}

:root[data-color-theme="vermelho"] {
  --accent: #ef4444;
  --accent-hover: #f87171;
  --accent-rgb: 239, 68, 68;
}

:root[data-theme="light"][data-color-theme="vermelho"] {
  --accent: #b91c1c;
  --accent-hover: #dc2626;
  --accent-rgb: 185, 28, 28;
}