/* Generated from src/interface/palette.json. Edit the source, then npm run design:sync. */
:root {
  --canvas: #f7f7f2;
  --surface: #ffffff;
  --surface-subtle: #efefe8;
  --text: #171716;
  --text-muted: #62625c;
  --border: #dfdfd7;
  --border-control: #89897f;
  --action: #171716;
  --action-hover: #343432;
  --on-action: #ffffff;
  --selection: #6541cf;
  --selection-surface: #eee9ff;
  --identity: #c8ff4b;
  --on-identity: #171716;
  --success: #167249;
  --success-surface: #e2f5e9;
  --warning: #875600;
  --warning-surface: #fff1cc;
  --danger: #b22d2d;
  --danger-surface: #ffe7e4;
  --stage: #171716;
  --stage-surface: #242423;
  --stage-raised: #343432;
  --stage-text: #f7f7f2;
  --stage-text-muted: #c5c5b9;
  --stage-border: #89897f;
  --overlay: rgba(23, 23, 22, 0.40);
  --scrim: rgba(23, 23, 22, 0.85);
  --shadow-soft: rgba(23, 23, 22, 0.08);
  --shadow-medium: rgba(23, 23, 22, 0.20);
  --shadow-strong: rgba(23, 23, 22, 0.40);
  --record-halo: rgba(178, 45, 45, 0.08);
  --paper: var(--canvas);
  --white: var(--surface);
  --soft: var(--surface-subtle);
  --ink: var(--text);
  --muted: var(--text-muted);
  --line: var(--border);
  --line-dark: var(--border-control);
  --violet: var(--selection);
  --violet-ink: var(--selection);
  --violet-soft: var(--selection-surface);
  --focus: var(--selection);
  --lime: var(--identity);
  --lime-dark: var(--text);
  --blue: var(--selection);
  --blue-soft: var(--selection-surface);
  --green: var(--success);
  --green-soft: var(--success-surface);
  --amber: var(--warning);
  --amber-soft: var(--warning-surface);
  --red: var(--danger);
  --red-soft: var(--danger-surface);
  --shadow: 0 16px 45px var(--shadow-soft);
}