/* 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 */

  /* Semantic aliases. Every one of these resolves to the value the rule used
     to hard-code, so nothing shifts here — they exist so a page can retheme a
     role without disturbing the raw colour it happens to equal today. The
     manual uses them for its light theme; the builder stays dark. */
  --bg: var(--black);            /* page / header / sidebar / menu ground */
  --on-accent: var(--black);     /* ink laid over an accent fill */
  --accent-fill: var(--accent);  /* accent as a plate, not as type */
  --accent-line: rgba(187,234,85,0.25); /* accent hairline: banner frame */
  --lift: rgba(255,255,255,0.07);       /* a step above whatever it lands on */
  --lift-soft: rgba(255,255,255,0.05);  /* the same, for a hover */
  --hairline: rgba(255,255,255,0.10);
  --media-bg: var(--ink);        /* letterbox behind video / screenshots */
  --menu-bg: var(--bg);          /* a floating menu's own ground */
  --menu-shadow: transparent;    /* on a dark page the border is enough */
}