:root {
  color-scheme: light;

  --color-background: #f8f6f1;
  --color-surface: #ffffff;
  --color-surface-subtle: #fbfaf7;
  --color-text: #1f2329;
  --color-text-secondary: #5a606b;
  --color-accent: #3d3f8f;
  --color-accent-hover: #2f3175;
  --color-accent-deep: #24265f;
  --color-selected: #e8e8f6;
  --color-warm-highlight: #e3a53b;
  --color-border: #d7d6d1;
  --color-border-strong: #c9c8d2;
  --color-error: #b42318;

  --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-caption: 0.875rem;
  --font-size-small: 1rem;
  --font-size-body: 1.0625rem;
  --font-size-lead: 1.125rem;
  --font-size-question: 1.5rem;
  --font-size-heading: 2.125rem;
  --font-size-display: 2.75rem;
  --font-size-price: 2rem;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.15;
  --line-height-heading: 1.25;
  --line-height-body: 1.5;

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

  --radius-small: 10px;
  --radius-medium: 18px;
  --radius-large: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgb(31 35 41 / 5%), 0 8px 24px rgb(31 35 41 / 6%);
  --shadow-raised: 0 2px 6px rgb(31 35 41 / 5%), 0 24px 64px rgb(31 35 41 / 10%);
  --shadow-button: 0 8px 20px rgb(61 63 143 / 18%);

  --border-width: 1px;
  --border-width-strong: 2px;
  --focus-width: 3px;
  --button-height: 52px;
  --answer-card-height: 68px;
  --icon-size: 20px;
  --path-icon-size: 24px;
  --path-icon-box: 48px;
  --wordmark-icon-size: 36px;
  --progress-height: 6px;
  --bot-frame-height: 320px;
  --price-card-min-height: 140px;
  --content-width: 560px;
  --document-width: 680px;
  --page-width: 1180px;
  --swatch-height: 96px;
  --transition-fast: 160ms ease;
}