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

   PALETA OFICIAL RODO WALL:
     Azul principal   #020d3f
     Mostarda queimado #b5911b
     Azul secundário  #005d92
     Cinza            #5b799c
     Branco gelo      #eef2f9

   Os tokens de design (raio, espaçamento, sombra, transição)
   garantem consistência visual em todo o sistema — o que separa
   um produto bem-acabado de um improvisado.
   ============================================================ */

/* ---------- TOKENS DE DESIGN (iguais nos dois temas) ---------- */
:root{
  /* Escala de raio — uma régua única, sem valores soltos */
  --r-xs:4px;    /* tags pequenas, chips */
  --r-sm:6px;    /* botões, inputs */
  --r-md:10px;   /* cards, modais menores */
  --r-lg:14px;   /* cards principais, modais */
  --r-full:999px;/* pílulas, badges arredondados */

  /* Escala de espaçamento — ritmo de 4px */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* Transições padronizadas */
  --t-fast:.12s ease;
  --t-base:.18s ease;
  --t-slow:.25s ease;

  /* Tipografia — escala e pesos */
  --fw-body:400; --fw-medium:500; --fw-semi:600; --fw-bold:800;
}

/* ---------- TEMA ESCURO (padrão) ---------- */
:root{
  /* Marca — paleta oficial Rodo Wall */
  --navy:#020d3f;--navy2:#0a1a5c;
  --mustard:#cda52e;--mustard2:#e3bd45;
  --mustard-dim:rgba(181,145,27,.13);--mustard-glow:rgba(181,145,27,.28);

  /* Acentos — derivados do azul secundário oficial (#005d92) */
  --blue:#2a8fc7;--blue2:#4aa8dc;--blue-dim:rgba(0,93,146,.18);
  --gray:#7b95b8;--gray2:#a9bcd6;--gray-dim:rgba(91,121,156,.14);
  --red:#e8615f;--red-dim:rgba(232,97,95,.12);
  --green:#36b88a;--green-dim:rgba(54,184,138,.12);
  --orange:#e08c43;--orange-dim:rgba(224,140,67,.12);
  --purple:#9b86d6;--purple-dim:rgba(155,134,214,.12);

  /* Superfícies — base no azul principal, frias e profundas */
  --bg:#0a1430;
  --surface:#13204a;--surface2:#1a2a5a;--surface3:#22356d;
  --border:#26386e;--border2:#365089;
  --glass-border:#26386e;

  /* Texto — branco gelo e derivados */
  --text:#eef2f9;--text2:#b4c5e0;--text3:#8598bd;

  /* Níveis de risco (badges) */
  --l1:#4aa8dc;--l2:#e3bd45;--l3:#e08c43;--l4:#e8615f;--l5:#d8453f;

  /* Topbar — azul principal oficial, fixo nos dois temas */
  --topbar-bg:#020d3f;
  --topbar-text:#eef2f9;
  --topbar-text-dim:rgba(238,242,249,.5);
  --topbar-border:rgba(238,242,249,.1);

  /* Atmosfera de fundo */
  --glow-1:rgba(0,93,146,.1);
  --glow-2:rgba(181,145,27,.07);

  /* Sistema de elevação (sombras padronizadas) */
  --elev:0 1px 3px rgba(0,0,0,.35);
  --elev-md:0 4px 16px rgba(0,0,0,.32);
  --elev-lg:0 12px 40px rgba(0,0,0,.4);
}

/* ---------- TEMA CLARO ---------- */
[data-theme="light"]{
  /* Marca (mantida) */
  --navy:#020d3f;--navy2:#0a1a5c;
  --mustard:#9a7b16;--mustard2:#b5911b;
  --mustard-dim:rgba(181,145,27,.1);--mustard-glow:rgba(181,145,27,.2);

  /* Acentos — azul secundário oficial #005d92 em destaque no claro */
  --blue:#005d92;--blue2:#0079bd;--blue-dim:rgba(0,93,146,.09);
  --gray:#5b799c;--gray2:#465f7e;--gray-dim:rgba(91,121,156,.1);
  --red:#c62f2f;--red-dim:rgba(198,47,47,.07);
  --green:#0a7a52;--green-dim:rgba(10,122,82,.08);
  --orange:#c2691f;--orange-dim:rgba(194,105,31,.08);
  --purple:#6b4fb8;--purple-dim:rgba(107,79,184,.08);

  /* Superfícies claras — branco gelo oficial como fundo */
  --bg:#eef2f9;
  --surface:#ffffff;--surface2:#f4f7fc;--surface3:#e6edf6;
  --border:#d3deed;--border2:#b6c7dd;
  --glass-border:#d3deed;

  /* Texto — azul principal oficial como texto escuro */
  --text:#020d3f;--text2:#3d5379;--text3:#657a9e;

  /* Níveis de risco (tons sólidos p/ fundo claro) */
  --l1:#005d92;--l2:#b5911b;--l3:#c2691f;--l4:#c62f2f;--l5:#a11f1f;

  /* Topbar permanece azul principal nos dois temas (identidade) */
  --topbar-bg:#020d3f;
  --topbar-text:#eef2f9;
  --topbar-text-dim:rgba(238,242,249,.55);
  --topbar-border:rgba(238,242,249,.1);

  /* Atmosfera de fundo (sutil no claro) */
  --glow-1:rgba(0,93,146,.06);
  --glow-2:rgba(181,145,27,.05);

  /* Sistema de elevação — sombras suaves p/ tema claro */
  --elev:0 1px 3px rgba(2,13,63,.08);
  --elev-md:0 4px 16px rgba(2,13,63,.1);
  --elev-lg:0 12px 40px rgba(2,13,63,.14);
}