/*
 * Tokens de design do Agravo — fonte única.
 * Carregado antes de qualquer outro CSS em todas as páginas (login e painel).
 * Mude valores aqui; os arquivos de página só consomem var(--...).
 *
 * Identidade "Navy": o azul-marinho #0A1832 é a marca (sidebar, igual nos dois temas);
 * o azul vivo (#2563EB no claro, #4C8DFF no escuro) fica reservado para interação;
 * superfícies azuladas formam a estrutura e cinzas azulados, texto e bordas.
 * A hierarquia vem da luminosidade das superfícies, não de bordas fortes:
 *   claro  #E6EBF2 (moldura) → #0A1832 (sidebar) → #F1F4FA (conteúdo) → #F7F9FC (topo) → #FFFFFF (cards)
 *   escuro #050D1A (moldura) → #0A1832 (sidebar) → #0D1A2B (conteúdo) → #101F33 (topo) → #13243A (cards)
 * Regra das bordas: devem parecer uma mudança de superfície, não uma linha desenhada.
 */

:root {
  /* ---------- Cores: estrutura da aplicação ---------- */
  --app-background: #e6ebf2; /* moldura externa */
  --sidebar-background: #0a1832;
  --content-background: #f1f4fa;
  --header-background: #f7f9fc; /* topbar */
  --card-background: #ffffff;

  /* ---------- Cores: superfícies e texto ---------- */
  --background: var(--content-background);
  --foreground: #0a1832; /* texto principal */
  --card: var(--card-background);
  --card-foreground: #0a1832;
  --popover: #ffffff;
  --popover-foreground: #0a1832;
  --muted-surface: #f1f4fa;
  --muted-foreground: #607089; /* texto secundário */
  --text-primary: var(--foreground);
  --text-secondary: var(--muted-foreground);
  --text-tertiary: #8a98aa; /* informações discretas */

  /* ---------- Cores: marca e ações ---------- */
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --primary-hover: #1d4ed8;
  --primary-subtle: #e8f0ff; /* seleções e fundos de destaque */
  --secondary: #eef2f8;
  --secondary-foreground: #0a1832;
  --accent: var(--primary-subtle);
  --accent-foreground: #1d4ed8;
  --indigo: #5b8bea;
  --maya: #91c6ee;

  /* ---------- Cores: bordas, foco e hover ---------- */
  --border: #d8e0eb; /* divisórias e contornos */
  --border-subtle: #e3e8f0; /* separações muito discretas */
  --input: #c9d3e1; /* borda de campos: um tom acima */
  --ring: #2563eb;
  --focus-ring: rgba(37, 99, 235, .2); /* halo em volta de campos focados */
  --hover-gray: #e9eef5; /* hover dos botões claros/brancos */
  --hover-soft: #f1f4fa; /* hover de linhas e opções de lista */

  /* ---------- Cores: status ---------- */
  --success: #15803d;
  --warning: #92400e;
  --error: #b91c1c;
  --info: #0369a1;
  --success-bg: #f0fdf4;
  --warning-bg: #fffbeb;
  --danger-bg: #fef2f2;
  --info-bg: #f0f9ff;
  --badge-success: #15803d;
  --badge-warning: #92400e;
  --badge-danger: #b91c1c;
  --badge-info: #0369a1;
  --message-sent-bg: #d5ffca;

  /* ---------- Cores: gráficos ---------- */
  --chart-1: #2563eb;
  --chart-2: #16a34a;
  --chart-3: #f59e0b;
  --chart-4: #8b5cf6;
  --chart-5: #ec4899;
  --chart-6: #06b6d4;

  /* ---------- Cores: escala de cinza ---------- */
  --gray-900: #13151b;
  --gray-700: #445568;
  --gray-600: #718096;
  --gray-500: #a0aec0;
  --gray-300: #c8d3e0;
  --gray-100: #f5f7fa;

  /* ---------- Cores: marca (sidebar, cabeçalho de tabela e painel do login) ----------
     Superfície azul-marinho com texto branco, igual nos dois temas. */
  --brand: #0a1832;
  --brand-surface: var(--brand);
  --brand-foreground: #ffffff;
  --brand-foreground-muted: rgba(255, 255, 255, .68);
  --brand-foreground-subtle: rgba(255, 255, 255, .55);
  --brand-hover: #142746;
  --brand-avatar: #2563eb;
  --sidebar-active: #233556; /* item ativo da navegação */
  --sidebar-indicator: #4c8dff; /* barra lateral do item ativo */

  /* ---------- Aliases legados (preferir os nomes semânticos acima em código novo) ---------- */
  --navy: var(--foreground);
  --ink: var(--foreground);
  --page: var(--background);
  --line: var(--border);
  --outer-border: var(--border);
  --muted: var(--muted-foreground);
  --white: var(--card);

  /* ---------- Tipografia ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;

  /* ---------- Espaçamento (base 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Raio ---------- */
  --radius-2xs: 2px; /* cauda de balão, barras finas */
  --radius-xs: 4px;
  --radius-sm: 6px; /* botões, campos, itens de lista */
  --radius-md: 8px; /* ícones em card, controles segmentados */
  --radius-lg: 12px; /* cards, popovers, modais */
  --radius-xl: 20px; /* painéis do login */
  --radius-2xl: 30px; /* moldura externa da aplicação */
  --radius-full: 999px; /* pílulas */

  /* ---------- Sombra ---------- */
  --shadow-pop: 0 3px 8px rgba(10, 24, 50, .07), 0 16px 28px -12px rgba(10, 24, 50, .22);
  --shadow-panel: 0 4px 10px rgba(10, 24, 50, .05), 0 24px 40px -20px rgba(10, 24, 50, .18);

  /* ---------- Movimento ---------- */
  --duration-fast: 150ms; /* hover, foco, pequenos toggles */
  --duration-base: 200ms; /* menus, popovers */
  --duration-slow: 280ms; /* troca de tema, painéis */
  --duration-slower: 420ms; /* entradas maiores */
  --ease-standard: ease;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* Tema escuro do painel (alternado pelo botão no topo; o login é só claro). */
body.dark-theme {
  /* Dark Navy: azul-marinho muito escuro + superfícies azuladas (nada de preto/cinza puro). */
  --app-background: #050d1a;
  --sidebar-background: #0a1832;
  --content-background: #0d1a2b;
  --header-background: #101f33;
  --card-background: #13243a;

  --background: var(--content-background);
  --foreground: #f3f6fc;
  --card: var(--card-background);
  --card-foreground: #f3f6fc;
  --popover: #16283f;
  --popover-foreground: #f3f6fc;
  --muted-surface: #182b44;
  --muted-foreground: #aab8ca;
  --text-primary: var(--foreground);
  --text-secondary: var(--muted-foreground);
  --text-tertiary: #718198;

  --primary: #4c8dff;
  --primary-foreground: #ffffff;
  --primary-hover: #6aa2ff;
  --primary-subtle: #162d52;
  --secondary: #17283d;
  --secondary-foreground: #d5deea;
  --accent: var(--primary-subtle);
  --accent-foreground: #9cc0ff;

  --border: #1b2d44;
  --border-subtle: #17283d;
  --input: #253a55;
  --ring: #6aa2ff;
  --focus-ring: rgba(76, 141, 255, .28);
  --hover-gray: #182b44;
  --hover-soft: #162d52;

  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #38bdf8;
  --success-bg: rgba(34, 197, 94, .16);
  --warning-bg: rgba(245, 158, 11, .16);
  --danger-bg: rgba(239, 68, 68, .16);
  --info-bg: rgba(56, 189, 248, .16);
  --badge-success: #4ade80;
  --badge-warning: #fbbf24;
  --badge-danger: #f87171;
  --badge-info: #38bdf8;
  --message-sent-bg: #144d37;

  --brand-avatar: #4c8dff;
  --sidebar-active: #172a48;
  --sidebar-indicator: #4c8dff;

  /* Aliases precisam ser redeclarados para herdar os valores escuros. */
  --navy: var(--foreground);
  --ink: var(--foreground);
  --page: var(--background);
  --line: var(--border);
  --outer-border: var(--border);
  --muted: var(--muted-foreground);
  --white: var(--card);
  --shadow-pop: 0 3px 8px rgba(2, 6, 16, .4), 0 16px 28px -12px rgba(2, 6, 16, .6);
  --shadow-panel: 0 4px 10px rgba(2, 6, 16, .35), 0 24px 40px -20px rgba(2, 6, 16, .6);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}