/* Shared design tokens — loaded by index.html (builder) and manual.html.
   Single source of truth for color, radius, spacing and motion.
   Page-specific rules live in style.css / manual.css. */

:root {
  --lime: #bbea55;
  --violet: #4700ff;
  --black: #000000;
  --ink: #0a0a0a;
  --panel: #0f0f10;
  --panel-2: #161617;
  --line: #202022;
  --line-hot: var(--text);
  --radius: 6px;      /* surfaces: buttons, inputs, cards, menus, swatches, dialogs */
  --radius-sm: 4px;   /* small chips / tight controls */
  --pin: #ffffff;
  --text: #f2f2ef;
  --muted: #909094;
  --label: #a6a6aa;
  --header-h: 64px;
  /* spacing rhythm — 8px grid for the props panel */
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --accent: var(--lime);
  --accent-hover: var(--text);
  --focus: #d4d4d6;
  --accent-focus: var(--focus);
  --accent-subtle: rgba(187,234,85,0.12);
  --selected-bg: rgba(255,255,255,0.09);
  --selected-text: var(--text);
  --selected-border: var(--line-hot);
  /* motion — one shared feel across the tool */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* strong ease-out, UI feedback */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */
  --dur-press: 120ms;   /* press feedback */
  --dur-ui: 160ms;      /* hover/color, caret */
  --dur-menu: 180ms;    /* menu entrance */
}