/* ═══════════════════════════════════════════
   VARIABLES.CSS
   Variáveis CSS globais (design tokens) e
   reset de estilos base do documento.
   Importado primeiro — todos os outros ficheiros dependem deste.
═══════════════════════════════════════════ */

:root {
  --bg:       #0c0e14;
  --surface:  #13151f;
  --surf:     var(--surface);
  --panel:    #1a1d2b;
  --border:   #2a2d3e;
  --text:     #e8eaf2;
  --ink:      var(--text);
  --muted:    #6b7099;
  --human:    #4ade80;
  --ai:       #f87171;
  --accent:   #818cf8;
  --warning:  #fbbf24;
  --warn:     var(--warning);
  --radius:   12px;
}

/* Reset mínimo */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  min-height: 100vh;
}

/* Subtil grid base */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}

/* Classe base de ecrã — mostra/esconde via .active */
.screen       { display: none; position: relative; z-index: 1; }
.screen.active { display: flex; flex-direction: column; min-height: 100vh; }

/* Fonte display (Bebas Neue) */
.display { font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px; line-height: .92; }