/* Design tokens. Linked first via Propshaft path order. */

:root {
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-border: #e2e5ea;
  --color-text: #1a1d23;
  --color-text-muted: #5c6370;
  --color-brand: #2d6a4f;
  --color-brand-soft: #e8f3ed;
  --color-brand-hover: #24573f;
  --color-on-brand: #fff;
  --color-danger: #9b1c1c;
  --color-danger-strong: #b42318;
  --color-danger-soft: #fdecea;
  --color-danger-border: #f0c4c4;
  --color-warning: #8a6d1d;
  --color-warning-strong: #8a4b08;
  --color-warning-soft: #fff8e6;
  --color-warning-border: #f0d58a;
  --suggestion-bg: color-mix(in srgb, var(--color-brand) 8%, transparent);
  --json-key: #634f9b;
  --json-string: #247052;
  --json-number: #356da8;
  --json-boolean: #a16207;
  --sidebar-width: 15rem;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Space scale — padding, gap, and margin. */
  --space-1: 0.125rem;
  --space-2: 0.25rem;
  --space-3: 0.375rem;
  --space-4: 0.5rem;
  --space-5: 0.625rem;
  --space-6: 0.75rem;
  --space-7: 0.875rem;
  --space-8: 1rem;
  --space-9: 1.25rem;
  --space-10: 1.5rem;
  --space-12: 2rem;
  --space-2_5: 0.35rem;

  /* Radius scale */
  --radius-xs: 0.15rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 999px;

  /* Type scale */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-lg: 0.9375rem;
  --text-xl: 1.125rem;
  --text-2xl: 1.25rem;
  --text-3xl: 1.5rem;
  --text-base: 1rem;

  /*
    Breakpoint scale (max-width). Custom properties cannot be used in
    @media conditions; keep the pixel values in sync with these names.
      --bp-split: 960px  stack plan / catalog / simulation split panes
      --bp-wide:  1100px tighten the simulation mirror
  */
  --bp-split: 960px;
  --bp-wide: 1100px;
}