/* ================================================
   B20 GESTÃO · VARIABLES.CSS
   Design tokens — Neon Glass Theme
   ================================================ */
:root {
  --bg: #04060d;
  --bg-grad:
    radial-gradient(circle at 14% 8%,  rgba(34,211,238,.18), transparent 45%),
    radial-gradient(circle at 86% 16%, rgba(217,70,239,.16),  transparent 50%),
    radial-gradient(circle at 70% 86%, rgba(99,102,241,.16),  transparent 52%),
    radial-gradient(circle at 18% 92%, rgba(56,189,248,.12),  transparent 52%),
    #04060d;
  --surface:     rgba(15,22,40,0.78);
  --surface-2:   rgba(15,22,40,0.62);
  --surface-3:   rgba(255,255,255,0.08);
  --border:      rgba(34,211,238,0.16);
  --border-strong: rgba(34,211,238,0.32);
  --text:        #f4f9ff;
  --text-2:      rgba(244,249,255,0.86);
  --text-3:      rgba(244,249,255,0.62);
  --accent:      #22d3ee;
  --accent-2:    #a5f3fc;
  --accent-soft: rgba(34,211,238,0.14);
  --accent-line: rgba(34,211,238,0.40);
  --good:        #34d399;
  --good-soft:   rgba(52,211,153,0.16);
  --warn:        #fbbf24;
  --warn-soft:   rgba(251,191,36,0.16);
  --bad:         #fb7185;
  --bad-soft:    rgba(251,113,133,0.16);
  --neon-cyan:     #22d3ee;
  --neon-magenta:  #f0abfc;
  --neon-magenta-d:#e879f9;
  --neon-violet:   #c4b5fd;
  --neon-pink:     #fb7185;
  --neon-glow:      0 0 10px rgba(34,211,238,0.50), 0 0 22px rgba(34,211,238,0.22);
  --neon-glow-mg:   0 0 10px rgba(232,121,249,0.50), 0 0 22px rgba(232,121,249,0.22);
  --neon-glow-soft: 0 0 8px rgba(34,211,238,0.30);
  --neon-text:      0 0 4px rgba(34,211,238,0.28);
  --glass-blur:       saturate(160%) blur(20px);
  --glass-blur-strong:saturate(170%) blur(30px);
  --shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 14px 40px -14px rgba(0,0,0,0.75);
  --radius:    10px;
  --radius-sm:  7px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --sidebar-w: 240px;
  --topbar-h:   56px;
}

[data-theme="light"] {
  --bg: #e6ecf7;
  --bg-grad:
    radial-gradient(circle at 14% 10%, rgba(34,211,238,.22), transparent 45%),
    radial-gradient(circle at 86% 18%, rgba(167,139,250,.22), transparent 48%),
    radial-gradient(circle at 78% 88%, rgba(244,114,182,.18), transparent 50%),
    #e6ecf7;
  --surface:     rgba(255,255,255,0.55);
  --surface-2:   rgba(255,255,255,0.40);
  --surface-3:   rgba(255,255,255,0.72);
  --border:      rgba(15,23,42,0.10);
  --border-strong: rgba(15,23,42,0.20);
  --text:        #0a0f1a;
  --text-2:      rgba(10,15,26,0.78);
  --text-3:      rgba(10,15,26,0.52);
  --accent:      #0891b2;
  --accent-2:    #155e75;
  --accent-soft: rgba(8,145,178,0.18);
  --accent-line: rgba(8,145,178,0.40);
  --good:        #15803d;
  --good-soft:   rgba(34,197,94,0.18);
  --warn:        #a16207;
  --warn-soft:   rgba(245,158,11,0.20);
  --bad:         #be185d;
  --bad-soft:    rgba(244,114,182,0.20);
  --neon-glow:      0 0 14px rgba(8,145,178,0.30), 0 0 28px rgba(8,145,178,0.16);
  --neon-glow-mg:   0 0 14px rgba(217,70,239,0.30), 0 0 28px rgba(217,70,239,0.16);
  --neon-glow-soft: 0 0 10px rgba(8,145,178,0.20);
  --shadow: 0 1px 0 rgba(255,255,255,0.55) inset, 0 16px 36px -14px rgba(15,23,42,0.18);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  background-size: cover;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 50% 0%,   rgba(34,211,238,.10), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(217,70,239,.08), transparent 45%);
  mix-blend-mode: screen;
}

button { font-family: inherit; color: inherit; }
::selection { background: var(--accent-soft); color: var(--text); }