/* Shared design values. New screens should reuse these before adding local values. */
:root {
  --font-display: 'Trebuchet MS','Segoe UI',sans-serif;
  --font-body: 'Segoe UI',sans-serif;
  --font-code: Consolas,'Courier New',monospace;
  --font-size-body: 15px;
  --font-size-secondary: 12px;
  --font-size-control: 14px;
  --font-size-code: 15px;
  --code-line-height: 24px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-small: 10px;
  --radius-control: 12px;
  --radius-panel: 16px;
  --radius-card: 20px;
  --control-min: 44px;
  --field-min: 48px;
  --diagram-min: 720px;
  --diagram-column-min: 722px;
  --color-background: #0b1b20;
  --color-panel: #142e33;
  --color-panel-raised: #1b393e;
  --color-panel-soft: #10272c;
  --color-text: #e5f0e8;
  --color-muted: #a0b9b6;
  --color-border: #3c6163;
  --color-accent: #f1bd71;
  --color-success: #98dfbd;
  --color-focus: #ffd69a;
  --color-error: #ffc0a9;
  --shadow-card: 0 7px 24px #0002;
  --button-background: linear-gradient(180deg,#29494d,#203c41);
  --button-hover-background: linear-gradient(180deg,#355c59,#294c4d);
  --primary-background: linear-gradient(180deg,#f1c57f,#dda85e);
  --primary-hover-background: linear-gradient(180deg,#ffda9b,#edbb71);
  --field-background: #17363c;
  --field-border: #5a7a73;
  --field-text: #d2e2d8;
  /* Existing component names stay aliases of the shared values. */
  --surface: var(--color-panel);
  --surface-raised: var(--color-panel-raised);
  --surface-soft: var(--color-panel-soft);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --line: var(--color-border);
  --accent: var(--color-accent);
  --green: var(--color-success);
  --radius: 18px;
  --control: var(--control-min);
  --instruction-size: var(--font-size-body);
  --secondary-size: var(--font-size-secondary);
  font-family: var(--font-display);
  color: var(--color-text);
  background: var(--color-background);
  color-scheme: dark;
}