/* base.css — SST Ágil · reset, tipografia base e utilitários de layout
   Espaçamentos múltiplos de 4px: xs=4 sm=8 md=16 lg=24 xl=32 2xl=48 3xl=64 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); height: 100%; }
body { font-family: var(--ff-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }

h1, h2, h3, h4, h5 { font-family: var(--ff-title); margin: 0; }

/* ── Marca ─────────────────────────────────────────────── */
.brand        { font-family: var(--ff-title); font-weight: 700; color: var(--brand-blue); letter-spacing: -.01em; }
.brand-accent { color: var(--accent); }

/* ── Tipografia utilitária do app ──────────────────────── */
.eyebrow {
  font-family: var(--ff-mono); font-size: 11px; color: var(--fg-faint);
  text-transform: uppercase; letter-spacing: .08em;
}
.view-title    { font-family: var(--ff-title); font-weight: 700; font-size: 28px; letter-spacing: -.01em; color: var(--fg); }
.view-subtitle { font-size: 16px; color: var(--fg-dim); margin-top: 4px; }
.mono          { font-family: var(--ff-mono); }
.text-dim      { color: var(--fg-dim); }
.text-faint    { color: var(--fg-faint); }

/* Cabeçalho padrão de section: eyebrow + linha azul + título */
.view-head { padding-bottom: 16px; margin-bottom: 24px; }
.view-head .eyebrow { display: block; margin-bottom: 8px; }
.view-head .rule { border: none; border-top: 1px solid var(--brand-blue); margin: 0 0 16px; }

/* ── Scroll ────────────────────────────────────────────── */
.custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: var(--surface); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--radius); }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }

/* ── Helpers de layout (uso pontual, sem framework) ────── */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: 4px; } .gap-sm { gap: 8px; } .gap-md { gap: 16px; } .gap-lg { gap: 24px; }
.mt-sm { margin-top: 8px; } .mt-md { margin-top: 16px; } .mt-lg { margin-top: 24px; }
.mb-sm { margin-bottom: 8px; } .mb-md { margin-bottom: 16px; } .mb-lg { margin-bottom: 24px; }

/* ── Empty state orientador (§3.8) ─────────────────────── */
.empty-state {
  padding: 32px; text-align: center; color: var(--fg-dim);
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  background: var(--surface); font-size: 13px; line-height: 1.6;
}
.empty-state strong { color: var(--fg); }