:root {
  /* === Cor primaria (teal do logo Gestão Nexo) === */
  --cor-primaria: #00d4aa;
  --cor-primaria-suave: #e6f9f4;
  --cor-primaria-escura: #00a888;

  /* === Tema LIGHT === */
  --bg: #f5f7fa;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.8);
  --border: #e2e8f0;
  --text: #1a202c;
  --text-dim: #64748b;
  --text-inverse: #ffffff;

  /* === Superficies === */
  --sidebar-bg: #1a2744;
  --sidebar-text: #cbd5e1;
  --sidebar-text-hover: #ffffff;
  --sidebar-active: rgba(0, 212, 170, 0.15);
  --sidebar-active-text: #00d4aa;

  --topbar-bg: #ffffff;
  --topbar-border: #e2e8f0;

  /* === Status === */
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;

  /* === Tipografia === */
  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: "Sora", "Inter", sans-serif;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;

  /* === Espacamento === */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* === Bordas e sombras === */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* === Layout === */
  --sidebar-w: 248px;
  --topbar-h: 60px;
}

/* === Tema DARK === */
[data-theme="dark"] {
  --bg: #0d1117;
  --bg-elev: #161b22;
  --surface: #1c2333;
  --surface-glass: rgba(28, 35, 51, 0.8);
  --border: #30363d;
  --text: #e6edf3;
  --text-dim: #8b949e;
  --text-inverse: #1a202c;

  --sidebar-bg: #0d1117;
  --topbar-bg: #161b22;
  --topbar-border: #30363d;

  --cor-primaria-suave: rgba(0, 212, 170, 0.1);

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
}