:root {
    color-scheme: var(--focos-runtime-color-scheme, light);

    --focos-color-anthracite: #454b4d;
    --focos-color-accent: var(--focos-runtime-color-accent, #697174);
    --focos-color-accent-dark: #474d4f;
    --focos-color-ink: var(--focos-runtime-color-ink, #111416);
    --focos-color-graphite: #23282b;
    --focos-color-paper: var(--focos-runtime-color-paper, #ffffff);
    --focos-color-primary-action: var(--focos-runtime-color-primary-action, var(--focos-color-ink));
    --focos-color-secondary-action: var(--focos-runtime-color-secondary-action, var(--focos-color-accent));
    --focos-color-border: var(--focos-runtime-color-border, var(--focos-color-line));
    --focos-color-notice: var(--focos-runtime-color-notice, var(--focos-color-accent));
    --focos-color-on-ink: var(--focos-runtime-color-on-ink, #ffffff);
    --focos-color-on-accent: var(--focos-runtime-color-on-accent, #ffffff);
    --focos-color-on-primary-action: var(--focos-runtime-color-on-primary-action, #ffffff);
    --focos-color-on-secondary-action: var(--focos-runtime-color-on-secondary-action, #ffffff);
    --focos-color-on-notice: var(--focos-runtime-color-on-notice, #111111);
    --focos-color-page-text: var(--focos-runtime-color-page-text, var(--focos-color-ink));
    --focos-color-muted-text: var(--focos-runtime-color-muted-text, var(--focos-color-steel));
    --focos-color-link: var(--focos-runtime-color-link, var(--focos-color-secondary-action));
    --focos-color-link-hover: var(--focos-runtime-color-link-hover, var(--focos-color-primary-action));
    --focos-color-porcelain: #f7f7f5;
    --focos-color-smoke: #eceff1;
    --focos-color-steel: #687178;
    --focos-color-silver: #aeb6bb;
    --focos-color-line: #d8dde0;
    --focos-color-focus: #f2b84b;
    --focos-color-success: #2f6f5e;
    --focos-color-warning: #b96b20;

    --focos-text-primary: var(--focos-color-page-text);
    --focos-text-secondary: var(--focos-color-muted-text);
    --focos-text-muted: var(--focos-color-muted-text);
    --focos-text-inverse: var(--focos-color-paper);
    --focos-text-link: var(--focos-color-link);

    --focos-bg-page: var(--focos-runtime-bg-page, var(--focos-color-porcelain));
    --focos-bg-surface: var(--focos-runtime-bg-surface, var(--focos-color-paper));
    --focos-bg-chrome: var(--focos-runtime-bg-chrome, var(--focos-color-ink));
    --focos-bg-soft: var(--focos-color-smoke);
    --focos-bg-dark: var(--focos-bg-chrome);
    --focos-bg-graphite: var(--focos-color-graphite);

    --focos-border-subtle: 1px solid var(--focos-color-line);
    --focos-border-strong: 1px solid var(--focos-color-anthracite);

    --focos-radius-none: 0;
    --focos-radius-xs: 2px;
    --focos-radius-sm: 4px;
    --focos-radius-md: var(--focos-runtime-radius-md, 8px);
    --focos-radius-pill: 999px;

    --focos-shadow-xs: 0 1px 2px rgba(17, 20, 22, 0.08);
    --focos-shadow-sm: 0 8px 22px rgba(17, 20, 22, 0.10);
    --focos-shadow-md: 0 18px 42px rgba(17, 20, 22, 0.16);
    --focos-shadow-image: 0 24px 52px rgba(17, 20, 22, 0.24);

    --focos-space-0: 0;
    --focos-space-1: 0.25rem;
    --focos-space-2: 0.5rem;
    --focos-space-3: 0.75rem;
    --focos-space-4: 1rem;
    --focos-space-5: 1.5rem;
    --focos-space-6: 2rem;
    --focos-space-7: 3rem;
    --focos-space-8: 4.5rem;
    --focos-space-9: 6rem;

    --focos-container-sm: 40rem;
    --focos-container-md: 56rem;
    --focos-container-lg: 72rem;
    --focos-container-xl: var(--focos-runtime-container-xl, 88rem);
    --focos-container-gutter: clamp(1rem, 4vw, 2rem);

    --focos-breakpoint-sm: 36rem;
    --focos-breakpoint-md: 48rem;
    --focos-breakpoint-lg: 64rem;
    --focos-breakpoint-xl: 80rem;

    --focos-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --focos-font-weight-regular: 400;
    --focos-font-weight-medium: 550;
    --focos-font-weight-semibold: 650;
    --focos-font-weight-bold: 760;

    --focos-font-size-xs: 0.75rem;
    --focos-font-size-sm: 0.875rem;
    --focos-font-size-base: 1rem;
    --focos-font-size-md: 1.125rem;
    --focos-font-size-lg: 1.35rem;
    --focos-font-size-xl: clamp(1.7rem, 4vw, 2.35rem);
    --focos-font-size-2xl: clamp(2.25rem, 8vw, 4.6rem);
    --focos-font-size-3xl: clamp(3rem, 10vw, 6.8rem);

    --focos-line-height-tight: 1.05;
    --focos-line-height-heading: 1.12;
    --focos-line-height-body: 1.62;
    --focos-line-height-ui: 1.25;
    --focos-letter-spacing: 0;

    --focos-duration-fast: 120ms;
    --focos-duration-base: 180ms;
    --focos-duration-slow: 320ms;
    --focos-ease-standard: cubic-bezier(0.2, 0, 0, 1);

    --focos-z-base: 1;
    --focos-z-sticky: 20;
    --focos-z-dropdown: 40;
    --focos-z-dialog: 80;
    --focos-z-toast: 100;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --focos-duration-fast: 1ms;
        --focos-duration-base: 1ms;
        --focos-duration-slow: 1ms;
    }
}