:root {
  /* Cores - Tema Escuro Premium (Padrão, baseado na logo) */
  --bg: #151515;
  --bg-elev: #1c1c1c;
  --surface: #222222;
  --surface-glass: rgba(34, 34, 34, 0.6);
  --border: #2e2e2e;
  --text: #ffffff;
  --text-dim: #a0a0a0;
  
  /* Acento: Branco da logo em tema escuro */
  --accent: #ffffff;
  --accent-hover: #e0e0e0;
  --accent-soft: rgba(255, 255, 255, 0.12);
  
  --success: #2ecc71;
  --danger: #e74c3c;
  --warning: #f1c40f;
  --success-soft: rgba(46, 204, 113, 0.14);
  --danger-soft: rgba(231, 76, 60, 0.16);
  --warning-soft: rgba(241, 196, 15, 0.14);

  /* Tipografia */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;

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

  /* Raios e sombras */
  --radius: 12px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.45);
  --blur: blur(12px);

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h: 70px;
  
  /* Ativo para logo */
  --logo-img: url('/static/images/logo.svg');
}

/* Modo Claro (Inverso) - Ativado via classe .light-mode no html/root */
:root.light-mode, html.light-mode {
  --bg: #eceef2;
  --bg-elev: #f7f8fa;
  --surface: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.7);
  --border: #d4d8e0;
  --text: #151515;
  --text-dim: #5c6270;

  /* Acento: Cinza escuro da logo em tema claro */
  --accent: #151515;
  --accent-hover: #333333;
  --accent-soft: rgba(21, 21, 21, 0.08);

  /* Fundo de estado em tema claro: mesma cor, menos opaca */
  --success-soft: rgba(46, 204, 113, 0.12);
  --danger-soft: rgba(231, 76, 60, 0.10);
  --warning-soft: rgba(241, 196, 15, 0.16);

  /* Inverter sombra e imagem */
  --shadow: 0 4px 16px rgba(15, 23, 42, 0.10);
  --shadow-glass: 0 8px 32px rgba(15, 23, 42, 0.12);
  --logo-img: url('/static/images/logo_inverse.svg');
}