/* ============================================================================
   SafeStack — Design System: tokens
   Gerado a partir de ref/design-system/design-system.html (bloco :root)
   REGRA: este é o ÚNICO lugar do projeto onde cores são declaradas.
          Templates usam var(--sf-*) ou classes utilitárias do Bootstrap.
   ============================================================================ */

:root {
  /* ---- Marca ---- */
  --sf-navy-900: #0A1630;
  --sf-navy-800: #101C3F;
  --sf-navy-700: #182857;
  --sf-blue-600: #2F5FFF;
  --sf-blue-500: #4C79FF;
  --sf-blue-100: #E7ECFF;
  --sf-cyan-400: #22D3EE;
  --sf-cyan-300: #7EE6F5;

  /* ---- Texto ---- */
  --sf-ink-900: #0F172A;
  --sf-ink-700: #33415C;
  --sf-ink-600: #475467;
  --sf-ink-400: #8B96A8;

  /* ---- Superfícies ---- */
  --sf-paper-0: #FFFFFF;
  --sf-paper-50: #F6F8FC;
  --sf-paper-100: #EDF1F8;
  --sf-line: #E1E7F1;

  /* ---- Semânticas ---- */
  --sf-success: #12B76A;
  --sf-warning: #F79009;
  --sf-danger: #F04438;

  /* ---- Papéis ---- */
  --sf-bg: var(--sf-paper-50);
  --sf-surface: var(--sf-paper-0);
  --sf-text: var(--sf-ink-900);
  --sf-text-soft: var(--sf-ink-600);
  --sf-border: var(--sf-line);
  --sf-shadow: 0 1px 2px rgba(16, 28, 63, .06), 0 8px 24px -12px rgba(16, 28, 63, .12);

  /* ---- Tipografia ---- */
  --sf-font-display: 'Manrope', system-ui, sans-serif;   /* títulos */
  --sf-font-body: 'Inter', system-ui, sans-serif;         /* corpo */
  --sf-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* números/código */

  /* ---- Bootstrap overrides ---- */
  --bs-primary: var(--sf-blue-600);
  --bs-primary-rgb: 47, 95, 255;
  --bs-body-font-family: var(--sf-font-body);
  --bs-body-color: var(--sf-text);
  --bs-body-bg: var(--sf-bg);
  --bs-border-radius: 10px;
  --bs-border-radius-lg: 14px;
  --bs-border-radius-sm: 8px;
  --bs-link-color: var(--sf-blue-600);
  --bs-link-hover-color: var(--sf-blue-500);
  --bs-success: var(--sf-success);
  --bs-warning: var(--sf-warning);
  --bs-danger: var(--sf-danger);
}

/* ---- Tema escuro: os tokens já preveem as duas leituras ---- */
[data-tema="escuro"] {
  --sf-bg: var(--sf-navy-900);
  --sf-surface: var(--sf-navy-800);
  --sf-text: #F1F4FB;
  --sf-text-soft: #AAB4CC;
  --sf-border: #243258;
  --sf-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -12px rgba(0, 0, 0, .45);
  --bs-body-bg: var(--sf-navy-900);
  --bs-body-color: #F1F4FB;
}

/* ============================================================================
   Base
   ============================================================================ */
body {
  background: var(--sf-bg);
  color: var(--sf-text);
  font-family: var(--sf-font-body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .titulo {
  font-family: var(--sf-font-display);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sf-text);
}

.numero, .kpi-valor, code, pre, .mono {
  font-family: var(--sf-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Superfícies e componentes-base
   ============================================================================ */
.sf-card {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--sf-shadow);
}

.sf-card-header {
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--sf-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.sf-card-body { padding: 1.125rem; }

.sf-topbar {
  background: var(--sf-navy-900);
  color: #F1F4FB;
  border-bottom: 1px solid var(--sf-navy-700);
}

.sf-topbar a { color: #D7DEF0; text-decoration: none; }
.sf-topbar a:hover { color: #FFF; }

.sf-sidenav {
  background: var(--sf-surface);
  border-right: 1px solid var(--sf-border);
  min-height: calc(100vh - 56px);
}

.sf-sidenav .nav-link {
  color: var(--sf-text-soft);
  border-radius: var(--bs-border-radius-sm);
  padding: .45rem .7rem;
  font-weight: 500;
}

.sf-sidenav .nav-link:hover { background: var(--sf-paper-100); color: var(--sf-text); }
.sf-sidenav .nav-link.ativo,
.sf-sidenav .nav-link.active { background: var(--sf-blue-100); color: var(--sf-blue-600); }

/* marca (partial _marca.html) */
.sf-marca { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sf-font-display); font-weight: 800; }
.sf-marca svg { width: 22px; height: 22px; }

/* estados vazios */
.sf-vazio { text-align: center; padding: 2.75rem 1rem; }
.sf-vazio .sf-vazio-icone { font-size: 2rem; opacity: .55; }
.sf-vazio h5 { margin-top: .75rem; font-family: var(--sf-font-display); font-weight: 700; }
.sf-vazio p { color: var(--sf-text-soft); max-width: 42ch; margin: .35rem auto 1rem; }

/* skeleton de carregamento */
.sf-skeleton {
  background: linear-gradient(90deg, var(--sf-paper-100) 25%, var(--sf-paper-50) 37%, var(--sf-paper-100) 63%);
  background-size: 400% 100%;
  animation: sf-brilho 1.4s ease infinite;
  border-radius: var(--bs-border-radius-sm);
  height: .85rem;
}
@keyframes sf-brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* motion (design system: 150–200ms, ease-out) */
.sf-surge { animation: sf-surge .18s ease-out; }
@keyframes sf-surge { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* acessibilidade: foco sempre visível */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .nav-link:focus-visible {
  outline: 2px solid var(--sf-blue-600);
  outline-offset: 2px;
}


/* =============================================================================
   Aliases semânticos — as telas usam estes nomes; aqui eles são ligados aos
   tokens de marca (navy/paper/ink). Assim a paleta muda num lugar só.
   ============================================================================= */
:root {
  --sf-primaria: var(--sf-navy-700);
  --sf-primaria-suave: var(--sf-paper-100);
  --sf-primaria-borda: var(--sf-line);
  --sf-fundo: var(--sf-paper-50);
  --sf-superficie: var(--sf-surface);
  --sf-superficie-2: var(--sf-paper-100);
  --sf-texto: var(--sf-text);
  --sf-texto-suave: var(--sf-text-soft);
  --sf-borda: var(--sf-line);
  --sf-aviso: var(--sf-warning);
  --sf-info: var(--sf-navy-700);
  --sf-raio: .75rem;
  --sf-raio-sm: .5rem;
  --sf-espaco-2: .75rem;
  --sf-espaco-3: 1rem;
  --sf-fonte-numeros: var(--sf-font-mono);
}

/* Cores do logotipo — usadas no SVG da marca */
:root {
  --sf-marca-azul: #2F5FFF;
  --sf-marca-ciano: #22D3EE;
  --sf-texto-sobre-escuro: #F1F4FB;
}