/* theme.css — design tokens (paleta de cor) e reset base do documento */

:root{
  --signal: #72C4AA;
  --notice: #D4994A;
  --danger-soft: #C97B7B;
  --eng-low: #C0645A;
  --eng-mid: #D4994A;
  --eng-high: #68A978;
  --text: #E4E2DD;
  --text-dim: #79838A;
  --bg: #0B0D0F;
  --bg-panel: #141719;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.1);
}

*{ box-sizing: border-box; margin:0; padding:0; }

body{
  background: var(--bg); color: var(--text);
  font-family: 'Inter', sans-serif; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.app-root{ min-height: 100vh; }

/* ---------- wordmark / tagline (usados no header e nos modais) ---------- */
.wordmark{ font-family:'JetBrains Mono', monospace; font-weight:700; font-size: 18px; letter-spacing: 0.02em; line-height:1; }
.wordmark span{ color: var(--signal); }
.tagline{ font-size: 12px; color: var(--text-dim); font-family:'JetBrains Mono', monospace; }
.tagline.clock{ font-size: 11.5px; min-width: 68px; text-align:right; }

/* ---------- títulos de seção (reutilizados em várias partes da coluna principal) ---------- */
.section-title{ display:flex; align-items:center; gap: 12px; margin: 4px 0 12px; }
.section-title span{
  font-family:'JetBrains Mono', monospace; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-dim); white-space: nowrap;
}
.section-title-line{ flex:1; height: 1px; background: var(--line); }

/* ---------- texto auxiliar pequeno, usado por quase todos os módulos JS ---------- */
.hint{ font-size: 11px; color: var(--text-dim); margin-top: 8px; line-height:1.5; }