/* Tone Lab design tokens, light theme only. The rules for each are in design/guidelines.md (Colour, Type, Shape and space).
   Every other stylesheet in web/ui/ reads these; pages never hard-code a colour. */

:root {
  /* Surfaces and lines */
  --bg: #f4f4f4;
  --surface: #fff;
  --well: #ededed;
  --line: #d6d6d6;
  --card-line: #cfcfcf;
  --ctl-line: #c4c4c4;

  /* Text */
  --ink: #111;
  --text: #2a2a2a;
  --muted: #666;

  /* Two fills only: --set is a value you chose, --live is on or playing right now. */
  --set: #111;
  --live: #17a957;
  --cell: #e6e6e6;
  --cell-hover: #cfcfcf;

  /* Control states, not new roles. */
  --pressed: #e0e0e0;
  --primary-hover: #3a3a3a;
  --disabled-line: #e3e3e3;
  --disabled-text: #b3b3b3;

  /* Signal kind. Only jacks and cables carry these. */
  --audio: #e5391e;
  --cv: #1f6fdb;
  --gate: #e39b00;

  /* Module categories, used only in the module picker (guidelines.md, The module picker). */
  --sound: #e5391e;
  --process: #9145e0;
  --modulate: #1f6fdb;
  --sequence: #e39b00;
  --output: #111;

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Code in docs and the gallery only, so markup lines up; the system's own monospace loads nothing. */
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing in steps of 2 and 4 px. */
  --s-2: 2px;
  --s-4: 4px;
  --s-6: 6px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;

  /* Control heights */
  --h-bar: 32px;
  --h-card: 24px;
  --h-head: 20px;
  --h-pad: 18px;

  --knob-track: #e0e0e0;
  --knob-val: var(--set);
  --knob-arc: 4.5px;
  --jack-bw: 2px;
  --cable-w: 2px;
  --cable-case: 5px;
  --cable-case-c: #fff;
}

/* A jack or cable sets data-k to its signal kind and draws with --k. */
[data-k="audio"] { --k: var(--audio); }
[data-k="cv"] { --k: var(--cv); }
[data-k="gate"] { --k: var(--gate); }

/* The module picker's drawers set data-cat and draw their square with --cat. */
[data-cat="sound"] { --cat: var(--sound); }
[data-cat="process"] { --cat: var(--process); }
[data-cat="modulate"] { --cat: var(--modulate); }
[data-cat="sequence"] { --cat: var(--sequence); }
[data-cat="out"] { --cat: var(--output); }