:root {
  --default-font-size: 16px;
  font-size: var(--default-font-size);

--radius-out: 12px;
--radius-1: 12px;
--radius-2: 8px;
--radius-3: 4px;
--radius-in: 2px;
--default-radius: var(--radius-2);

--font-stack: 'Rethink Sans', 'Inter', sans-serif;
--mono-stack: 'IBM Plex Mono', monospace;

--tiny-font: calc(var(--default-font-size) * 0.694);
--small-font: calc(var(--default-font-size) * 0.833);
--large-font: calc(var(--default-font-size) * 1.728);
--font-size-1: var(--default-font-size);
--font-size-2: calc(var(--default-font-size) * 1.333);
--font-size-3: calc(var(--default-font-size) * 1.777);
--font-size-4: calc(var(--default-font-size) * 2.369);
--font-size-5: calc(var(--default-font-size) * 3.157);
--font-size-6: calc(var(--default-font-size) * 4.209);
--font-size-7: calc(var(--default-font-size) * 5.61);

--spacing: 0.9rem;
--spacing-3xs: calc(0.125 * var(--spacing));
--spacing-2xs: calc(0.25 * var(--spacing));
--spacing-xs: calc(0.5 * var(--spacing));
--spacing-s: calc(0.75 * var(--spacing));
--spacing-m: calc(1.25 * var(--spacing));
--spacing-l: calc(2 * var(--spacing));
--spacing-xl: calc(3.25 * var(--spacing));
--spacing-2xl: calc(5.25 * var(--spacing));

--color-highlight: #ffffff;
--color-background: #111111;
--color-background-dim: #161616;
--color-border: #252525;
--color-text: #e3e3e3;
--color-white: #ffffff;
--color-text-dim: #3e3e3e;
--color-success: #00ff80;
--color-error: #ff1500;
--color-blue: #007bff;
--color-yellow: #ffc107;
--color-purple: #ae00ff;
}