/* ============================================================
   RodoWall PAD — Variáveis de Tema (Claro / Escuro)
   ------------------------------------------------------------
   Define todas as cores do sistema como variáveis CSS.
   - :root              → tema ESCURO (padrão)
   - [data-theme=light] → tema CLARO (sobrescreve as variáveis)

   A identidade RodoWall (azul marinho + mostarda) é mantida
   nos dois temas. As sobreposições e contrastes foram
   calibrados para legibilidade em ambos.
   ============================================================ */

/* ---------- TEMA ESCURO (padrão) ---------- */
:root{
  /* Marca */
  --navy:#020d3f;--navy2:#031560;
  --mustard:#c9a227;--mustard2:#e8be3a;
  --mustard-dim:rgba(201,162,39,.12);--mustard-glow:rgba(201,162,39,.25);

  /* Acentos */
  --blue:#3b82f6;--blue2:#60a5fa;--blue-dim:rgba(59,130,246,.12);
  --gray:#94a3b8;--gray2:#cbd5e1;--gray-dim:rgba(148,163,184,.1);
  --red:#f87171;--red-dim:rgba(248,113,113,.1);
  --green:#34d399;--green-dim:rgba(52,211,153,.1);
  --orange:#fb923c;--orange-dim:rgba(251,146,60,.1);
  --purple:#a78bfa;--purple-dim:rgba(167,139,250,.1);

  /* Superfícies */
  --bg:#1a2332;
  --surface:#243044;--surface2:#2d3a52;--surface3:#36455f;
  --border:#3d4f6a;--border2:#4e6180;
  --glass-border:#3d4f6a;

  /* Texto */
  --text:#f0f4ff;--text2:#8fa8c8;--text3:#556888;

  /* Níveis de risco (badges) */
  --l1:#60a5fa;--l2:#fbbf24;--l3:#fb923c;--l4:#f87171;--l5:#ef4444;

  /* Topbar e barras escuras — fixas independente do tema */
  --topbar-bg:#020d3f;
  --topbar-text:#f0f4ff;
  --topbar-text-dim:rgba(255,255,255,.45);
  --topbar-border:rgba(255,255,255,.08);

  /* Atmosfera de fundo */
  --glow-1:rgba(59,130,246,.08);
  --glow-2:rgba(201,162,39,.06);

  /* Sombra de elevação */
  --elev:0 1px 3px rgba(0,0,0,.3);
  --elev-lg:0 8px 32px rgba(0,0,0,.35);
}

/* ---------- TEMA CLARO ---------- */
[data-theme="light"]{
  /* Marca (mantida) */
  --navy:#020d3f;--navy2:#031560;
  --mustard:#a8821a;--mustard2:#c9a227;
  --mustard-dim:rgba(168,130,26,.1);--mustard-glow:rgba(168,130,26,.2);

  /* Acentos (tons mais profundos p/ contraste em fundo claro) */
  --blue:#2563eb;--blue2:#3b82f6;--blue-dim:rgba(37,99,235,.08);
  --gray:#64748b;--gray2:#475569;--gray-dim:rgba(100,116,139,.08);
  --red:#dc2626;--red-dim:rgba(220,38,38,.07);
  --green:#059669;--green-dim:rgba(5,150,105,.08);
  --orange:#ea580c;--orange-dim:rgba(234,88,12,.08);
  --purple:#7c3aed;--purple-dim:rgba(124,58,237,.08);

  /* Superfícies claras com profundidade */
  --bg:#eef2f9;
  --surface:#ffffff;--surface2:#f1f5fb;--surface3:#e4ebf5;
  --border:#d4deec;--border2:#bccadd;
  --glass-border:#d4deec;

  /* Texto escuro sobre fundo claro */
  --text:#0f1c33;--text2:#5a6b85;--text3:#8d9cb5;

  /* Níveis de risco (tons sólidos p/ fundo claro) */
  --l1:#2563eb;--l2:#d97706;--l3:#ea580c;--l4:#dc2626;--l5:#b91c1c;

  /* Topbar permanece navy escuro nos dois temas (identidade) */
  --topbar-bg:#020d3f;
  --topbar-text:#f0f4ff;
  --topbar-text-dim:rgba(255,255,255,.5);
  --topbar-border:rgba(255,255,255,.1);

  /* Atmosfera de fundo (sutil no claro) */
  --glow-1:rgba(37,99,235,.05);
  --glow-2:rgba(168,130,26,.04);

  /* Sombras suaves p/ tema claro */
  --elev:0 1px 3px rgba(15,28,51,.08);
  --elev-lg:0 8px 32px rgba(15,28,51,.12);
}