:root {
  --color-primary: #0a0a0a;
  --color-on-primary: #ffffff;
  --color-brand-green: #00d4a4;
  --color-brand-warn: #c37d0d;
  --color-brand-error: #d45656;
  --color-canvas: #ffffff;
  --color-canvas-dark: #0a0a0a;
  --color-surface: #f7f7f7;
  --color-surface-soft: #fafafa;
  --color-hairline: #e5e5e5;
  --color-hairline-soft: #ededed;
  --color-ink: #0a0a0a;
  --color-charcoal: #1c1c1e;
  --color-steel: #5a5a5c;
  --color-stone: #888888;
  --color-muted: #a8a8aa;
  --color-on-dark: #ffffff;
  --color-backdrop: rgba(10, 10, 10, 0.4);

  --elevation-0: none;
  --elevation-2: rgba(0, 0, 0, 0.10) 0px 8px 16px -4px;
  --elevation-3: rgba(0, 0, 0, 0.12) 0px 24px 48px -8px;

  --font-prose: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --type-heading-3: 600 28px / 1.25 var(--font-prose);
  --type-heading-5: 600 18px / 1.4 var(--font-prose);
  --type-body-md: 400 16px / 1.5 var(--font-prose);
  --type-body-md-medium: 500 16px / 1.5 var(--font-prose);
  --type-body-sm: 400 14px / 1.5 var(--font-prose);
  --type-body-sm-medium: 500 14px / 1.5 var(--font-prose);
  --type-caption: 400 13px / 1.4 var(--font-prose);
  --type-caption-bold: 600 13px / 1.4 var(--font-prose);
  --type-micro: 500 12px / 1.4 var(--font-prose);
  --type-micro-uppercase: 600 11px / 1.4 var(--font-prose);
  --type-button-md: 500 14px / 1.3 var(--font-prose);

  --tracking-micro-uppercase: 0.5px;

  --spacing-xxxs: 2px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  --spacing-xxxl: 40px;

  --rounded-xs: 4px;
  --rounded-sm: 6px;
  --rounded-md: 8px;
  --rounded-lg: 12px;
  --rounded-xl: 16px;
  --rounded-xxl: 24px;
  --rounded-full: 9999px;

  --page-max-width: 1080px;
  --top-bar-height: 64px;
  --control-height: 40px;
  --control-height-touch: 44px;
  --position-circle-size: 40px;
  --icon-button-size: 32px;
  --icon-button-size-touch: 2rem;
  --row-min-height: 64px;
  --empty-state-min-height: 200px;
  --popup-width: 400px;
  --pending-opacity: 0.5;
}