/* tokens.css — canonical design tokens for all FoosZone pages and tools.
 * Single source of truth for the dark theme (spec: specs/tools-ui-cleanup).
 * Pages link this before their own styles; page CSS should consume these
 * via var() instead of hard-coded hex values.
 *
 * Motion rules added here must sit inside
 * @media (prefers-reduced-motion: no-preference).
 */

:root {
  /* Background tiers (darkest page surface → raised chrome) */
  --bg-0: #141414;
  --bg-1: #1f1f1f;
  --bg-2: #2b323d;

  /* Text tiers */
  --text-1: #eeeeee;
  --text-2: #aaaaaa;

  /* Accent family */
  --accent-blue: #3498db;
  --accent-green: #2ecc71;
  --accent-red: #e74c3c;
  --accent-yellow: #f1c40f;
  --accent-purple: #9b59b6;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;

  /* Shape */
  --radius: 4px;

  /* Focus ring (R7 consumers reference these) */
  --focus-ring: 2px solid var(--accent-blue);
  --focus-ring-offset: 2px;
}

/* Primitive classes. Prefixed .tk- because unprefixed .btn/.pill collide
 * with existing selectors (video-import.html, usage.html, labeler, viewer). */

.tk-btn {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--bg-2);
  border-radius: var(--radius);
  font: inherit;
  cursor: pointer;
}

.tk-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tk-btn:focus-visible,
.tk-pill:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.tk-pill {
  display: inline-block;
  padding: 1px var(--space-2);
  background: var(--bg-2);
  color: var(--text-1);
  border-radius: 999px;
  font-size: 0.85em;
}

.tk-panel {
  background: var(--bg-1);
  color: var(--text-1);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.tk-kbd {
  display: inline-block;
  padding: 0 var(--space-1);
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--text-2);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
}