/* Design tokens. Screens and the stylesheets use these variables, not raw values; changing
   the look starts here. --font-page must stay the font the fake renderer measures with.

   The UI font is the system stack: the prototype loads nothing from a CDN, and a vendored
   typeface would be a dependency under docs/prototype-guide.md section 3. */

:root {
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-page: "Helvetica Neue", Helvetica, Arial, "Noto Sans", "PingFang SC", sans-serif;
  --page-leading: 1.15;

  /* Neutrals */
  --color-bg: #f5f6f7;
  --color-surface: #ffffff;
  --color-surface-2: #fafbfc;
  --color-sunken: #f0f2f4;
  --color-track: #e3e7eb;
  --color-border: #e1e4e8;
  --color-border-soft: #eef0f2;
  --color-border-strong: #cdd2d8;
  --color-text: #14181d;
  --color-text-2: #3d4651;
  --color-muted: #5c6673;

  /* The one accent: actions, focus, selection, work in progress */
  --color-accent: #1f4e79;
  --color-accent-hover: #163a5c;
  --color-accent-tint: #eaf0f6;
  --color-accent-text: #ffffff;
  --color-disabled: #c9d3de;

  /* Meaning only */
  --color-queued: #8a939e;
  --color-attention: #c27a00;
  --color-ok: #1d6b45;
  --color-ok-bg: #e7f2ec;
  --color-ok-border: #cfe5d8;
  --color-ok-text: #164f34;
  --color-warn-text: #7a4700;
  --color-warn-bg: #fbf0dc;
  --color-warn-border: #e3c48f;
  --color-danger: #a52a1f;
  --color-danger-hover: #8a2219;
  --color-danger-bg: #fbeae8;
  --color-danger-text: #8f2219;
  --color-marker: #b3261e;
  --color-backdrop: rgb(20 24 29 / 0.45);

  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --shadow-page: 0 1px 2px rgb(20 24 29 / 0.06);
  --shadow-raised: 0 1px 2px rgb(20 24 29 / 0.12);
  --shadow-dialog: 0 12px 32px rgb(20 24 29 / 0.24);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --control-height: 40px;
  --content-width: 1280px;
  --content-width-wide: 1440px;
}