/* ── variables.css — Akino Systems ── */
:root {
  /* ── Cores ── */
  --bg:      #F4F4F5;
  --s1:      #FAFAFA;
  --s2:      #F0F0F1;
  --s3:      #E4E4E7;
  --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:  #F4F4F5;
  --sidebar-bg: #0C0C0C;
  --card-bg:    #FFFFFF;

  /* ── Tipografia — escala de 6 steps ── */
  --text-xs:   11px;
  --text-sm:   12.5px;
  --text-base: 13.5px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  36px;

  /* ── Espaçamento — múltiplos 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;

  /* ── Estrutura ── */
  --sw:       70px;
  --topbar-h: 52px;
  --radius:    12px;
  --radius-sm:  8px;
  --radius-xs:  6px;

  /* ── Cards — dois níveis ── */
  --card-raised-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04);
  --card-raised-border: rgba(0,0,0,0.10);

  --accent: var(--ink);
  font-size: 14px;
}

body.dark {
  --bg:      #080808;
  --s1:      #0D0D0D;
  --s2:      #141414;
  --s3:      #1A1A1A;
  --border:  #1C1C1C;
  --border2: #252525;
  --text:    #E8E6E3;
  --muted:   #525050;
  --dim:     #282828;
  --ink:     #E8E6E3;
  --green:   #3FAD73;
  --green-bg: rgba(63,173,115,0.08);
  --red:     #E05555;
  --red-bg:  rgba(224,85,85,0.08);
  --orange:  #D4904A;
  --orange-bg: rgba(212,144,74,0.08);
  --blue:    #4D90D6;
  --blue-bg: rgba(77,144,214,0.08);
  --topbar-bg:  #080808;
  --sidebar-bg: #050505;
  --card-bg:    #0F0F0F;
  --card-raised-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 4px 20px rgba(0,0,0,0.35);
  --card-raised-border: #1E1E1E;
  --accent: var(--ink);
}

*, *::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); } }

/* ── Overrides tipográficos globais — unifica escala ── */
.card-title,
.sp-header-title,
.page-title,
.modal-title {
  letter-spacing: -.3px;
}

/* Todos os labels uppercase usam text-xs */
[class*="-label"][style*="uppercase"],
[class*="-lbl"][style*="uppercase"],
.kpi2-label,
.sum-card-label {
  font-size: var(--text-xs);
}

/* Corpo padrão dos itens de lista */
.sp-item,
.ws-dd-name,
.md-member-name {
  font-size: var(--text-base);
}