/* ─────────────────────────────────────────
   BASE — reset, variáveis, tipografia
   ───────────────────────────────────────── */

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

:root {
  /* cores */
  --color-bg:          #f5f4f0;
  --color-surface:     #ffffff;
  --color-border:      #e0ddd6;
  --color-border-focus:#1a1a1a;
  --color-text:        #1a1a1a;
  --color-text-muted:  #888880;
  --color-accent:      #1a1a1a;
  --color-accent-text: #ffffff;

  /* feedback */
  --color-danger:      #c0392b;
  --color-danger-bg:   #fdf0ee;
  --color-danger-border:#f5c6c0;
  --color-success:     #1e6b4a;
  --color-success-bg:  #edf7f2;
  --color-success-border:#b6e2cc;

  /* espaçamento / forma */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);

  /* tipografia */
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── animações ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-up {
  animation: fadeUp .3s ease both;
}

/* ── utilitários de layout ── */
.hidden { display: none !important; }

.screen {
  width: 100%;
  display: none;
}

.screen.active {
  display: block;
  animation: fadeUp .3s ease both;
}