:root {
    color-scheme: light;
    --font-inter: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, Segoe UI, system-ui, sans-serif;
    --font-sans: var(--font-inter);
    --font-mono: "SF Mono", "SFMono-Regular", ui-monospace, Consolas, monospace;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --bg-strong: #fcfcfc;
    --bg-soft: #f3f3f3;
    --bg-muted: #ededed;
    --text: #282828;
    --text-muted: #5d5d5d;
    --text-soft: #8f8f8f;
    --line: #ededed;
    --line-strong: rgba(13, 13, 13, 0.16);
    --accent: #181818;
    --accent-contrast: #ffffff;
    --accent-soft: rgba(13, 13, 13, 0.05);
    --link: #0169cc;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.875rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2.25rem;
    --space-7: 3.25rem;
    --space-8: 4.5rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --header-height: 4.25rem;
    --page-width: 86rem;
    --content-width: 44rem;
    --section-width: 70rem;
    --hairline-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d0d0d;
    --bg-elevated: #181818;
    --bg-strong: #131313;
    --bg-soft: #212121;
    --bg-muted: #303030;
    --text: #ededed;
    --text-muted: #b9b9b9;
    --text-soft: #8f8f8f;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --accent: #f3f3f3;
    --accent-contrast: #0d0d0d;
    --accent-soft: rgba(255, 255, 255, 0.08);
    --link: #66b5ff;
    --hairline-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-sm: none;
}

:root,
[data-size="m"] {
    --type-body-size: 1rem;
    --type-body-line: 1.625rem;
    --type-h1-size: 3.95rem;
    --type-h1-line: 4.15rem;
    --type-h1-weight: var(--font-weight-bold);
    --type-h2-size: 2.15rem;
    --type-h2-line: 2.55rem;
    --type-h2-weight: var(--font-weight-bold);
    --type-h3-size: 1.275rem;
    --type-h3-line: 1.7rem;
    --type-h3-weight: var(--font-weight-semibold);
    --type-brand-size: 1rem;
    --type-brand-weight: var(--font-weight-bold);
    --type-ui-size: 0.875rem;
    --type-ui-weight: var(--font-weight-semibold);
    --type-nav-size: 0.875rem;
    --type-nav-weight: var(--font-weight-medium);
    --type-label-size: 0.75rem;
    --type-label-weight: var(--font-weight-semibold);
    --type-summary-size: 1.125rem;
    --type-summary-line: 1.9rem;
    --type-intro-size: 1.0625rem;
    --type-intro-line: 1.7rem;
    --type-aside-size: 0.875rem;
    --type-caption-size: 0.875rem;
    --size-icon-button: 2.5rem;
    --size-icon: 1rem;
    --size-control-height: 2.125rem;
    --size-control-padding-y: 0.375rem;
    --size-control-padding-x: 0.875rem;
    --size-compact-padding-x: 0.75rem;
    --size-header-cta-height: 2.625rem;
    --size-header-cta-padding-y: 0.5rem;
    --size-header-cta-padding-x: 0.875rem;
    --size-nav-padding-y: 0.4375rem;
    --size-nav-padding-x: 0.875rem;
    --size-tabs-shell-padding: 0.125rem;
    --size-tab-padding-y: 0.375rem;
    --size-tab-padding-x: 0.75rem;
    --size-card-padding-y: 1.25rem;
    --size-card-padding-x: 1.25rem;
}

[data-size="xs"] {
    --type-body-size: 0.75rem;
    --type-body-line: 1.125rem;
    --type-h1-size: 1.8rem;
    --type-h1-line: 2rem;
    --type-h2-size: 1.25rem;
    --type-h2-line: 1.625rem;
    --type-h3-size: 0.875rem;
    --type-h3-line: 1.25rem;
    --type-brand-size: 0.875rem;
    --type-ui-size: 0.75rem;
    --type-nav-size: 0.75rem;
    --type-label-size: 0.75rem;
    --type-summary-size: 0.875rem;
    --type-summary-line: 1.25rem;
    --type-intro-size: 0.75rem;
    --type-intro-line: 1.125rem;
    --type-aside-size: 0.75rem;
    --type-caption-size: 0.75rem;
    --size-icon-button: 2rem;
    --size-icon: 0.84rem;
    --size-control-height: 1.625rem;
    --size-control-padding-y: 0.25rem;
    --size-control-padding-x: 0.5rem;
    --size-compact-padding-x: 0.5rem;
    --size-header-cta-height: 2rem;
    --size-header-cta-padding-y: 0.375rem;
    --size-header-cta-padding-x: 0.625rem;
    --size-nav-padding-y: 0.25rem;
    --size-nav-padding-x: 0.5rem;
    --size-tabs-shell-padding: 0.125rem;
    --size-tab-padding-y: 0.25rem;
    --size-tab-padding-x: 0.5rem;
    --size-card-padding-y: 0.75rem;
    --size-card-padding-x: 0.75rem;
}

[data-size="s"] {
    --type-body-size: 0.875rem;
    --type-body-line: 1.25rem;
    --type-h1-size: 2.4rem;
    --type-h1-line: 2.7rem;
    --type-h2-size: 1.5rem;
    --type-h2-line: 1.75rem;
    --type-h3-size: 1rem;
    --type-h3-line: 1.5rem;
    --type-brand-size: 0.875rem;
    --type-ui-size: 0.875rem;
    --type-nav-size: 0.875rem;
    --type-label-size: 0.75rem;
    --type-summary-size: 1rem;
    --type-summary-line: 1.5rem;
    --type-intro-size: 0.875rem;
    --type-intro-line: 1.25rem;
    --type-aside-size: 0.875rem;
    --type-caption-size: 0.75rem;
    --size-icon-button: 2.2rem;
    --size-icon: 0.9rem;
    --size-control-height: 1.75rem;
    --size-control-padding-y: 0.25rem;
    --size-control-padding-x: 0.625rem;
    --size-compact-padding-x: 0.625rem;
    --size-header-cta-height: 2.25rem;
    --size-header-cta-padding-y: 0.375rem;
    --size-header-cta-padding-x: 0.75rem;
    --size-nav-padding-y: 0.25rem;
    --size-nav-padding-x: 0.625rem;
    --size-tabs-shell-padding: 0.125rem;
    --size-tab-padding-y: 0.25rem;
    --size-tab-padding-x: 0.625rem;
    --size-card-padding-y: 0.875rem;
    --size-card-padding-x: 0.875rem;
}

[data-size="l"] {
    --type-body-size: 1.125rem;
    --type-body-line: 1.8125rem;
    --type-h1-size: 4.25rem;
    --type-h1-line: 4.3rem;
    --type-h2-size: 2.25rem;
    --type-h2-line: 2.625rem;
    --type-h3-size: 1.5rem;
    --type-h3-line: 1.75rem;
    --type-brand-size: 1.125rem;
    --type-ui-size: 0.875rem;
    --type-nav-size: 0.875rem;
    --type-label-size: 0.75rem;
    --type-summary-size: 1.25rem;
    --type-summary-line: 1.625rem;
    --type-intro-size: 1.125rem;
    --type-intro-line: 1.8125rem;
    --type-aside-size: 1rem;
    --type-caption-size: 0.875rem;
    --size-icon-button: 2.75rem;
    --size-icon: 1.08rem;
    --size-control-height: 2.25rem;
    --size-control-padding-y: 0.375rem;
    --size-control-padding-x: 0.75rem;
    --size-compact-padding-x: 0.75rem;
    --size-header-cta-height: 2.75rem;
    --size-header-cta-padding-y: 0.5rem;
    --size-header-cta-padding-x: 0.875rem;
    --size-nav-padding-y: 0.375rem;
    --size-nav-padding-x: 0.75rem;
    --size-tabs-shell-padding: 0.125rem;
    --size-tab-padding-y: 0.375rem;
    --size-tab-padding-x: 0.75rem;
    --size-card-padding-y: 1rem;
    --size-card-padding-x: 1rem;
}

[data-size="xl"] {
    --type-body-size: 1.25rem;
    --type-body-line: 1.625rem;
    --type-h1-size: 4.8rem;
    --type-h1-line: 4.8rem;
    --type-h2-size: 2.25rem;
    --type-h2-line: 2.625rem;
    --type-h3-size: 1.5rem;
    --type-h3-line: 1.75rem;
    --type-brand-size: 1.25rem;
    --type-ui-size: 0.875rem;
    --type-nav-size: 0.875rem;
    --type-label-size: 0.75rem;
    --type-summary-size: 1.5rem;
    --type-summary-line: 1.75rem;
    --type-intro-size: 1.25rem;
    --type-intro-line: 1.625rem;
    --type-aside-size: 1.125rem;
    --type-caption-size: 1rem;
    --size-icon-button: 3rem;
    --size-icon: 1.14rem;
    --size-control-height: 2.5rem;
    --size-control-padding-y: 0.375rem;
    --size-control-padding-x: 0.875rem;
    --size-compact-padding-x: 0.875rem;
    --size-header-cta-height: 3rem;
    --size-header-cta-padding-y: 0.5rem;
    --size-header-cta-padding-x: 1rem;
    --size-nav-padding-y: 0.375rem;
    --size-nav-padding-x: 0.875rem;
    --size-tabs-shell-padding: 0.125rem;
    --size-tab-padding-y: 0.375rem;
    --size-tab-padding-x: 0.875rem;
    --size-card-padding-y: 1rem;
    --size-card-padding-x: 1rem;
}