:root {
  --ui-font-sans: "Segoe UI", Arial, sans-serif;
  --ui-font-sm: .8125rem;
  --ui-font-base: 1rem;
  --ui-font-title: clamp(1.75rem, 4vw, 2rem);
  --ui-line-height: 1.5;
  --ui-space-1: .25rem;
  --ui-space-2: .5rem;
  --ui-space-3: .75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.5rem;
  --ui-space-6: 2rem;
  --ui-space-7: 3rem;
  --ui-radius-sm: .5rem;
  --ui-radius-md: .75rem;
  --ui-radius-pill: 999px;
  --ui-shadow-card: 0 8px 28px rgb(23 49 42 / 6%);
  --ui-background: #f1f5f3;
  --ui-surface: #fff;
  --ui-surface-subtle: #eaf2ee;
  --ui-header: #12382e;
  --ui-primary: #176e58;
  --ui-primary-hover: #125845;
  --ui-primary-active: #0c4435;
  --ui-accent: #9ce5c7;
  --ui-text: #172b25;
  --ui-text-muted: #52675e;
  --ui-border: #d5e0da;
  --ui-success: #176e58;
  --ui-success-surface: #e9f5ee;
  --ui-warning: #805819;
  --ui-warning-surface: #fff5dd;
  --ui-error: #a33030;
  --ui-error-surface: #fff0ef;
  --ui-focus: #227d65;
  --ui-focus-ring: 0 0 0 3px rgb(34 125 101 / 20%);
  --ui-container: 70rem;
  --ui-container-wide: 102.5rem;
  --ui-container-gutter: clamp(1rem, 3vw, 2rem);
}
