/* open2agents · tokens del design system (design/README.md, DS · 01 Fundamentos).
   Un solo tono (cian laaabs, solo como señal) + neutros. Sin radios ni sombras. Marcos de 1px. */
@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&family=Silkscreen&display=swap");

:root {
  --bg: #fefefe;
  --surface: #f3f3f5;
  --surface-2: #e4e4e8;
  --frame: #cacacf;
  --frame-strong: #a4a4ab;
  --ink: #0a0a0b;
  --ink-2: #4d4d52;
  --ink-3: #7c7c84;
  --accent: #26262b;
  --accent-hover: #16161a;
  --on-accent: #fefefe;
  --cyan: #00b5e2; /* solo señal: el punto, el comando, el estado "verificando" */
  --cyan-tint: #e0f6fc;
  --ok: #1d6f48;
  --ok-tint: #e8f3ed;
  --stop: #b42318;
  --stop-tint: #fbe9e7;
  --display: "Funnel Display", "Inter", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pixel: "Silkscreen", "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; border-radius: 0 !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--text); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

.mono { font-family: var(--mono); }
.display { font-family: var(--display); letter-spacing: -0.02em; }
.label { font: 400 12px/16px var(--mono); color: var(--ink-3); text-transform: lowercase; }
.muted { color: var(--ink-2); }

.btn { height: 48px; padding: 0 24px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font: 500 16px/1 var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { background: var(--accent-hover); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--frame-strong); }
.btn.ok { background: var(--ok); border-color: var(--ok); }
.btn.stop { background: var(--bg); color: var(--stop); border-color: var(--stop); }

.frame { border: 1px solid var(--frame); background: var(--bg); }

/* Marca: open2agents + punto cian */
.brand { font: 500 20px/1 var(--display); letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 0; color: inherit; text-decoration: none; }
.brand::after { content: ""; width: 0.3em; height: 0.3em; background: var(--cyan); margin-left: 0.12em; display: inline-block; }
.bylaaabs { font: 600 13px/1 var(--display); letter-spacing: -0.03em; }
.bylaaabs b { font-weight: 600; }

/* Etiquetas de estado: siempre con texto, nunca solo color */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; font: 400 12px/18px var(--mono); background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.tag::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50% !important; }
.tag.ok { background: var(--ok-tint); color: var(--ok); }
.tag.stop { background: var(--stop-tint); color: var(--stop); }
.tag.run { background: var(--cyan-tint); color: #00799a; }
.tag.idle::before { background: var(--frame-strong); }

canvas.px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }