/* Grok's Claws framework · tokens · Projects/x · used constellation-wide */
:root {
  --bg: #0c0c0e;
  --bg2: #121216;
  --surface: #18181d;
  --surface2: #1f1f26;
  --border: #2c2c36;
  --text: #ececf1;
  --muted: #8b8b9a;
  --dim: #5c5c6a;
  --neon-r: #ff2d6a;
  --neon-g: #00ffa3;
  --neon-b: #00d4ff;
  --neon-p: #c44dff;
  --grin: #00ffa3;
  --grin-hot: #5dffc0;
  --grin-dim: rgba(0, 255, 163, 0.14);
  --grin-edge: rgba(0, 255, 163, 0.45);
  --glow-r: 0 0 12px rgba(255, 45, 106, 0.45);
  --glow-g: 0 0 12px rgba(0, 255, 163, 0.4);
  --glow-b: 0 0 12px rgba(0, 212, 255, 0.45);
  --glow-grin: 0 0 18px rgba(0, 255, 163, 0.55), 0 0 40px rgba(0, 255, 163, 0.18);
  --radius: 10px;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}
body.claws-fly-ready, body.h7-start-ready, body.claws-rail-ready {
  --start-gutter: 40px;
  --claws-rail: 40px;
  padding-left: var(--claws-rail) !important;
  box-sizing: border-box !important;
}
.pill {
  display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--border, #2c2c36);
  background: var(--surface, #18181d);
  font: 700 10px system-ui; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #8b8b9a);
}
.pill.on { color: #06140f; background: linear-gradient(135deg, var(--grin, #00ffa3), #5dffc0); border-color: var(--grin-edge, rgba(0,255,163,.45)); }
.pill.warn { color: #1a1408; background: linear-gradient(135deg, #e8c547, #c9a227); border: 0; }
.pill.bad { color: #fff; background: linear-gradient(135deg, var(--neon-r, #ff2d6a), #c41e4a); border: 0; }
.pill.sky { color: #061018; background: linear-gradient(135deg, var(--neon-b, #00d4ff), #2de2e6); border: 0; }