/* Shopifi-Inspired Tailwind CSS v4 theme */
@theme {
  --color-primary: #000000;
  --color-ink: #000000;
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;
  --color-canvas-night: #000000;
  --color-canvas-night-elevated: #0a0a0a;
  --color-canvas-light: #ffffff;
  --color-canvas-cream: #fbfbf5;
  --color-surface-elevated-dark: #1e2c31;
  --color-shade-30: #d4d4d8;
  --color-shade-40: #a1a1aa;
  --color-shade-50: #71717a;
  --color-shade-60: #52525b;
  --color-shade-70: #3f3f46;
  --color-hairline-light: #e4e4e7;
  --color-hairline-dark: #1e2c31;
  --color-aloe-10: #c1fbd4;
  --color-pistachio-10: #d4f9e0;
  --color-link-cool-1: #9dabad;
  --color-link-cool-2: #9797a2;
  --color-link-cool-3: #bdbdca;
  --color-link-mint: #99b3ad;
  --font-primary: NeueHaasGrotesk Display, Helvetica, Arial, sans-serif;
  --font-family-2: Inter Variable, Inter, Helvetica, Arial, sans-serif;
  --font-family-3: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --text-display-xxl: 96px;
  --leading-display-xxl: 1;
  --tracking-display-xxl: 2.4px;
  --text-display-xl: 70px;
  --leading-display-xl: 1;
  --tracking-display-xl: 0;
  --text-display-lg: 55px;
  --leading-display-lg: 1.16;
  --tracking-display-lg: 0;
  --text-display-md: 48px;
  --leading-display-md: 1.14;
  --tracking-display-md: 0;
  --text-heading-xl: 28px;
  --leading-heading-xl: 1.28;
  --tracking-heading-xl: 0.42px;
  --text-heading-lg: 24px;
  --leading-heading-lg: 1.14;
  --tracking-heading-lg: 0.36px;
  --text-heading-md: 20px;
  --leading-heading-md: 1.4;
  --tracking-heading-md: 0.3px;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: 0.72px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.56;
  --tracking-body-lg: 0;
  --text-body-md: 16px;
  --leading-body-md: 1.5;
  --tracking-body-md: 0;
  --text-body-strong: 16px;
  --leading-body-strong: 1.5;
  --tracking-body-strong: 0;
  --text-caption: 14px;
  --leading-caption: 1.49;
  --tracking-caption: 0.28px;
  --text-micro: 13px;
  --leading-micro: 1.5;
  --tracking-micro: -0.13px;
  --text-eyebrow-cap: 12px;
  --leading-eyebrow-cap: 1.2;
  --tracking-eyebrow-cap: 0.72px;
  --text-code: 16px;
  --leading-code: 1.5;
  --tracking-code: 0;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  --spacing-huge: 64px;
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 9999px;
}