/* ============================================================
   Tempus — base.css
   Reset, variáveis, body, fundo global, utils, scrollbar
   ============================================================ */

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

:root {
  /* ── Marca ── */
  --brand:       #0f766e;
  --brand-light: #14b8a6;
  --brand-soft:  rgba(20,184,166,.15);
  --brand-glow:  rgba(20,184,166,.25);

  /* ── Fundo base ── */
  --bg:          #0b1120;
  --bg-deep:     #080d18;

  /* ── Vidro ── */
  --glass:             rgba(255,255,255,.04);
  --glass-hover:       rgba(255,255,255,.07);
  --glass-border:      rgba(255,255,255,.08);
  --glass-border-md:   rgba(255,255,255,.12);
  --glass-sidebar:     rgba(8,13,24,.75);
  --glass-modal:       rgba(11,17,32,.85);
  --glass-input:       rgba(255,255,255,.05);
  --glass-input-focus: rgba(20,184,166,.08);

  /* ── Texto ── */
  --text:       #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim:   #475569;

  /* ── Semânticas ── */
  --success:    #22c55e;
  --success-bg: rgba(34,197,94,.12);
  --warning:    #f59e0b;
  --warning-bg: rgba(245,158,11,.12);
  --danger:     #ef4444;
  --danger-bg:  rgba(239,68,68,.12);
  --info:       #38bdf8;
  --info-bg:    rgba(56,189,248,.12);
  --purple:     #a78bfa;
  --purple-bg:  rgba(167,139,250,.12);

  /* ── Misc ── */
  --radius:    10px;
  --radius-lg: 16px;
  --shadow:    0 4px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.55);

  --font-body:    "IBM Plex Sans", -apple-system, sans-serif;
  --font-heading: "Space Grotesk", "IBM Plex Sans", sans-serif;
}

body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Fundo global com glow ── */
.app-layout::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 80% 0%,   rgba(20,184,166,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 90%,  rgba(56,189,248,.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%,  rgba(15,118,110,.06) 0%, transparent 70%);
  pointer-events: none;
}
.app-layout > * { position: relative; z-index: 1; }

/* ── Animações globais ── */
@keyframes fadeIn  { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
@keyframes slideUp { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:none } }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Utils ── */
.hidden      { display: none !important; }
.error-msg   { color: var(--danger); font-size: 12px; margin-top: 8px; text-align: center; }
.text-muted  { color: var(--text-muted); }
.text-center { text-align: center; }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.3); }