:root {
    --space-xs4: 2px;
    --space-xs3: 4px;
    --space-xs2: 6px;
    --space-xs: 8px;
    --space-sm: 10px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-xl2: 24px;
    --space-xl3: 32px;
    --space-xl4: 40px;
    --space-xl5: 48px;
    --space-xl6: 64px;
    --space-screen-gutter: var(--space-lg);
    --space-section-gap: var(--space-xl2);
    --space-card-padding: var(--space-lg);
    --space-row-padding-y: var(--space-md);
    --space-stack-gap: var(--space-md);
    --space-inline-gap: var(--space-xs);
    --radius-none: 0;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-xxl: 28px;
    --radius-full: 999px;
    --radius-control: var(--radius-md);
    --radius-card: var(--radius-lg);
    --radius-sheet: var(--radius-xxl);
    --font-size-caption2: 0.6875rem;
    --font-size-caption1: 0.75rem;
    --font-size-footnote: 0.8125rem;
    --font-size-subheadline: 0.9375rem;
    --font-size-callout: 1rem;
    --font-size-body: 1.0625rem;
    --font-size-title3: 1.25rem;
    --font-size-title2: 1.375rem;
    --font-size-title1: 1.75rem;
    --font-size-large-title: 2.125rem;
    --font-size-display-small: clamp(2rem, 1.7857rem + 1.0714vw, 2.75rem);
    --font-size-display-medium: clamp(2.5rem, 2.1429rem + 1.7857vw, 3.75rem);
    --font-size-display-large: clamp(3rem, 2.2857rem + 3.5714vw, 5.5rem);
    --line-height-caption2: 1rem;
    --line-height-caption1: 1rem;
    --line-height-footnote: 1.25rem;
    --line-height-subheadline: 1.25rem;
    --line-height-callout: 1.5rem;
    --line-height-body: 1.5rem;
    --line-height-title3: 1.5rem;
    --line-height-title2: 1.75rem;
    --line-height-title1: 2.25rem;
    --line-height-large-title: 2.75rem;
    --line-height-display-small: var(--leading-tight);
    --line-height-display-medium: var(--leading-tight);
    --line-height-display-large: var(--leading-tight);
    --leading-none: 1;
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.4;
    --leading-relaxed: 1.6;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-heavy: 800;
    --font-weight-black: 900;
    --tracking-tight: -0.02em;
    --tracking-snug: -0.01em;
    --tracking-none: 0;
    --tracking-wide: 0.04em;
    --tracking-caps: 0.08em;
    --tracking-spaced: 0.12em;
    --font-family-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-family-sans: var(--font-family-system);
    --font-family-display: var(--font-family-sans);
    --text-screen-title-size: var(--font-size-title2);
    --text-screen-title-line-height: var(--line-height-title2);
    --text-screen-title-weight: var(--font-weight-bold);
    --text-card-title-size: var(--font-size-callout);
    --text-card-title-line-height: var(--line-height-callout);
    --text-card-title-weight: var(--font-weight-heavy);
    --text-secondary-size: var(--font-size-footnote);
    --text-secondary-line-height: var(--line-height-footnote);
    --text-secondary-weight: var(--font-weight-regular);
    --text-caption-size: var(--font-size-caption1);
    --text-caption-line-height: var(--line-height-caption1);
    --text-caption-weight: var(--font-weight-regular);
    --text-section-label-size: var(--font-size-footnote);
    --text-section-label-line-height: var(--line-height-footnote);
    --text-section-label-weight: var(--font-weight-bold);
    --text-section-label-tracking: var(--tracking-caps);
    --text-section-label-transform: uppercase;
    --text-button-label-size: var(--font-size-callout);
    --text-button-label-line-height: var(--line-height-callout);
    --text-button-label-weight: var(--font-weight-bold);
    --elevation-colour: var(--studio-black);
    --elevation-0: none;
    --elevation-1: 0 1px 2px color-mix(in srgb, var(--elevation-colour) var(--studio-alpha-subtle), transparent), 0 2px 8px color-mix(in srgb, var(--elevation-colour) var(--studio-alpha-faint), transparent);
    --elevation-2: 0 2px 4px color-mix(in srgb, var(--elevation-colour) var(--studio-alpha-subtle), transparent), 0 8px 20px color-mix(in srgb, var(--elevation-colour) var(--studio-alpha-subtle), transparent);
    --elevation-3: 0 4px 8px color-mix(in srgb, var(--elevation-colour) var(--studio-alpha-subtle), transparent), 0 16px 36px color-mix(in srgb, var(--elevation-colour) var(--studio-alpha-soft), transparent);
    --elevation-4: 0 8px 16px color-mix(in srgb, var(--elevation-colour) var(--studio-alpha-subtle), transparent), 0 32px 64px color-mix(in srgb, var(--elevation-colour) var(--studio-alpha-soft), transparent);
    --elevation-card: var(--elevation-1);
    --elevation-popover: var(--elevation-3);
    --elevation-modal: var(--elevation-4);
    --duration-press: 120ms;
    --duration-fast: 180ms;
    --duration-base: 220ms;
    --duration-slow: 320ms;
    --duration-emphasis: 450ms;
    --duration-appear: var(--duration-base);
    --duration-dismiss: var(--duration-fast);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.2, 0, 0, 1);
    --icon-xs: 14px;
    --icon-sm: 18px;
    --icon-md: 22px;
    --icon-lg: 28px;
    --icon-xl: 36px;
    --control-min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}