/* ──────────────────────────────────────────────────────────
   NR1-X · DESIGN SYSTEM (refinado)
   ROXO · AMARELO · BRANCO · CINZA ESCURO
   Tipografia: leve, refinada, séria (Inter Light/Regular)
   ────────────────────────────────────────────────────────── */

:root {
  /* ── PALETA SÓLIDA ── */
  --roxo:        #7C187C;
  --amarelo:     #FFD400;
  --branco:      #FFFFFF;
  --cinza:       #2B2B2B;

  /* ── Estados (fonte branca) ── */
  --azul:        #1E6FFF;
  --laranja:     #FF7A1A;
  --vermelho:    #E5293A;

  /* ── Charts (apenas em gráficos isolados) ── */
  --chart-verde:    #1FA85C;
  --chart-vermelho: #E5293A;
  --chart-azul:     #1E6FFF;
  --chart-amarelo:  #FFD400;
  --chart-roxo:     #7C187C;
  --chart-laranja:  #FF7A1A;

  /* ── Superfícies (sem tons — só branco / off-white sutil) ── */
  --bg:        #FFFFFF;
  --surface:   #FFFFFF;
  --surface-soft: #F6F6F6;
  --surface-line: #ECECEC;

  /* ── Tipografia · Inter (light, refined) ── */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif; /* mesma família, pesos leves */

  /* Escala: mais leve / mais "ar" / tracking negativo */
  --t-display:    44px;  /* hero numbers, dashboard giants */
  --t-h1:         32px;
  --t-h2:         22px;
  --t-h3:         17px;
  --t-body:       15px;
  --t-cap:        13px;
  --t-mini:       11px;
  --t-tiny:        9px;

  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semi:     600;
  --w-bold:     700;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  /* tracking */
  --tr-tightest: -0.04em;
  --tr-tight:    -0.02em;
  --tr-normal:    0;
  --tr-wide:      0.04em;
  --tr-wider:     0.1em;
  --tr-widest:    0.16em;

  /* ── radii (mais sutis) ── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 999px;

  /* ── spacing (8pt) ── */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s7: 32px;  --s8: 40px;
  --s9: 56px;  --s10: 72px; --s11: 96px;

  /* ── elevação (mais sutil) ── */
  --el-1: 0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04);
  --el-2: 0 6px 18px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.03);
  --el-3: 0 18px 40px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
  --el-roxo: 0 12px 28px rgba(124,24,124,0.22);

  /* ── easing ── */
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-in-out: cubic-bezier(0.65,0,0.35,1);

  /* ── layout ── */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 72px;
  --header-h: 64px;
  --footer-h: 64px;
}

/* ─────────── RESET ─────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  color: var(--cinza);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: var(--lh-base);
  letter-spacing: -0.005em;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
  letter-spacing: inherit;
}
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg { display: block; }

/* ─────────── TIPOGRAFIA (utilitários) ─────────── */
.t-display {
  font-size: var(--t-display);
  font-weight: var(--w-light);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--cinza);
}
.t-h1 {
  font-size: var(--t-h1);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--cinza);
}
.t-h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--cinza);
}
.t-h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--cinza);
}
.t-body {
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  color: var(--cinza);
}
.t-cap {
  font-size: var(--t-cap);
  font-weight: var(--w-regular);
  color: var(--cinza);
  opacity: 0.65;
}
.t-mini {
  font-size: var(--t-mini);
  font-weight: var(--w-medium);
  color: var(--cinza);
  opacity: 0.5;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
}
.t-tiny {
  font-size: var(--t-tiny);
  font-weight: var(--w-medium);
  color: var(--cinza);
  opacity: 0.4;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
}

/* num — tabular variants for stats */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

.text-roxo { color: var(--roxo); }
.text-amarelo { color: var(--amarelo); }
.text-branco { color: var(--branco); }
.text-cinza { color: var(--cinza); }

/* utility */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--s1); } .gap-2 { gap: var(--s2); } .gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); } .gap-5 { gap: var(--s5); } .gap-6 { gap: var(--s6); }
.flex-1 { flex: 1; } .flex-shrink-0 { flex-shrink: 0; }
.mt-2 { margin-top: var(--s2);} .mt-3 { margin-top: var(--s3);} .mt-4 { margin-top: var(--s4);}
.mt-5 { margin-top: var(--s5);} .mt-6 { margin-top: var(--s6);} .mt-7 { margin-top: var(--s7);}
.mb-2 { margin-bottom: var(--s2);} .mb-3 { margin-bottom: var(--s3);} .mb-4 { margin-bottom: var(--s4);}
.mb-5 { margin-bottom: var(--s5);} .mb-6 { margin-bottom: var(--s6);} .mb-7 { margin-bottom: var(--s7);}
.w-full { width: 100%; }
.text-center { text-align: center; }
.relative { position: relative; }

/* ─────────── LOGO LOCKUP ─────────── */
/* Wordmark: NR1-X com -X amarelo */
.nrx-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.nrx-lockup-mark {
  width: 30px; height: 30px;
  background: var(--roxo);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font);
  font-weight: 700;
  font-size: 16px;
  color: var(--amarelo);
  letter-spacing: -0.04em;
}
.nrx-lockup-mark::before { content: 'X'; }
.nrx-lockup-text {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.025em;
  color: var(--cinza);
}
.nrx-lockup-text .x { color: var(--amarelo); }