/* Sistema visual de ArmaBot (docs/ArmaBot.md → "Sistema visual para construir la interfaz").
   Todo color, tamaño o espaciado sale de acá. La landing usa solo el modo oscuro;
   el modo claro queda listo para el panel ([data-theme="light"]). */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400&display=swap');

:root {
  --bg: #0B1015; --surface: #151D26; --surface-2: #1C2632; --border: #243040;
  --text: #E6EDF3; --text-muted: #8B98A5;
  --primary: #3DDC84; --on-primary: #06291A; --success-text: #3DDC84;
  --warning: #F5B83D; --danger: #F87171;
  --radius-sm: 6px; --radius: 10px; --radius-lg: 16px;

  --font-titulos: 'Space Grotesk', system-ui, sans-serif;
  --font-texto: 'Inter', system-ui, sans-serif;
  --font-specs: 'JetBrains Mono', ui-monospace, monospace;

  /* Espaciado en múltiplos de 4 px */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px;
  --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px;

  --max-width: 1200px;
  --gutter: 24px;
  --section-gap: 96px;
  --control-h: 44px;
  --duration: 200ms;
}

[data-theme="light"] {
  --bg: #FFFFFF; --surface: #F3F5F8; --surface-2: #E9EDF2; --border: #E2E8F0;
  --text: #0F172A; --text-muted: #5B6675;
  --success-text: #15803D; --warning: #B45309; --danger: #DC2626;
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --section-gap: 64px; }
}