/* ── variables.css — Akino Systems ── */
:root {
  --bg:      #F5F5F5;
  --s1:      #FAFAFA;
  --s2:      #EFEFEF;
  --s3:      #E4E4E4;
  --border:  rgba(0,0,0,0.07);
  --border2: rgba(0,0,0,0.13);
  --text:    #0B0D25;
  --muted:   #8A8A9A;
  --dim:     #CBCAD2;
  --ink:     #0B0D25;
  --green:   #1F7A4D;
  --green-bg: rgba(31,122,77,0.07);
  --red:     #B83030;
  --red-bg:  rgba(184,48,48,0.07);
  --orange:  #9A6020;
  --orange-bg: rgba(154,96,32,0.07);
  --blue:    #1A5FA0;
  --blue-bg: rgba(26,95,160,0.07);
  --topbar-bg:  #F5F5F5;   /* igual ao --bg: sem separador visual */
  --sidebar-bg: #F5F5F5;
  --card-bg:    #FFFFFF;    /* cards continuam brancos sobre fundo cinza */
  --sw: 56px;
  --topbar-h: 52px;
  --radius: 10px;
  --radius-sm: 7px;
  font-size: 14px;
}
body.dark {
  --bg:      #0F0F0F;
  --s1:      #131313;
  --s2:      #191919;
  --s3:      #202020;
  --border:  #1E1E1E;
  --border2: #282828;
  --text:    #EDECEA;
  --muted:   #64625F;
  --dim:     #303030;
  --ink:     #EDECEA;
  --green:   #3FAD73;
  --green-bg: rgba(63,173,115,0.1);
  --red:     #E05555;
  --red-bg:  rgba(224,85,85,0.1);
  --orange:  #D4904A;
  --orange-bg: rgba(212,144,74,0.1);
  --blue:    #4D90D6;
  --blue-bg: rgba(77,144,214,0.1);
  --topbar-bg:  #0F0F0F;
  --sidebar-bg: #0F0F0F;
  --card-bg:    #131313;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: 'Geist', 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 4px; }

/* ── ANIMATIONS ── */
@keyframes fadeUp    { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes slideRight{ from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:translateX(0); } }
@keyframes pulse     { 0%,100% { opacity:.5; } 50% { opacity:1; } }
@keyframes cardIn    { from { opacity:0; transform:translateY(22px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes barGrow   { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes statPop   { from { opacity:0; transform:translateY(5px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }