:root {
   --growth-space-4: 4px;
   --growth-space-8: 8px;
   --growth-space-12: 12px;
   --growth-space-16: 16px;
   --growth-space-24: 24px;
   --growth-space-32: 32px;
   --growth-space-48: 48px;
   --growth-space-64: 64px;
   --growth-space-96: 96px;
}

:root {
   --growth-leading-display: 38px;
   --growth-leading-title: 32px;
   --growth-leading-heading: 28px;
   --growth-leading-body: 26px;
   --growth-leading-math-inline: 26px;
   --growth-leading-math-display: 34px;
   --growth-leading-label: 20px;
   --growth-leading-caption: 18px;
   --growth-leading-mono: 22px;
   --growth-stroke-hairline: 1px;
   --growth-stroke-mark: 1.5px;
   --growth-stroke-curve: 2px;
}

[data-theme="light"] {
   --growth-surface-page: #f8f8f8;
   --growth-surface-raised: #ffffff;
   --growth-surface-sunken: #efeff1;
   --growth-border-hairline: #71717a;
   --growth-text-primary: #17181b;
   --growth-text-secondary: #575762;
   --growth-text-muted: #63636d;
   --growth-text-on-accent: #ffffff;
   --growth-focus-ring: #17181b;
   --growth-accent-base: #17181b;
   --growth-accent-tint-1: #f4f4f5;
   --growth-accent-tint-2: #e7e7ea;
   --growth-accent-tint-3: #d6d6db;
   --growth-accent-tint-4: #c4c4cb;
   --growth-accent-contrast-text: #17181b;
   --growth-state-correct: #087b54;
   --growth-state-incorrect: #b83c35;
   --growth-state-caution: #8a5a00;
   --growth-correct-tint-1: #e3f4ec;
   --growth-incorrect-tint-1: #f9e4e2;
   --growth-caution-tint-1: #f7ecd3;
   --growth-type-display: 32px;
   --growth-type-title: 24px;
   --growth-type-heading: 19px;
   --growth-type-body: 16px;
   --growth-type-math-inline: 18px;
   --growth-type-math-display: 21px;
   --growth-type-label: 14px;
   --growth-type-caption: 13px;
   --growth-type-mono: 14px;
}

[data-theme="dark"] {
   --growth-surface-page: #0d0e10;
   --growth-surface-raised: #17181b;
   --growth-surface-sunken: #090a0c;
   --growth-border-hairline: #6b6b72;
   --growth-text-primary: #f4f4f5;
   --growth-text-secondary: #a3a4ad;
   --growth-text-muted: #8e919b;
   --growth-text-on-accent: #090a0c;
   --growth-focus-ring: #f4f4f5;
   --growth-accent-base: #f4f4f5;
   --growth-accent-tint-1: #1c1d21;
   --growth-accent-tint-2: #24262a;
   --growth-accent-tint-3: #292b30;
   --growth-accent-tint-4: #33353b;
   --growth-accent-contrast-text: #f4f4f5;
   --growth-state-correct: #19d59a;
   --growth-state-incorrect: #fb918b;
   --growth-state-caution: #f2b53c;
   --growth-correct-tint-1: #0d2823;
   --growth-incorrect-tint-1: #331d1b;
   --growth-caution-tint-1: #2d240d;
   --growth-type-display: 32px;
   --growth-type-title: 24px;
   --growth-type-heading: 19px;
   --growth-type-body: 16px;
   --growth-type-math-inline: 18px;
   --growth-type-math-display: 21px;
   --growth-type-label: 14px;
   --growth-type-caption: 13px;
   --growth-type-mono: 14px;
}

:root:not([data-theme]) {
   --growth-surface-page: #f8f8f8;
   --growth-surface-raised: #ffffff;
   --growth-surface-sunken: #efeff1;
   --growth-border-hairline: #71717a;
   --growth-text-primary: #17181b;
   --growth-text-secondary: #575762;
   --growth-text-muted: #63636d;
   --growth-text-on-accent: #ffffff;
   --growth-focus-ring: #17181b;
   --growth-accent-base: #17181b;
   --growth-accent-tint-1: #f4f4f5;
   --growth-accent-tint-2: #e7e7ea;
   --growth-accent-tint-3: #d6d6db;
   --growth-accent-tint-4: #c4c4cb;
   --growth-accent-contrast-text: #17181b;
   --growth-state-correct: #087b54;
   --growth-state-incorrect: #b83c35;
   --growth-state-caution: #8a5a00;
   --growth-correct-tint-1: #e3f4ec;
   --growth-incorrect-tint-1: #f9e4e2;
   --growth-caution-tint-1: #f7ecd3;
   --growth-type-display: 32px;
   --growth-type-title: 24px;
   --growth-type-heading: 19px;
   --growth-type-body: 16px;
   --growth-type-math-inline: 18px;
   --growth-type-math-display: 21px;
   --growth-type-label: 14px;
   --growth-type-caption: 13px;
   --growth-type-mono: 14px;
}

@media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
      --growth-surface-page: #0d0e10;
      --growth-surface-raised: #17181b;
      --growth-surface-sunken: #090a0c;
      --growth-border-hairline: #6b6b72;
      --growth-text-primary: #f4f4f5;
      --growth-text-secondary: #a3a4ad;
      --growth-text-muted: #8e919b;
      --growth-text-on-accent: #090a0c;
      --growth-focus-ring: #f4f4f5;
      --growth-accent-base: #f4f4f5;
      --growth-accent-tint-1: #1c1d21;
      --growth-accent-tint-2: #24262a;
      --growth-accent-tint-3: #292b30;
      --growth-accent-tint-4: #33353b;
      --growth-accent-contrast-text: #f4f4f5;
      --growth-state-correct: #19d59a;
      --growth-state-incorrect: #fb918b;
      --growth-state-caution: #f2b53c;
      --growth-correct-tint-1: #0d2823;
      --growth-incorrect-tint-1: #331d1b;
      --growth-caution-tint-1: #2d240d;
      --growth-type-display: 32px;
      --growth-type-title: 24px;
      --growth-type-heading: 19px;
      --growth-type-body: 16px;
      --growth-type-math-inline: 18px;
      --growth-type-math-display: 21px;
      --growth-type-label: 14px;
      --growth-type-caption: 13px;
      --growth-type-mono: 14px;
   }
}