:root {
  --c-ink: #16141F;
  --c-ink-2: #3D3A4B;
  --c-muted: #615E73;
  --c-line: #E3E1EC;
  --c-bg: #F7F6FB;
  --c-surface: #FFFFFF;
  --c-primary: #5134E8;
  --c-primary-hover: #3F24C9;
  --c-primary-tint: #EEEAFE;
  --c-accent: #FF6B4A;
  --c-success: #1E7B4D;
  --c-success-tint: #E5F5EC;
  --c-success-border: #A8D9BE;
  --c-warning: #7A4F00;
  --c-warning-tint: #FFF4D6;
  --c-warning-border: #F0C36D;
  --c-danger: #B42318;
  --c-danger-tint: #FDECEA;
  --c-danger-border: #F3B8B2;
  --c-info-border: #C9BFFB;
  --c-overlay: rgba(22, 20, 31, .48);
  --c-leaf: #1C855E;
  --c-leaf-tint: #E6F3EC;
  --c-leaf-tint-text: #10563F;
  --c-water: #2F6FB0;
  --c-primary-text: #4037a0;
  --c-focus: #5134E8;
  --c-glass: rgba(255, 255, 255, .52);
  --c-glass-border: rgba(255, 255, 255, .8);
  --c-demo: #5B4BC4;
  --c-demo-tint: #F1EEFF;
  --c-locked-scrim: rgba(245, 245, 250, .6);
  --c-chart-4: #9A6212;
  --c-chart-1: var(--c-primary);
  --c-chart-2: var(--c-water);
  --c-chart-3: var(--c-leaf);

  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-blog: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;

  --fs-xs: 12px;
  --lh-xs: 16px;
  --fs-sm: 14px;
  --lh-sm: 20px;
  --fs-base: 16px;
  --lh-base: 24px;
  --fs-md: 18px;
  --lh-md: 28px;
  --fs-lg: 20px;
  --lh-lg: 28px;
  --fs-xl: 24px;
  --lh-xl: 32px;
  --fs-2xl: 30px;
  --lh-2xl: 38px;
  --fs-3xl: 36px;
  --lh-3xl: 44px;
  --fs-blog-h1: 40px;
  --lh-blog-h1: 48px;
  --fs-blog-body: 19px;
  --lh-blog-body: 31px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --w-app: 1200px;
  --w-auth: 480px;
  --w-onboarding: 560px;
  --w-editor: 760px;
  --w-blog: 680px;
  --w-link-bio: 440px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(22, 20, 31, .06);
  --sh-2: 0 8px 24px rgba(22, 20, 31, .10);

  --motion-fast: 150ms ease-out;
  --motion-sheet: 200ms ease-out;
}

[data-theme="dark"] {
  color-scheme: dark;
  --c-ink: #E9EBF4;
  --c-ink-2: #C4C9DA;
  --c-muted: #9AA3BB;
  --c-line: rgba(255, 255, 255, .12);
  --c-bg: #0E1120;
  --c-surface: rgba(24, 28, 46, .78);
  --c-primary: #5F55DD;
  --c-primary-hover: #7068E8;
  --c-primary-text: #B3ADFF;
  --c-focus: #B3ADFF;
  --c-primary-tint: rgba(139, 131, 240, .18);
  --c-leaf: #34D399;
  --c-leaf-tint: rgba(52, 211, 153, .16);
  --c-leaf-tint-text: #6EE7B7;
  --c-water: #8CC3F5;
  --c-success: #7FD8A6;
  --c-success-tint: #17382A;
  --c-success-border: #366E4B;
  --c-warning: #F5C86A;
  --c-warning-tint: #3A2E10;
  --c-warning-border: #8D6A25;
  --c-danger: #FF9A8F;
  --c-danger-tint: #3D1A1A;
  --c-danger-border: #8C4039;
  --c-info-border: #5A5299;
  --c-overlay: rgba(0, 0, 0, .62);
  --c-glass: rgba(24, 28, 46, .66);
  --c-glass-border: rgba(255, 255, 255, .10);
  --c-demo: #C9C2FF;
  --c-demo-tint: rgba(201, 194, 255, .14);
  --c-locked-scrim: rgba(14, 17, 32, .6);
  --c-chart-4: #F0B85A;
  --c-chart-1: var(--c-primary);
  --c-chart-2: var(--c-water);
  --c-chart-3: var(--c-leaf);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --c-ink: #E9EBF4;
    --c-ink-2: #C4C9DA;
    --c-muted: #9AA3BB;
    --c-line: rgba(255, 255, 255, .12);
    --c-bg: #0E1120;
    --c-surface: rgba(24, 28, 46, .78);
    --c-primary: #5F55DD;
    --c-primary-hover: #7068E8;
    --c-primary-text: #B3ADFF;
    --c-focus: #B3ADFF;
    --c-primary-tint: rgba(139, 131, 240, .18);
    --c-leaf: #34D399;
    --c-leaf-tint: rgba(52, 211, 153, .16);
    --c-leaf-tint-text: #6EE7B7;
    --c-water: #8CC3F5;
    --c-success: #7FD8A6;
    --c-success-tint: #17382A;
    --c-success-border: #366E4B;
    --c-warning: #F5C86A;
    --c-warning-tint: #3A2E10;
    --c-warning-border: #8D6A25;
    --c-danger: #FF9A8F;
    --c-danger-tint: #3D1A1A;
    --c-danger-border: #8C4039;
    --c-info-border: #5A5299;
    --c-overlay: rgba(0, 0, 0, .62);
    --c-glass: rgba(24, 28, 46, .66);
    --c-glass-border: rgba(255, 255, 255, .10);
    --c-demo: #C9C2FF;
    --c-demo-tint: rgba(201, 194, 255, .14);
    --c-locked-scrim: rgba(14, 17, 32, .6);
    --c-chart-4: #F0B85A;
    --c-chart-1: var(--c-primary);
    --c-chart-2: var(--c-water);
    --c-chart-3: var(--c-leaf);
  }
}