/* ═══════════════════════════════════════════════════════════════
   variables.css — Design System MensalPro
   Paleta: Azul Corporativo — enterprise financeiro
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Paleta principal — Azul corporativo ──────────────────── */
  --azul-950: #0a1628;
  --azul-900: #0f1f3d;
  --azul-800: #1a2d4a;
  --azul-700: #1e3a5f;
  --azul-600: #2d5a9e;
  --azul-500: #3b82f6;
  --azul-400: #60a5fa;
  --azul-200: #bfdbfe;
  --azul-100: #dbeafe;
  --azul-50:  #eff6ff;

  /* Aliases — usados pelo sistema inteiro */
  --verde-950: var(--azul-950);
  --verde-900: var(--azul-900);
  --verde-800: var(--azul-800);
  --verde-700: var(--azul-700);
  --verde-600: var(--azul-600);
  --verde-500: var(--azul-500);
  --verde-400: var(--azul-400);
  --verde-200: var(--azul-200);
  --verde-100: var(--azul-100);
  --verde-50:  var(--azul-50);

  /* ── Neutros — base cinza fria ────────────────────────────── */
  --cinza-950: #0a0e14;
  --cinza-900: #111724;
  --cinza-800: #1c2333;
  --cinza-700: #2d3a4a;
  --cinza-600: #3f5060;
  --cinza-500: #5c6e80;
  --cinza-400: #8a9eb0;
  --cinza-300: #b8c9d8;
  --cinza-200: #d8e2ec;
  --cinza-150: #e8eef4;
  --cinza-100: #f0f4f8;
  --cinza-50:  #f7f9fc;
  --branco:    #ffffff;

  /* ── Semânticas ───────────────────────────────────────────── */
  --sucesso:        #15803d;
  --sucesso-bg:     #f0fdf4;
  --sucesso-borda:  #bbf7d0;
  --sucesso-texto:  #14532d;

  --atencao:        #b45309;
  --atencao-bg:     #fffbeb;
  --atencao-borda:  #fcd34d;
  --atencao-texto:  #92400e;

  --perigo:         #dc2626;
  --perigo-bg:      #fef2f2;
  --perigo-borda:   #fecaca;
  --perigo-texto:   #991b1b;

  --info:           #0369a1;
  --info-bg:        #f0f9ff;
  --info-borda:     #bae6fd;
  --info-texto:     #0c4a6e;

  /* ── Superfícies ──────────────────────────────────────────── */
  --bg-app:           #f0f4f8;
  --bg-card:          #ffffff;
  --bg-sidebar:       #0f1f3d;
  --bg-sidebar-hover: rgba(255,255,255,0.06);
  --bg-sidebar-ativo: rgba(59,130,246,0.15);
  --bg-header:        #ffffff;
  --bg-input:         #ffffff;
  --bg-input-focus:   #f7f9fc;

  /* ── Bordas ───────────────────────────────────────────────── */
  --borda:             #e2e8f0;
  --borda-suave:       #eef2f7;
  --borda-media:       #cbd5e1;
  --borda-forte:       #94a3b8;
  --borda-input:       #cbd5e1;
  --borda-input-focus: #2d5a9e;

  /* ── Tipografia ───────────────────────────────────────────── */
  --fonte-display:  'Inter', 'DM Sans', system-ui, sans-serif;
  --fonte-corpo:    'Inter', 'DM Sans', system-ui, sans-serif;
  --fonte-mono:     'JetBrains Mono', 'Fira Code', monospace;

  --texto-primario:    #0f172a;
  --texto-secundario:  #1e293b;
  --texto-terciario:   #475569;
  --texto-placeholder: #94a3b8;
  --texto-inverso:     #ffffff;
  --texto-link:        #2d5a9e;
  --texto-link-hover:  #1a3d7a;

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

  /* ── Raio de borda ────────────────────────────────────────── */
  --raio-sm:   3px;
  --raio-md:   5px;
  --raio-lg:   8px;
  --raio-xl:   10px;
  --raio-2xl:  14px;
  --raio-full: 9999px;

  /* ── Sombras ──────────────────────────────────────────────── */
  --sombra-sm:   0 1px 2px rgba(15,23,42,0.06);
  --sombra-card: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
  --sombra-md:   0 4px 6px rgba(15,23,42,0.07), 0 2px 4px rgba(15,23,42,0.05);
  --sombra-lg:   0 10px 15px rgba(15,23,42,0.08), 0 4px 6px rgba(15,23,42,0.04);
  --sombra-xl:   0 20px 25px rgba(15,23,42,0.10), 0 8px 10px rgba(15,23,42,0.04);

  /* ── Transições ───────────────────────────────────────────── */
  --trans-rapida: 0.12s ease;
  --trans-media:  0.2s ease;
  --trans-lenta:  0.3s ease;

  /* ── Z-index ──────────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  100;
  --z-sidebar: 200;
  --z-modal:   300;
  --z-toast:   400;
  --z-top:     500;

  /* ── Layout ───────────────────────────────────────────────── */
  --sidebar-largura: 220px;
  --header-altura:   56px;

  /* ── Sidebar clara (painel admin) ─────────────────────────── */
  --sidebar-clara-bg:        #f5f7fa;
  --sidebar-clara-borda:     #e2e8f0;
  --sidebar-clara-item-hover:#eef2f7;
  --sidebar-clara-item-ativo:#dbeafe;
  --sidebar-clara-texto:     #475569;
  --sidebar-clara-ativo:     #1e3a5f;
  --sidebar-clara-icone:     #64748b;
  --sidebar-clara-icone-ativo:#2d5a9e;
}