/* tokens.css — shared design system, approved sample v0.1 */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg: #0A0A0C;
  --panel: #131316;
  --panel-2: #1A1A1E;
  --line: #2A2A2F;
  --line-bright: #3A3A42;
  --text: #E8E8EA;
  --muted: #6B6B70;
  --muted-2: #4A4A50;
  --accent: #7C8CFF;
  --pass: #3ECF8E;
  --warn: #E8A23E;
  --fail: #E5484D;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', sans-serif;
}

*{ box-sizing: border-box; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}

a{ color: inherit; }

.eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:"▸"; color: var(--accent); }

/* corner-bracket panel: the signature element */
.panel{
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 20px;
}
.panel::before, .panel::after{
  content:"";
  position:absolute;
  width: 10px; height: 10px;
}
.panel::before{ top:-1px; left:-1px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
.panel::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); }

.panel-label{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 14px;
  display:flex; justify-content:space-between; align-items:center;
}
.dot{
  width:6px; height:6px; border-radius:50%;
  display:inline-block; margin-right:6px;
  background: var(--pass);
  box-shadow: 0 0 6px var(--pass);
}
.dot.idle{ background: var(--muted-2); box-shadow:none; }

.stat-row{ display:flex; justify-content:space-between; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.stat-row:last-child{ border-bottom:none; }
.stat-name{ font-size: 12.5px; color: var(--muted); }
.stat-val{ font-family: var(--mono); font-size: 13px; font-weight:600; }
.stat-val.pass{ color: var(--pass); }
.stat-val.warn{ color: var(--warn); }
.stat-val.fail{ color: var(--fail); }

.btn{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line-bright);
  padding: 9px 14px;
  cursor:pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn::before{ content:"["; color: var(--muted-2); margin-right:6px; }
.btn::after{ content:"]"; color: var(--muted-2); margin-left:6px; }
.btn:hover{ border-color: var(--accent); color: var(--accent); }
.btn.primary{ background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight:600; }
.btn.primary::before, .btn.primary::after{ color: var(--bg); opacity:0.5; }
.btn:disabled{ opacity: 0.5; cursor: not-allowed; }

.input-group{ margin-bottom: 14px; }
.input-group label{
  display:block; font-family: var(--mono); font-size: 11px;
  color: var(--muted); margin-bottom: 6px; letter-spacing: 0.04em;
}
.input-group input{
  width:100%; background: var(--panel-2); border: 1px solid var(--line-bright);
  color: var(--text); padding: 10px 12px; font-family: var(--sans); font-size: 14px;
}
.input-group input:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }

.error-text{ color: var(--fail); font-size: 12.5px; font-family: var(--mono); margin-top: 8px; }