/* ─────────────────────────────────────────────────────────────────────────
   K20X — design tokens
   Used by every surface in HC Tagger. Tokens only; component CSS lives
   alongside its own page or module.
   Rules:
     · No emojis. No bubble UI. No shadows. No skeuomorphism.
     · Max corner radius 4px.
     · 8px base grid. Generous whitespace.
     · JetBrains Mono for headings, code, data labels, and ALL numerics.
     · Inter for prose/UI body.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* palette */
  --k-bg:        #0a0a0a;
  --k-fg:        #f5f5f5;
  --k-panel:    #141414;
  --k-border:    #262626;
  --k-muted:     #8a8a8a;
  --k-dim:       #4a4a4a;
  --k-input-bg:  #0a0a0a;

  /* status */
  --k-ok:       #22c55e;
  --k-warn:     #f59e0b;
  --k-err:      #ef4444;
  --k-info:     #06b6d4;

  /* accent — the only gradient in the system */
  --k-accent:    linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
  --k-accent-1:  #7c3aed;
  --k-accent-2:  #06b6d4;

  /* type */
  --k-ui:        'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --k-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* spacing — 8px base */
  --k-1: 4px;  --k-2: 8px;  --k-3: 12px; --k-4: 16px;
  --k-5: 24px; --k-6: 32px; --k-7: 48px; --k-8: 64px;

  /* radius — capped at 4px */
  --k-radius:    4px;
  --k-radius-sm: 2px;

  /* motion — short, linear, no bounce */
  --k-fast:   90ms linear;
  --k-base:  140ms linear;
  --k-slow:  220ms linear;
}

/* base reset for app surfaces */
html, body {
  background: var(--k-bg);
  color: var(--k-fg);
  font-family: var(--k-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }

/* utility primitives — used sparingly, only by app shell */
.k-mono   { font-family: var(--k-mono); }
.k-muted  { color: var(--k-muted); }
.k-dim    { color: var(--k-dim); }
.k-panel  {
  background: var(--k-panel);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
}

/* status dots — used by the monitor traffic-light grid */
.k-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--k-dim);
  vertical-align: middle;
}
.k-dot.ok   { background: var(--k-ok); }
.k-dot.warn { background: var(--k-warn); }
.k-dot.err  { background: var(--k-err); }