/* Next UI Design Tokens (Prefix-Mirroring for Fluent UI Compatibility) */

@font-face {
    font-family: "Saira";
    src: url("../assets/fonts/Saira-wdth-wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 50% 125%;
    font-display: swap;
}

@font-face {
    font-family: "Saira Condensed";
    src: url("../assets/fonts/SairaCondensed-Thin.ttf") format("truetype");
    font-style: normal;
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: "Saira Condensed";
    src: url("../assets/fonts/SairaCondensed-ExtraLight.ttf") format("truetype");
    font-style: normal;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: "Saira Condensed";
    src: url("../assets/fonts/SairaCondensed-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Saira Condensed";
    src: url("../assets/fonts/SairaCondensed-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Saira Condensed";
    src: url("../assets/fonts/SairaCondensed-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Saira Condensed";
    src: url("../assets/fonts/SairaCondensed-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Saira Condensed";
    src: url("../assets/fonts/SairaCondensed-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Saira Condensed";
    src: url("../assets/fonts/SairaCondensed-ExtraBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Saira Condensed";
    src: url("../assets/fonts/SairaCondensed-Black.ttf") format("truetype");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: "Saira Extra Condensed";
    src: url("../assets/fonts/SairaExtraCondensed-Thin.ttf") format("truetype");
    font-style: normal;
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: "Saira Extra Condensed";
    src: url("../assets/fonts/SairaExtraCondensed-ExtraLight.ttf") format("truetype");
    font-style: normal;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: "Saira Extra Condensed";
    src: url("../assets/fonts/SairaExtraCondensed-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Saira Extra Condensed";
    src: url("../assets/fonts/SairaExtraCondensed-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Saira Extra Condensed";
    src: url("../assets/fonts/SairaExtraCondensed-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Saira Extra Condensed";
    src: url("../assets/fonts/SairaExtraCondensed-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Saira Extra Condensed";
    src: url("../assets/fonts/SairaExtraCondensed-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Saira Extra Condensed";
    src: url("../assets/fonts/SairaExtraCondensed-ExtraBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Saira Extra Condensed";
    src: url("../assets/fonts/SairaExtraCondensed-Black.ttf") format("truetype");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: "League Gothic Local";
    src: url("../assets/fonts/LeagueGothic-Regular-VariableFont_wdth.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    /* Anti-flash: tell browser to use light canvas + scrollbar styling.
       background-color on :root prevents white canvas bleed-through during resize. */
    color-scheme: light;
    background-color: var(--sx-color-neutral-background-3);

    /* 1. Global Scale Factors (The source of all REMs) */
    --sx-unit-rem: 0.25rem; /* 4px */

    /* Base text color — ensures all elements inherit the correct themed foreground */
    color: var(--sx-color-neutral-foreground-1);

    /* 2. Colors - Neutral */
    --sx-colorNeutralBackground1: #ffffff;
    --sx-colorNeutralBackground2: #fafafa;
    --sx-colorNeutralBackground3: #f5f5f5;
    --sx-colorNeutralForeground1: #242424;
    --sx-colorNeutralForeground2: #6a6a6a;
    --sx-colorNeutralForeground3: #9b9b9b;
    --sx-colorNeutralForeground4: #999999;
    --sx-colorNeutralStroke1: #d1d1d1;
    --sx-colorNeutralStroke2: #e0e0e0;

    /* 2.1. Disabled State Colors */
    --sx-colorNeutralBackgroundDisabled: #f5f5f5;
    --sx-colorNeutralForegroundDisabled: #bdbdbd;
    --sx-colorNeutralStrokeDisabled: #e0e0e0;
    --sx-colorBrandBackgroundDisabled: #a1c4fd;

    /* 3. Colors - Brand (Action) */
    --sx-colorBrandBackground1: #0078d4;
    --sx-colorBrandBackground2: #106ebe;
    --sx-colorBrandForeground1: #0078d4;

    /* 3.1. Primary Color Palette (Dynamic - injected by theme runtime) */
    --sx-primary-seed: #3B82F6;           /* Seed color (default: blue) */
    --sx-primary-50: #EFF6FF;             /* Lightest */
    --sx-primary-100: #DBEAFE;
    --sx-primary-200: #BFDBFE;
    --sx-primary-300: #93C5FD;
    --sx-primary-400: #60A5FA;
    --sx-primary-500: #3B82F6;            /* Base color */
    --sx-primary-600: #2563EB;
    --sx-primary-700: #1D4ED8;
    --sx-primary-800: #1E40AF;
    --sx-primary-900: #1E3A8A;            /* Darkest */

    /* 3.2. Semantic aliases for backward compatibility */
    /* Note: BrandForeground1 and BrandStroke1 use darker variants as CSS-only WCAG fallback.
       JS ThemeRuntime will override these with exact WCAG-computed values via inline styles. */
    --sx-colorBrandBackground1: var(--sx-primary-500);
    --sx-colorBrandBackground2: var(--sx-primary-600);
    --sx-colorBrandForeground1: var(--sx-primary-700);
    --sx-colorBrandStroke1: var(--sx-primary-600);

    /* 3.3. Status Colors (Info, Success, Warning, Danger) */
    --sx-colorStatusInfo: #0078d4;
    --sx-colorStatusInfoBackground: #eff6fc;
    --sx-colorStatusInfoForeground: #0078d4;
    --sx-colorStatusInfoBorder: #0078d4;
    --sx-colorStatusSuccess: #107c10;
    --sx-colorStatusSuccessBackground: #dff6dd;
    --sx-colorStatusSuccessForeground: #107c10;
    --sx-colorStatusSuccessBorder: #107c10;
    --sx-colorStatusWarning: #ffb900;
    --sx-colorStatusWarningBackground: #fff4ce;
    --sx-colorStatusWarningForeground: #9d5d00;
    --sx-colorStatusWarningBorder: #ffb900;
    --sx-colorStatusDanger: #d13438;
    --sx-colorStatusDangerBackground: #fde7e9;
    --sx-colorStatusDangerForeground: #d13438;
    --sx-colorStatusDangerBorder: #d13438;

    /* 3.4. On-Brand/On-Status Colors (Text on colored backgrounds) */
    --sx-colorOnBrand: #ffffff;
    --sx-colorNeutralForegroundOnBrand: var(--sx-colorOnBrand); /* Alias for consistency */
    --sx-colorOnStatus: #ffffff;
    --sx-colorOnWarning: #000000; /* Black text on warning background */

    /* 3.5. Interactive State Tokens (Reference dynamic palette) */
    /* Selected state - uses deeper color for emphasis */
    --sx-colorBrandBackgroundSelected: var(--sx-primary-600);
    --sx-colorBrandForegroundOnSelected: var(--sx-colorOnBrand); /* Dynamic contrast color */
    /* Hover state */
    --sx-colorBrandBackgroundHover: var(--sx-primary-600);
    /* Pressed state */
    --sx-colorBrandBackgroundPressed: var(--sx-primary-700);
    /* Neutral selected state */
    --sx-colorNeutralBackgroundSelected: var(--sx-colorNeutralBackground3);
    --sx-colorNeutralForegroundOnSelected: var(--sx-colorNeutralForeground1);

    /* 3.5.1 Canonical kebab-case color aliases
       Legacy camel/Pascal tokens remain runtime compatibility inputs. New component CSS
       should prefer these canonical tokens. */
    --sx-color-neutral-background-1: var(--sx-colorNeutralBackground1);
    --sx-color-neutral-background-2: var(--sx-colorNeutralBackground2);
    --sx-color-neutral-background-3: var(--sx-colorNeutralBackground3);
    --sx-color-neutral-background-4: var(--sx-colorNeutralBackground4, var(--sx-color-neutral-background-3));
    --sx-color-neutral-background-disabled: var(--sx-colorNeutralBackgroundDisabled);
    --sx-color-neutral-background-selected: var(--sx-colorNeutralBackgroundSelected);
    --sx-color-neutral-background-1-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 2%, var(--sx-color-neutral-background-1));
    --sx-color-neutral-background-1-pressed: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 6%, var(--sx-color-neutral-background-1));
    --sx-color-neutral-background-2-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 3%, var(--sx-color-neutral-background-2));
    --sx-color-neutral-background-3-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 4%, var(--sx-color-neutral-background-3));
    --sx-color-neutral-background-3-pressed: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 8%, var(--sx-color-neutral-background-3));
    --sx-color-neutral-foreground-1: var(--sx-colorNeutralForeground1);
    --sx-color-neutral-foreground-2: var(--sx-colorNeutralForeground2);
    --sx-color-neutral-foreground-3: var(--sx-colorNeutralForeground3);
    --sx-color-neutral-foreground-4: var(--sx-colorNeutralForeground4);
    --sx-color-neutral-foreground-disabled: var(--sx-colorNeutralForegroundDisabled);
    --sx-color-neutral-foreground-on-brand: var(--sx-colorNeutralForegroundOnBrand);
    --sx-color-neutral-foreground-on-selected: var(--sx-colorNeutralForegroundOnSelected);
    --sx-color-neutral-stroke-1: var(--sx-colorNeutralStroke1);
    --sx-color-neutral-stroke-2: var(--sx-colorNeutralStroke2);
    --sx-color-neutral-stroke-disabled: var(--sx-colorNeutralStrokeDisabled);
    --sx-color-neutral-stroke-1-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 18%, var(--sx-color-neutral-stroke-1));
    --sx-color-neutral-stroke-accessible: var(--sx-color-neutral-foreground-3);
    --sx-colorNeutralBackground1Hover: var(--sx-color-neutral-background-1-hover);
    --sx-colorNeutralBackground1Pressed: var(--sx-color-neutral-background-1-pressed);
    --sx-colorNeutralBackground2Hover: var(--sx-color-neutral-background-2-hover);
    --sx-colorNeutralBackground3Hover: var(--sx-color-neutral-background-3-hover);
    --sx-colorNeutralBackground3Pressed: var(--sx-color-neutral-background-3-pressed);
    --sx-colorNeutralStroke1Hover: var(--sx-color-neutral-stroke-1-hover);
    --sx-colorNeutralStrokeAccessible: var(--sx-color-neutral-stroke-accessible);

    --sx-color-brand-background: var(--sx-colorBrandBackground1);
    --sx-color-brand-background-1: var(--sx-colorBrandBackground1);
    --sx-color-brand-background-2: var(--sx-colorBrandBackground2);
    --sx-color-brand-background-hover: var(--sx-colorBrandBackgroundHover);
    --sx-color-brand-background-pressed: var(--sx-colorBrandBackgroundPressed);
    --sx-color-brand-background-selected: var(--sx-colorBrandBackgroundSelected);
    --sx-color-brand-background-disabled: var(--sx-colorBrandBackgroundDisabled);
    --sx-color-brand-foreground-1: var(--sx-colorBrandForeground1);
    --sx-color-brand-foreground-1-hover: color-mix(in srgb, var(--sx-color-brand-foreground-1) 82%, var(--sx-color-neutral-foreground-1));
    --sx-color-brand-foreground-on-selected: var(--sx-colorBrandForegroundOnSelected);
    --sx-color-brand-stroke-1: var(--sx-colorBrandStroke1);
    --sx-colorBrandBackground: var(--sx-color-brand-background);
    --sx-colorBrandForeground1Hover: var(--sx-color-brand-foreground-1-hover);
    --sx-color-on-brand: var(--sx-colorOnBrand);
    --sx-color-on-status: var(--sx-colorOnStatus);
    --sx-color-on-warning: var(--sx-colorOnWarning);

    --sx-color-status-info: var(--sx-colorStatusInfo);
    --sx-color-status-info-background: var(--sx-colorStatusInfoBackground);
    --sx-color-status-info-background-1: var(--sx-colorStatusInfoBackground1, var(--sx-color-status-info-background));
    --sx-color-status-info-foreground: var(--sx-colorStatusInfoForeground);
    --sx-color-status-info-foreground-1: var(--sx-colorStatusInfoForeground1, var(--sx-color-status-info-foreground));
    --sx-color-status-info-border: var(--sx-colorStatusInfoBorder);
    --sx-color-status-success: var(--sx-colorStatusSuccess);
    --sx-color-status-success-background: var(--sx-colorStatusSuccessBackground);
    --sx-color-status-success-background-1: var(--sx-colorStatusSuccessBackground1, var(--sx-color-status-success-background));
    --sx-color-status-success-foreground: var(--sx-colorStatusSuccessForeground);
    --sx-color-status-success-foreground-1: var(--sx-colorStatusSuccessForeground1, var(--sx-color-status-success-foreground));
    --sx-color-status-success-border: var(--sx-colorStatusSuccessBorder);
    --sx-color-status-warning: var(--sx-colorStatusWarning);
    --sx-color-status-warning-background: var(--sx-colorStatusWarningBackground);
    --sx-color-status-warning-background-1: var(--sx-colorStatusWarningBackground1, var(--sx-color-status-warning-background));
    --sx-color-status-warning-foreground: var(--sx-colorStatusWarningForeground);
    --sx-color-status-warning-foreground-1: var(--sx-colorStatusWarningForeground1, var(--sx-color-status-warning-foreground));
    --sx-color-status-warning-border: var(--sx-colorStatusWarningBorder);
    --sx-color-status-danger: var(--sx-colorStatusDanger);
    --sx-color-status-danger-background: var(--sx-colorStatusDangerBackground);
    --sx-color-status-danger-background-1: var(--sx-colorStatusDangerBackground1, var(--sx-color-status-danger-background));
    --sx-color-status-danger-foreground: var(--sx-colorStatusDangerForeground);
    --sx-color-status-danger-foreground-1: var(--sx-colorStatusDangerForeground1, var(--sx-color-status-danger-foreground));
    --sx-color-status-danger-border: var(--sx-colorStatusDangerBorder);
    --sx-colorStatusInfoBackground1: var(--sx-color-status-info-background-1);
    --sx-colorStatusInfoForeground1: var(--sx-color-status-info-foreground-1);
    --sx-colorStatusSuccessBackground1: var(--sx-color-status-success-background-1);
    --sx-colorStatusSuccessForeground1: var(--sx-color-status-success-foreground-1);
    --sx-colorStatusWarningBackground1: var(--sx-color-status-warning-background-1);
    --sx-colorStatusWarningForeground1: var(--sx-color-status-warning-foreground-1);
    --sx-colorStatusDangerBackground1: var(--sx-color-status-danger-background-1);
    --sx-colorStatusDangerForeground1: var(--sx-color-status-danger-foreground-1);

    --sx-color-code-background: var(--sx-colorCodeBackground);
    --sx-color-code-foreground: var(--sx-colorCodeForeground);
    --sx-color-code-header-background: var(--sx-colorCodeHeaderBackground);
    --sx-color-code-border: var(--sx-colorCodeBorder);
    --sx-color-code-text-secondary: var(--sx-colorCodeTextSecondary);
    --sx-color-code-text-hover: var(--sx-colorCodeTextHover);
    --sx-color-code-token-key: var(--sx-color-status-danger-foreground);
    --sx-color-code-token-string: var(--sx-color-status-warning-foreground);
    --sx-color-code-token-number: var(--sx-color-status-info-foreground);
    --sx-color-code-token-boolean: var(--sx-color-brand-foreground-1);
    --sx-color-code-token-null: var(--sx-color-neutral-foreground-4);
    --sx-color-code-highlight-background: color-mix(in srgb, var(--sx-color-status-warning) 28%, transparent);
    --sx-color-code-highlight-border: var(--sx-color-status-warning-border);
    --sx-color-rating: var(--sx-colorRating);

    /* 3.6. Rating/Accent Colors */
    --sx-colorRating: #ffb400; /* Standard Gold for ratings */

    /* 3.5. Code Editor Colors (Support dark mode) */
    --sx-colorCodeBackground: var(--sx-colorNeutralBackground1);
    --sx-colorCodeForeground: var(--sx-colorNeutralForeground1);
    --sx-colorCodeHeaderBackground: var(--sx-colorNeutralBackground2);
    --sx-colorCodeBorder: var(--sx-colorNeutralStroke1);
    --sx-colorCodeTextSecondary: var(--sx-colorNeutralForeground3);
    --sx-colorCodeTextHover: var(--sx-colorNeutralForeground1);

    /* 4. Geometry (Radius - Not affected by density) */
    --sx-radius-none: 0;
    --sx-radius-sm: 0.25rem;
    --sx-radius-md: 0.5rem;
    --sx-radius-lg: 0.75rem;
    --sx-radius-xl: 1rem;
    --sx-radius-pill: 999px;
    --sx-aspect-ratio-square: 1 / 1;
    --sx-flex-shrink-none: 0;
    --sx-flex-fixed-auto: 0 0 auto;
    --sx-opacity-hidden: 0;
    --sx-opacity-visible: 1;

    /* 4.1. Border Width (Not affected by density) */
    --sx-border-width-thin: 1px;
    --sx-border-width-medium: 2px;
    --sx-border-width-thick: 4px;

    /* --- Content Width Constraints --- */
    --sx-width-constrained-narrow: 640px;
    --sx-width-constrained-standard: 1024px;
    --sx-width-constrained-wide: 1440px;

    /* 5.6. Control Dimensions (Partially affected by density: 80%-100% range) */
    /* Formula: base * (0.8 + 0.2 * density-scale) */
    --sx-control-height-base-xs: 1.5rem;
    --sx-control-height-base-sm: 1.75rem;
    --sx-control-height-base-compact: 2rem;
    --sx-control-height-base-md: 2.25rem;
    --sx-control-height-base-lg: 3rem;
    --sx-control-height-base-xl: 3.5rem;
    --sx-control-height-xs: calc(var(--sx-control-height-base-xs) * (0.8 + 0.2 * var(--sx-density-scale, 1)));
    --sx-control-height-sm: calc(var(--sx-control-height-base-sm) * (0.8 + 0.2 * var(--sx-density-scale, 1)));
    --sx-control-height-compact: calc(var(--sx-control-height-base-compact) * (0.8 + 0.2 * var(--sx-density-scale, 1)));
    --sx-control-height-md: calc(var(--sx-control-height-base-md) * (0.8 + 0.2 * var(--sx-density-scale, 1)));
    --sx-control-height-lg: calc(var(--sx-control-height-base-lg) * (0.8 + 0.2 * var(--sx-density-scale, 1)));
    --sx-control-height-xl: calc(var(--sx-control-height-base-xl) * (0.8 + 0.2 * var(--sx-density-scale, 1)));
    --sx-control-min-width: 4rem;

    /* 5.1. Layout Density (Dynamic - injected by theme runtime, default: 1.0) */
    /* Density scale factor affects all spacing and some control dimensions */
    --sx-density-scale: 1.0;

    /* 5.2. Base Spacing (Not affected by density, used as base values) */
    --sx-spacing-base-xxs: 0.125rem;
    --sx-spacing-base-xs: 0.25rem;
    --sx-spacing-base-sm: 0.5rem;
    --sx-spacing-base-md: 0.75rem;
    --sx-spacing-base-lg: 1rem;
    --sx-spacing-base-xl: 1.5rem;

    /* 5.3. Spacing Tokens (Scaled by density) */
    --sx-spacing-xxs: calc(var(--sx-spacing-base-xxs) * var(--sx-density-scale, 1));
    --sx-spacing-xs: calc(var(--sx-spacing-base-xs) * var(--sx-density-scale, 1));
    --sx-spacing-sm: calc(var(--sx-spacing-base-sm) * var(--sx-density-scale, 1));
    --sx-spacing-md: calc(var(--sx-spacing-base-md) * var(--sx-density-scale, 1));
    --sx-spacing-lg: calc(var(--sx-spacing-base-lg) * var(--sx-density-scale, 1));
    --sx-spacing-xl: calc(var(--sx-spacing-base-xl) * var(--sx-density-scale, 1));

    /* Density-aware hierarchy indentation scale. Component defaults remain unchanged unless a
       semantic indent size is explicitly selected. */
    --sx-hierarchy-indent-xs: var(--sx-spacing-sm);
    --sx-hierarchy-indent-sm: var(--sx-spacing-md);
    --sx-hierarchy-indent-md: var(--sx-spacing-lg);
    --sx-hierarchy-indent-lg: var(--sx-spacing-xl);
    --sx-hierarchy-indent-xl: calc(var(--sx-spacing-xl) + var(--sx-spacing-sm));

    /* 5.3.1. Micro Spacing (Scaled by density, for very small gaps) */
    --sx-spacing-micro: calc(0.0625rem * var(--sx-density-scale, 1)); /* Deprecated compatibility alias; prefer xxs/xs */
    --sx-spacing-tiny: var(--sx-spacing-xxs);                          /* Deprecated compatibility alias; prefer xxs */
    --sx-spacing-mini: var(--sx-spacing-xs);                           /* Deprecated compatibility alias; prefer xs */

    /* 5.4. Semantic Spacing Tokens (Auto-scaled by density) */
    --sx-spacing-none: 0;
    --sx-spacing-s: var(--sx-spacing-sm);
    --sx-spacing-m: var(--sx-spacing-md);
    --sx-spacing-l: var(--sx-spacing-lg);

    /* 5.5. Semantic Layout Spacing (Auto-scaled by density) */
    --sx-spacing-component-padding: var(--sx-spacing-md);
    --sx-spacing-component-gap: var(--sx-spacing-sm);
    --sx-spacing-layout-gap: var(--sx-spacing-lg);
    --sx-spacing-section-gap: var(--sx-spacing-xl);
    --sx-spacing-list-item-gap: var(--sx-spacing-sm);
    --sx-spacing-list-section-gap: var(--sx-spacing-md);

    /* 6. Typography */
    /* Font scale is a user preference. At 1.0, 1rem remains the platform's 16px root baseline. */
    --sx-font-scale: 1.0;

    /* Discrete type scale: 10 / 12 / 14 / 16 / 20 / 32px at the 16px root baseline. */
    --sx-font-size-micro: calc(0.625rem * var(--sx-font-scale, 1));
    --sx-font-size-small: calc(0.75rem * var(--sx-font-scale, 1));
    --sx-font-size-medium: calc(0.875rem * var(--sx-font-scale, 1));
    --sx-font-size-normal: calc(1rem * var(--sx-font-scale, 1));
    --sx-font-size-large: calc(1.25rem * var(--sx-font-scale, 1));
    --sx-font-size-display: calc(2rem * var(--sx-font-scale, 1));

    /* Established aliases keep existing components compatible with the discrete scale. */
    --sx-font-size-xxs: var(--sx-font-size-micro);
    --sx-font-size-caption: var(--sx-font-size-small);
    --sx-font-size-xs: var(--sx-font-size-small);
    --sx-font-size-sm: var(--sx-font-size-medium);
    --sx-font-size-base: var(--sx-font-size-normal);
    --sx-font-size-default: var(--sx-font-size-normal);
    --sx-font-size-lg: var(--sx-font-size-large);
    --sx-font-size-title: var(--sx-font-size-large);
    --sx-font-size-xl: var(--sx-font-size-large);
    --sx-font-size-display-sm: var(--sx-font-size-display);
    --sx-font-size-xxl: var(--sx-font-size-display);
    --sx-font-size-xxxl: var(--sx-font-size-display);
    --sx-font-size-display-lg: var(--sx-font-size-display);
    --sx-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", sans-serif;
    --sx-font-family-monospace: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --sx-fontFamilyBase: var(--sx-font-family-base);
    --sx-fontFamilyMonospace: var(--sx-font-family-monospace);
    --sx-font-family-mono: var(--sx-font-family-monospace);
    --sx-font-size-tiny: var(--sx-font-size-medium);                 /* Deprecated compatibility alias; prefer medium */
    --sx-font-weight-thin: 100;
    --sx-font-weight-ultralight: 200;
    --sx-font-weight-light: 300;
    --sx-font-weight-semilight: 350;
    --sx-font-weight-normal: 400;
    --sx-font-weight-medium: 500;
    --sx-font-weight-semibold: 600;
    --sx-font-weight-bold: 700;
    --sx-font-weight-extrabold: 800;
    --sx-font-weight-black: 900;

    /* Fluent-style compatibility aliases. Prefer kebab-case weights in new CSS. */
    --sx-fontWeightRegular: var(--sx-font-weight-normal);
    --sx-fontWeightMedium: var(--sx-font-weight-medium);
    --sx-fontWeightSemibold: var(--sx-font-weight-semibold);
    --sx-fontWeightBold: var(--sx-font-weight-bold);

    /* Line-height foundation */
    --sx-line-height-single: 1;
    --sx-line-height-tight: 1.2;
    --sx-line-height-compact: 1.35;
    --sx-line-height-body: 1.5;
    --sx-line-height-reading: 1.6;
    --sx-line-height-relaxed: 1.7;
    --sx-line-height-control: 1.2;
    --sx-lineHeightBase: var(--sx-line-height-body);
    --sx-lineHeightBase200: var(--sx-line-height-compact);

    /* 6.1 Font family semantic roles */
    --sx-font-family-sans: var(--sx-font-family-base);
    --sx-font-family-serif: Georgia, "Times New Roman", Times, serif;
    --sx-font-family-cjk-sans: var(--sx-font-family-sans);
    --sx-font-family-cjk-serif: var(--sx-font-family-serif);
    --sx-font-family-body: var(--sx-font-family-base);
    --sx-font-family-heading: var(--sx-font-family-body);
    --sx-font-family-title: var(--sx-font-family-heading);
    --sx-font-family-label: var(--sx-font-family-body);
    --sx-font-family-caption: var(--sx-font-family-body);
    --sx-font-family-metadata: var(--sx-font-family-caption);
    --sx-font-family-control: var(--sx-font-family-body);
    --sx-font-family-command: var(--sx-font-family-control);
    --sx-font-family-input: var(--sx-font-family-control);
    --sx-font-family-editor: var(--sx-font-family-input);
    --sx-font-family-option: var(--sx-font-family-control);
    --sx-font-family-menu: var(--sx-font-family-command);
    --sx-font-family-list: var(--sx-font-family-control);
    --sx-font-family-navigation: var(--sx-font-family-list);
    --sx-font-family-tab: var(--sx-font-family-command);
    --sx-font-family-display-fallback: "Roboto Condensed", "Noto Sans", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", var(--sx-font-family-cjk-sans), var(--sx-font-family-sans);
    --sx-font-family-display-wide-fallback: "Noto Sans", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", var(--sx-font-family-cjk-sans), var(--sx-font-family-sans);
    --sx-font-family-display-narrow-fallback: "Roboto Condensed", "Noto Sans", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", var(--sx-font-family-cjk-sans), var(--sx-font-family-sans);
    --sx-font-family-number-fallback: var(--sx-font-family-display-narrow);
    --sx-font-family-display: "Saira Condensed", var(--sx-font-family-display-fallback);
    --sx-font-family-display-wide: "Saira", var(--sx-font-family-display-wide-fallback);
    --sx-font-family-display-narrow: "Saira Extra Condensed", var(--sx-font-family-display-narrow-fallback);
    --sx-font-family-number: var(--sx-font-family-number-fallback);
    --sx-font-family-number-compact: var(--sx-font-family-number);
    --sx-font-family-number-display: "League Gothic Local", var(--sx-font-family-number-fallback);
    --sx-font-family-number-input: var(--sx-font-family-number);
    --sx-font-family-code: var(--sx-font-family-mono);
    --sx-font-family-badge: var(--sx-font-family-label);

    /* 6.2 Typography recipes: family + size + weight + line-height + color */
    --sx-type-body-font-family: var(--sx-font-family-body);
    --sx-type-body-font-size: var(--sx-font-size-normal);
    --sx-type-body-font-weight: var(--sx-font-weight-normal);
    --sx-type-body-line-height: var(--sx-line-height-reading);
    --sx-type-body-color: var(--sx-color-neutral-foreground-1);

    --sx-type-body-strong-font-family: var(--sx-type-body-font-family);
    --sx-type-body-strong-font-size: var(--sx-type-body-font-size);
    --sx-type-body-strong-font-weight: var(--sx-font-weight-semibold);
    --sx-type-body-strong-line-height: var(--sx-type-body-line-height);
    --sx-type-body-strong-color: var(--sx-type-body-color);

    --sx-type-heading-font-family: var(--sx-font-family-heading);
    --sx-type-heading-font-size: var(--sx-font-size-large);
    --sx-type-heading-font-weight: var(--sx-font-weight-semibold);
    --sx-type-heading-line-height: var(--sx-line-height-compact);
    --sx-type-heading-color: var(--sx-color-neutral-foreground-1);

    --sx-type-title-font-family: var(--sx-font-family-title);
    --sx-type-title-font-size: var(--sx-font-size-large);
    --sx-type-title-font-weight: var(--sx-font-weight-bold);
    --sx-type-title-line-height: var(--sx-line-height-compact);
    --sx-type-title-color: var(--sx-color-neutral-foreground-1);

    --sx-type-display-font-family: var(--sx-font-family-display);
    --sx-type-display-font-size: var(--sx-font-size-display);
    --sx-type-display-font-weight: var(--sx-font-weight-bold);
    --sx-type-display-line-height: var(--sx-line-height-tight);
    --sx-type-display-color: var(--sx-color-neutral-foreground-1);

    --sx-type-display-wide-font-family: var(--sx-font-family-display-wide);
    --sx-type-display-wide-font-size: var(--sx-type-display-font-size);
    --sx-type-display-wide-font-weight: var(--sx-type-display-font-weight);
    --sx-type-display-wide-line-height: var(--sx-type-display-line-height);
    --sx-type-display-wide-color: var(--sx-type-display-color);

    --sx-type-display-narrow-font-family: var(--sx-font-family-display-narrow);
    --sx-type-display-narrow-font-size: var(--sx-type-display-font-size);
    --sx-type-display-narrow-font-weight: var(--sx-type-display-font-weight);
    --sx-type-display-narrow-line-height: var(--sx-type-display-line-height);
    --sx-type-display-narrow-color: var(--sx-type-display-color);

    --sx-type-label-font-family: var(--sx-font-family-label);
    --sx-type-label-font-size: var(--sx-font-size-small);
    --sx-type-label-font-weight: var(--sx-font-weight-semibold);
    --sx-type-label-line-height: var(--sx-line-height-compact);
    --sx-type-label-color: var(--sx-color-neutral-foreground-3);

    --sx-type-caption-font-family: var(--sx-font-family-caption);
    --sx-type-caption-font-size: var(--sx-font-size-small);
    --sx-type-caption-font-weight: var(--sx-font-weight-normal);
    --sx-type-caption-line-height: var(--sx-line-height-compact);
    --sx-type-caption-color: var(--sx-color-neutral-foreground-2);

    --sx-type-hint-font-family: var(--sx-font-family-metadata);
    --sx-type-hint-font-size: var(--sx-font-size-micro);
    --sx-type-hint-font-weight: var(--sx-font-weight-normal);
    --sx-type-hint-line-height: var(--sx-line-height-compact);
    --sx-type-hint-color: var(--sx-color-neutral-foreground-3);

    --sx-type-control-font-family: var(--sx-font-family-control);
    --sx-type-control-font-size: var(--sx-font-size-medium);
    --sx-type-control-font-weight: var(--sx-font-weight-normal);
    --sx-type-control-line-height: var(--sx-line-height-control);
    --sx-type-control-color: var(--sx-color-neutral-foreground-1);

    --sx-type-command-font-family: var(--sx-font-family-command);
    --sx-type-command-font-size: var(--sx-font-size-normal);
    --sx-type-command-font-weight: var(--sx-font-weight-semibold);
    --sx-type-command-line-height: var(--sx-line-height-control);
    --sx-type-command-color: var(--sx-color-neutral-foreground-1);

    --sx-type-input-font-family: var(--sx-font-family-input);
    --sx-type-input-font-size: var(--sx-font-size-normal);
    --sx-type-input-font-weight: var(--sx-font-weight-normal);
    --sx-type-input-line-height: var(--sx-line-height-body);
    --sx-type-input-color: var(--sx-color-neutral-foreground-1);

    --sx-type-editor-font-family: var(--sx-font-family-editor);
    --sx-type-editor-font-size: var(--sx-font-size-medium);
    --sx-type-editor-font-weight: var(--sx-font-weight-normal);
    --sx-type-editor-line-height: var(--sx-line-height-reading);
    --sx-type-editor-color: var(--sx-color-neutral-foreground-1);

    --sx-type-option-font-family: var(--sx-font-family-option);
    --sx-type-option-font-size: var(--sx-font-size-medium);
    --sx-type-option-font-weight: var(--sx-font-weight-normal);
    --sx-type-option-line-height: var(--sx-line-height-control);
    --sx-type-option-color: var(--sx-color-neutral-foreground-1);

    --sx-type-menu-font-family: var(--sx-font-family-menu);
    --sx-type-menu-font-size: var(--sx-font-size-normal);
    --sx-type-menu-font-weight: var(--sx-font-weight-normal);
    --sx-type-menu-line-height: var(--sx-line-height-control);
    --sx-type-menu-color: var(--sx-color-neutral-foreground-1);

    --sx-type-list-font-family: var(--sx-font-family-list);
    --sx-type-list-font-size: var(--sx-font-size-normal);
    --sx-type-list-font-weight: var(--sx-font-weight-normal);
    --sx-type-list-line-height: var(--sx-line-height-body);
    --sx-type-list-color: var(--sx-color-neutral-foreground-1);

    --sx-type-navigation-font-family: var(--sx-font-family-navigation);
    --sx-type-navigation-font-size: var(--sx-font-size-normal);
    --sx-type-navigation-font-weight: var(--sx-font-weight-normal);
    --sx-type-navigation-line-height: var(--sx-line-height-control);
    --sx-type-navigation-color: var(--sx-color-neutral-foreground-1);

    --sx-type-tab-font-family: var(--sx-font-family-tab);
    --sx-type-tab-font-size: var(--sx-font-size-normal);
    --sx-type-tab-font-weight: var(--sx-font-weight-normal);
    --sx-type-tab-line-height: var(--sx-line-height-control);
    --sx-type-tab-color: var(--sx-color-neutral-foreground-1);

    --sx-type-number-font-family: var(--sx-font-family-number);
    --sx-type-number-font-size: var(--sx-font-size-normal);
    --sx-type-number-font-weight: var(--sx-font-weight-normal);
    --sx-type-number-line-height: var(--sx-line-height-control);
    --sx-type-number-color: var(--sx-color-neutral-foreground-1);

    --sx-type-number-compact-font-family: var(--sx-font-family-number-compact);
    --sx-type-number-compact-font-size: var(--sx-font-size-small);
    --sx-type-number-compact-font-weight: var(--sx-font-weight-semibold);
    --sx-type-number-compact-line-height: var(--sx-line-height-single);
    --sx-type-number-compact-color: var(--sx-color-neutral-foreground-1);

    --sx-type-number-display-font-family: var(--sx-font-family-number-display);
    --sx-type-number-display-font-size: var(--sx-font-size-display);
    --sx-type-number-display-font-weight: var(--sx-font-weight-normal);
    --sx-type-number-display-line-height: var(--sx-line-height-tight);
    --sx-type-number-display-color: var(--sx-color-neutral-foreground-1);

    --sx-type-number-input-font-family: var(--sx-font-family-number-input);
    --sx-type-number-input-font-size: var(--sx-font-size-medium);
    --sx-type-number-input-font-weight: var(--sx-font-weight-normal);
    --sx-type-number-input-line-height: var(--sx-line-height-control);
    --sx-type-number-input-color: var(--sx-color-neutral-foreground-1);

    --sx-type-badge-font-family: var(--sx-font-family-badge);
    --sx-type-badge-font-size: var(--sx-font-size-small);
    --sx-type-badge-font-weight: var(--sx-font-weight-semibold);
    --sx-type-badge-line-height: var(--sx-line-height-single);
    --sx-type-badge-color: var(--sx-color-neutral-foreground-1);

    --sx-type-table-header-font-family: var(--sx-font-family-label);
    --sx-type-table-header-font-size: var(--sx-font-size-medium);
    --sx-type-table-header-font-weight: var(--sx-font-weight-semibold);
    --sx-type-table-header-line-height: var(--sx-line-height-compact);
    --sx-type-table-header-color: var(--sx-color-neutral-foreground-1);

    --sx-type-table-cell-font-family: var(--sx-font-family-list);
    --sx-type-table-cell-font-size: var(--sx-font-size-medium);
    --sx-type-table-cell-font-weight: var(--sx-font-weight-normal);
    --sx-type-table-cell-line-height: var(--sx-line-height-body);
    --sx-type-table-cell-color: var(--sx-color-neutral-foreground-1);

    --sx-type-code-font-family: var(--sx-font-family-code);
    --sx-type-code-font-size: var(--sx-font-size-medium);
    --sx-type-code-font-weight: var(--sx-font-weight-normal);
    --sx-type-code-line-height: var(--sx-line-height-body);
    --sx-type-code-color: var(--sx-color-code-foreground);

    /* 6.3 Component typography recipes */
    --sx-button-font-family: var(--sx-type-command-font-family);
    --sx-button-font-size: var(--sx-type-command-font-size);
    --sx-button-font-weight: var(--sx-type-command-font-weight);
    --sx-button-line-height: var(--sx-type-command-line-height);
    --sx-button-xs-font-size: var(--sx-font-size-xxs);
    --sx-button-sm-font-size: var(--sx-font-size-xs);
    --sx-button-md-font-size: var(--sx-button-font-size);
    --sx-button-lg-font-size: var(--sx-font-size-base);
    --sx-button-xl-font-size: var(--sx-font-size-lg);
    --sx-button-quiet-font-weight: var(--sx-font-weight-normal);
    --sx-button-default-height: var(--sx-control-height-md);
    --sx-button-default-padding-inline: var(--sx-list-item-padding-inline);
    --sx-button-transition: var(--sx-control-transition);
    --sx-button-active-scale: var(--sx-control-active-scale);
    --sx-button-xs-min-width: 2.5rem;
    --sx-button-sm-min-width: 3rem;
    --sx-button-xl-min-width: 5rem;
    --sx-button-circular-padding-inline: var(--sx-spacing-lg);
    --sx-button-xs-padding-inline: var(--sx-spacing-sm);
    --sx-button-sm-padding-inline: var(--sx-spacing-sm);
    --sx-button-lg-padding-inline: var(--sx-spacing-xl);
    --sx-button-xl-padding-inline: calc(var(--sx-spacing-xl) * 1.25);
    --sx-button-xs-gap: var(--sx-spacing-xs);
    --sx-button-sm-gap: calc(var(--sx-spacing-xs) + var(--sx-spacing-xxs));
    --sx-button-md-gap: var(--sx-list-item-leading-gap);
    --sx-button-lg-gap: calc(var(--sx-spacing-sm) + var(--sx-spacing-xxs));
    --sx-button-xl-gap: var(--sx-spacing-md);
    --sx-button-icon-only-padding: var(--sx-spacing-none);
    --sx-button-icon-only-gap: var(--sx-spacing-none);
    --sx-button-icon-only-min-width: var(--sx-spacing-none);
    --sx-button-disabled-opacity: 0.4;
    --sx-button-spinner-size: 1.1em;
    --sx-button-spinner-duration: 800ms;
    --sx-button-icon-size: 1em;
    --sx-button-loading-text-margin-left: var(--sx-spacing-sm);
    --sx-button-adaptive-text-min-width: 1em;
    --sx-button-primary-background: var(--sx-color-brand-background-1);
    --sx-button-primary-background-hover: var(--sx-color-brand-background-hover);
    --sx-button-primary-background-pressed: var(--sx-color-brand-background-pressed);
    --sx-button-primary-background-disabled: var(--sx-color-brand-background-disabled);
    --sx-button-primary-border-color: transparent;
    --sx-button-primary-border-color-hover: transparent;
    --sx-button-primary-border-color-pressed: transparent;
    --sx-button-primary-border-color-disabled: transparent;
    --sx-button-primary-color: var(--sx-color-on-brand);
    --sx-button-primary-color-hover: var(--sx-color-on-brand);
    --sx-button-primary-color-pressed: var(--sx-color-on-brand);
    --sx-button-primary-color-disabled: var(--sx-color-on-brand);
    --sx-button-primary-font-weight: var(--sx-button-font-weight);
    --sx-button-secondary-background: var(--sx-color-neutral-background-3);
    --sx-button-secondary-background-hover: var(--sx-color-neutral-background-3-hover);
    --sx-button-secondary-background-pressed: var(--sx-color-neutral-background-3-pressed);
    --sx-button-secondary-background-disabled: var(--sx-color-neutral-background-disabled);
    --sx-button-secondary-border-color: transparent;
    --sx-button-secondary-border-color-hover: transparent;
    --sx-button-secondary-border-color-pressed: transparent;
    --sx-button-secondary-border-color-disabled: transparent;
    --sx-button-secondary-color: var(--sx-color-neutral-foreground-1);
    --sx-button-secondary-color-hover: var(--sx-color-neutral-foreground-1);
    --sx-button-secondary-color-pressed: var(--sx-color-neutral-foreground-1);
    --sx-button-secondary-color-disabled: var(--sx-color-neutral-foreground-disabled);
    --sx-button-secondary-font-weight: var(--sx-button-font-weight);
    --sx-button-tertiary-background: transparent;
    --sx-button-tertiary-background-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 6%, transparent);
    --sx-button-tertiary-background-pressed: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 10%, transparent);
    --sx-button-tertiary-background-disabled: transparent;
    --sx-button-tertiary-border-color: var(--sx-color-neutral-stroke-1);
    --sx-button-tertiary-border-color-hover: var(--sx-color-neutral-stroke-1-hover);
    --sx-button-tertiary-border-color-pressed: var(--sx-color-neutral-foreground-3);
    --sx-button-tertiary-border-color-disabled: var(--sx-color-neutral-stroke-disabled);
    --sx-button-tertiary-color: var(--sx-color-neutral-foreground-1);
    --sx-button-tertiary-color-hover: var(--sx-color-neutral-foreground-1);
    --sx-button-tertiary-color-pressed: var(--sx-color-neutral-foreground-1);
    --sx-button-tertiary-color-disabled: var(--sx-color-neutral-foreground-disabled);
    --sx-button-tertiary-font-weight: var(--sx-button-font-weight);
    --sx-button-quaternary-background: transparent;
    --sx-button-quaternary-background-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 4%, transparent);
    --sx-button-quaternary-background-pressed: color-mix(in srgb, var(--sx-color-brand-background-1) 14%, var(--sx-color-neutral-background-1));
    --sx-button-quaternary-background-disabled: transparent;
    --sx-button-quaternary-border-color: transparent;
    --sx-button-quaternary-border-color-hover: transparent;
    --sx-button-quaternary-border-color-pressed: transparent;
    --sx-button-quaternary-border-color-disabled: transparent;
    --sx-button-quaternary-color: var(--sx-color-neutral-foreground-1);
    --sx-button-quaternary-color-hover: var(--sx-color-neutral-foreground-1);
    --sx-button-quaternary-color-pressed: var(--sx-color-brand-foreground-1);
    --sx-button-quaternary-color-disabled: var(--sx-color-neutral-foreground-disabled);
    --sx-button-quaternary-font-weight: var(--sx-button-quiet-font-weight);

    --sx-toggle-button-transition: var(--sx-button-transition);
    --sx-toggle-button-active-scale: var(--sx-button-active-scale);
    --sx-toggle-button-focus-shadow: var(--sx-focus-ring-shadow);
    --sx-toggle-button-disabled-opacity: var(--sx-button-disabled-opacity);
    --sx-toggle-button-checked-background: var(--sx-menu-item-background-selected);
    --sx-toggle-button-checked-color: var(--sx-menu-item-foreground-selected);
    --sx-toggle-button-checked-border-color: var(--sx-menu-item-foreground-selected);

    --sx-select-bar-background: var(--sx-color-neutral-background-1);
    --sx-select-bar-border-color: var(--sx-color-neutral-stroke-2);
    --sx-select-bar-padding: var(--sx-spacing-xxs);
    --sx-select-bar-padding-xs: var(--sx-spacing-xxs);
    --sx-select-bar-padding-sm: var(--sx-spacing-xxs);
    --sx-select-bar-padding-lg: var(--sx-spacing-xs);
    --sx-select-bar-gap: var(--sx-spacing-xxs);
    --sx-select-bar-gap-xs: var(--sx-spacing-xxs);
    --sx-select-bar-gap-sm: var(--sx-spacing-xxs);
    --sx-select-bar-gap-lg: var(--sx-spacing-xs);
    --sx-select-bar-label-gap: var(--sx-spacing-xs);
    --sx-select-bar-transition: var(--sx-control-transition);
    --sx-select-bar-disabled-opacity: var(--sx-button-disabled-opacity);
    --sx-select-bar-selection-background: var(--sx-color-brand-background-1);
    --sx-select-bar-selection-foreground: var(--sx-color-on-brand);
    --sx-select-bar-selection-shadow: inset 0 0 0 var(--sx-border-width-thin) color-mix(in srgb, var(--sx-color-on-brand) 16%, transparent);
    --sx-select-bar-selection-duration: var(--sx-duration-fast);
    --sx-select-bar-selection-easing: var(--sx-easing-emphasized);

    --sx-split-button-arrow-padding-inline: var(--sx-spacing-sm);
    --sx-split-button-arrow-icon-size: var(--sx-switch-mark-size);
    --sx-split-button-arrow-icon-size-small: var(--sx-switch-on-off-label-size);
    --sx-split-button-arrow-icon-size-large: var(--sx-font-size-xs);
    --sx-split-button-divider-width: var(--sx-border-width-thin);
    --sx-split-button-divider-margin-block: calc(var(--sx-spacing-xs) + var(--sx-spacing-xxs));
    --sx-split-button-divider-neutral-color: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 30%, transparent);
    --sx-split-button-divider-subtle-color: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 25%, transparent);
    --sx-split-button-divider-accent-color: color-mix(in srgb, var(--sx-color-on-brand) 20%, transparent);

    --sx-tile-button-size-sm: var(--sx-control-height-lg);
    --sx-tile-button-size-md: 4rem;
    --sx-tile-button-size-lg: 5rem;
    --sx-tile-button-icon-font-size-sm: var(--sx-control-height-sm);
    --sx-tile-button-icon-font-size-md: var(--sx-icon-size-40);
    --sx-tile-button-icon-font-size-lg: var(--sx-control-height-lg);
    --sx-tile-button-width-sm: 5.5rem;
    --sx-tile-button-width-md: 7rem;
    --sx-tile-button-width-lg: 8.5rem;
    --sx-tile-button-gap: var(--sx-spacing-mini);
    --sx-tile-button-gap-small: var(--sx-spacing-tiny);
    --sx-tile-button-padding-block: var(--sx-spacing-sm);
    --sx-tile-button-padding-inline: var(--sx-spacing-mini);
    --sx-tile-button-padding-block-small: calc(var(--sx-spacing-mini) + var(--sx-spacing-tiny));
    --sx-tile-button-padding-inline-small: var(--sx-spacing-tiny);
    --sx-tile-button-radius: var(--sx-radius-md);
    --sx-tile-button-icon-radius-rounded: var(--sx-radius-lg);
    --sx-tile-button-transition: background var(--sx-duration-normal) var(--sx-easing-standard), transform var(--sx-duration-normal) var(--sx-easing-standard);
    --sx-tile-button-active-scale: var(--sx-button-active-scale);
    --sx-tile-button-focus-shadow: var(--sx-focus-ring-shadow);
    --sx-tile-button-disabled-opacity: var(--sx-button-disabled-opacity);
    --sx-tile-button-icon-hover-translate-y: calc(var(--sx-border-width-thin) * -1);
    --sx-tile-button-label-font-size: var(--sx-font-size-sm);
    --sx-tile-button-label-font-size-small: var(--sx-font-size-xs);
    --sx-tile-button-label-font-size-large: var(--sx-font-size-normal);
    --sx-tile-button-label-line-height: var(--sx-line-height-compact);
    --sx-tile-button-brand-background-mix: 16%;
    --sx-tile-button-brand-hover-background-mix: 24%;
    --sx-tile-button-status-background-mix: 24%;
    --sx-tile-button-status-hover-background-mix: 36%;
    --sx-tile-button-danger-background-mix: 30%;
    --sx-tile-button-danger-hover-background-mix: 42%;

    --sx-calendar-min-width: 17rem;
    --sx-calendar-disabled-opacity: var(--sx-number-step-disabled-opacity);
    --sx-calendar-title-transition: background-color var(--sx-duration-fast);
    --sx-calendar-cell-gap: var(--sx-spacing-xxs);
    --sx-calendar-day-cell-size: var(--sx-control-height-compact);
    --sx-calendar-period-cell-height: var(--sx-control-height-sm);
    --sx-calendar-year-scroll-max-height: var(--sx-popup-max-height);

    --sx-picker-min-width: 10rem;
    --sx-picker-disabled-opacity: var(--sx-number-step-disabled-opacity);
    --sx-picker-label-font-size: var(--sx-font-size-xs);
    --sx-picker-label-font-weight: var(--sx-font-weight-semibold);
    --sx-picker-label-color: var(--sx-color-neutral-foreground-3);
    --sx-picker-input-font-size: var(--sx-font-size-sm);
    --sx-picker-input-color: var(--sx-color-neutral-foreground-1);
    --sx-picker-input-width: 3.5rem;
    --sx-picker-input-width-12h: 5.5rem;
    --sx-picker-input-padding-inline: var(--sx-spacing-md);
    --sx-picker-input-gap: var(--sx-spacing-xs);
    --sx-picker-input-transition: border-color var(--sx-duration-normal);
    --sx-picker-focus-shadow: var(--sx-control-focus-shadow-strong);
    --sx-picker-icon-margin-right: var(--sx-spacing-sm);
    --sx-picker-chevron-font-size: var(--sx-font-size-xs);
    --sx-picker-chevron-transition: transform var(--sx-duration-normal);
    --sx-picker-popup-z-index: var(--sx-popup-overlay-z-index);
    --sx-picker-popup-animation-duration: var(--sx-duration-fast);
    --sx-picker-popup-offset: calc(var(--sx-spacing-xs) * -1);
    --sx-picker-range-gap: var(--sx-spacing-md);
    --sx-picker-range-separator-font-size: var(--sx-font-size-xs);

    --sx-time-wheel-height: 12.5rem;
    --sx-time-wheel-item-height: var(--sx-control-height-sm);
    --sx-time-wheel-padding-block: 5rem;
    --sx-time-wheel-column-min-width: 3rem;
    --sx-time-wheel-period-min-width: 2.5rem;
    --sx-time-wheel-item-transition: color var(--sx-duration-fast), background-color var(--sx-duration-fast);

    --sx-animate-timing-function: var(--sx-easing-standard);
    --sx-animate-zoom-enter-scale: 0.96;

    --sx-artboard-frame-min-size: 3.125rem;
    --sx-artboard-moving-z-index: 1000;
    --sx-artboard-drag-overlay-z-index: 99999;
    --sx-artboard-handle-z-index: 5;
    --sx-artboard-drag-overlay-background: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 12%, transparent);
    --sx-artboard-handle-offset: -0.375rem;
    --sx-artboard-handle-hit-size: 0.75rem;
    --sx-artboard-handle-safe-gutter: 1.5rem;
    --sx-artboard-corner-handle-size: 1rem;
    --sx-artboard-corner-handle-offset: -0.5rem;

    --sx-color-picker-disabled-opacity: 0.5;
    --sx-color-picker-group-padding-block: var(--sx-spacing-xs);
    --sx-color-picker-group-padding-inline: var(--sx-spacing-sm);
    --sx-color-picker-swatch-size: var(--sx-control-height-xs);
    --sx-color-picker-value-font-family: var(--sx-font-family-code);
    --sx-color-picker-drawer-width: 22rem;
    --sx-color-picker-drawer-swatch-size: var(--sx-control-height-compact);
    --sx-color-picker-drawer-preview-size: 2.5rem;
    --sx-color-picker-drawer-check-icon-size: var(--sx-font-size-xs);
    --sx-color-picker-drawer-swatch-hover-scale: 1.15;
    --sx-color-picker-drawer-swatch-transition: transform var(--sx-duration-fast) var(--sx-easing-standard), box-shadow var(--sx-duration-fast) var(--sx-easing-standard);
    --sx-color-picker-drawer-active-outline-offset: var(--sx-spacing-xxs);
    --sx-color-picker-drawer-hex-input-width: 7rem;
    --sx-color-picker-drawer-hex-input-height: var(--sx-control-height-compact);
    --sx-color-picker-drawer-input-transition: border-color var(--sx-duration-fast) var(--sx-easing-standard);
    --sx-color-picker-drawer-picker-z-index: 2;
    --sx-color-picker-drawer-icon-z-index: 1;

    --sx-component-detail-gap: 3rem;
    --sx-component-detail-padding-bottom: 5rem;
    --sx-component-detail-header-margin-bottom: calc(var(--sx-spacing-lg) * -1);
    --sx-component-detail-header-en-font-size: 0.6em;
    --sx-component-detail-header-en-opacity: 0.5;
    --sx-component-detail-header-en-margin-left: var(--sx-spacing-sm);
    --sx-component-detail-section-title-gap: var(--sx-spacing-xs);
    --sx-component-detail-section-border-width: var(--sx-border-width-thick);
    --sx-component-detail-preset-min-width: 15rem;
    --sx-component-detail-preset-preview-height: 8rem;
    --sx-component-detail-lab-min-height: 35rem;
    --sx-component-detail-preview-padding: 4rem;
    --sx-component-detail-preview-dot-size: var(--sx-border-width-thin);
    --sx-component-detail-preview-grid-size: 1.25rem;
    --sx-component-detail-inspector-width: 22rem;
    --sx-component-detail-docs-line-height: var(--sx-line-height-reading);

    --sx-error-boundary-z-index: 999999;
    --sx-error-boundary-mask-padding: var(--sx-spacing-lg);
    --sx-error-boundary-mask-animation: sx-fade-in var(--sx-duration-slow) ease-out;
    --sx-error-boundary-dialog-max-width: 28.75rem;
    --sx-error-boundary-dialog-animation: sx-slide-up var(--sx-duration-slow) var(--sx-easing-emphasized);
    --sx-error-boundary-header-padding-top: 2rem;
    --sx-error-boundary-header-padding-inline: var(--sx-spacing-xl);
    --sx-error-boundary-header-padding-bottom: var(--sx-spacing-lg);
    --sx-error-boundary-visual-margin-bottom: var(--sx-spacing-md);
    --sx-error-boundary-icon-size: 2.25rem;
    --sx-error-boundary-title-margin-bottom: var(--sx-spacing-sm);
    --sx-error-boundary-title-font-family: var(--sx-type-heading-font-family);
    --sx-error-boundary-title-font-size: var(--sx-font-size-title);
    --sx-error-boundary-title-font-weight: var(--sx-type-heading-font-weight);
    --sx-error-boundary-title-line-height: var(--sx-type-heading-line-height);
    --sx-error-boundary-title-color: var(--sx-type-heading-color);
    --sx-error-boundary-intro-font-family: var(--sx-type-caption-font-family);
    --sx-error-boundary-intro-font-size: var(--sx-type-caption-font-size);
    --sx-error-boundary-intro-font-weight: var(--sx-type-caption-font-weight);
    --sx-error-boundary-intro-line-height: var(--sx-line-height-compact);
    --sx-error-boundary-intro-color: var(--sx-type-caption-color);
    --sx-error-boundary-body-padding-inline: var(--sx-spacing-xl);
    --sx-error-boundary-body-padding-bottom: var(--sx-spacing-xl);
    --sx-error-boundary-message-inner-shadow: inset 0 var(--sx-border-width-thin) var(--sx-spacing-xs) rgba(0, 0, 0, 0.02);
    --sx-error-boundary-message-padding: var(--sx-spacing-lg);
    --sx-error-boundary-message-max-height: 8.75rem;
    --sx-error-boundary-message-font-family: var(--sx-type-code-font-family);
    --sx-error-boundary-message-font-size: var(--sx-type-code-font-size);
    --sx-error-boundary-message-line-height: var(--sx-type-code-line-height);
    --sx-error-boundary-message-color: var(--sx-color-status-danger);
    --sx-error-boundary-tag-font-size: 0.625rem;
    --sx-error-boundary-tag-font-weight: var(--sx-font-weight-semibold);
    --sx-error-boundary-tag-padding-block: 0.0625rem;
    --sx-error-boundary-tag-padding-inline: 0.375rem;
    --sx-error-boundary-tag-margin-right: var(--sx-spacing-sm);
    --sx-error-boundary-footer-padding-block: var(--sx-spacing-lg);
    --sx-error-boundary-footer-padding-inline: 1.25rem;
    --sx-error-boundary-action-gap: 0.625rem;
    --sx-error-boundary-button-padding-block: var(--sx-spacing-sm);
    --sx-error-boundary-button-padding-inline: 1.125rem;
    --sx-error-boundary-button-transition: var(--sx-control-transition);
    --sx-error-boundary-button-font-size: var(--sx-type-control-font-size);
    --sx-error-boundary-button-font-weight: var(--sx-type-control-font-weight);
    --sx-error-boundary-button-hover-translate-y: calc(var(--sx-border-width-thin) * -1);
    --sx-error-boundary-icon-button-padding: var(--sx-spacing-sm);
    --sx-error-boundary-icon-button-font-size: var(--sx-font-size-base);
    --sx-error-boundary-slide-distance: var(--sx-spacing-md);

    --sx-file-upload-gap: var(--sx-spacing-lg);
    --sx-file-upload-disabled-opacity: var(--sx-picker-disabled-opacity);
    --sx-file-upload-dropzone-padding: 3rem;
    --sx-file-upload-dropzone-transition: var(--sx-control-transition);
    --sx-file-upload-icon-margin-bottom: var(--sx-spacing-lg);
    --sx-file-upload-text-gap: var(--sx-spacing-xs);
    --sx-file-upload-list-gap: var(--sx-spacing-sm);
    --sx-file-upload-item-gap: var(--sx-spacing-md);
    --sx-file-upload-item-padding: var(--sx-spacing-md);
    --sx-file-upload-progress-height: var(--sx-spacing-xs);

    --sx-label-gap: var(--sx-spacing-xs);
    --sx-label-font-family: var(--sx-type-label-font-family);
    --sx-label-font-size: var(--sx-type-label-font-size);
    --sx-label-font-weight: var(--sx-type-label-font-weight);
    --sx-label-line-height: var(--sx-type-label-line-height);
    --sx-label-color: var(--sx-type-label-color);
    --sx-label-left-min-width: 6rem;
    --sx-label-icon-font-size: var(--sx-type-label-font-size);
    --sx-label-required-color: var(--sx-color-status-danger-background-1);
    --sx-label-required-margin-left: var(--sx-spacing-xxs);

    --sx-property-inspector-gap: var(--sx-spacing-lg);
    --sx-property-inspector-row-padding-start: var(--sx-spacing-md);
    --sx-property-inspector-row-padding-end: var(--sx-spacing-sm);
    --sx-property-inspector-column-gap: var(--sx-spacing-sm);
    --sx-property-inspector-group-shadow: var(--sx-shadow2);
    --sx-property-inspector-group-title-font-size: var(--sx-type-label-font-size);
    --sx-property-inspector-row-padding-block: var(--sx-spacing-xxs);
    --sx-property-inspector-row-min-height: 2.125rem;
    --sx-property-inspector-control-min-height: var(--sx-control-height-compact);
    --sx-property-inspector-hint-z-index: 4;
    --sx-property-inspector-hint-line-height: var(--sx-line-height-compact);
    --sx-property-inspector-splitter-z-index: 2;
    --sx-property-inspector-splitter-half-line-size: calc(var(--sx-border-width-thin) / 2);
    --sx-property-inspector-splitter-grip-width: 0.1875rem;
    --sx-property-inspector-splitter-grip-height: var(--sx-spacing-xl);
    --sx-property-inspector-splitter-grip-z-index: 10002;
    --sx-property-inspector-splitter-grip-transition: opacity var(--sx-duration-fast);

    --sx-rating-gap: var(--sx-spacing-xs);
    --sx-rating-star-font-size: var(--sx-font-size-lg);
    --sx-rating-star-color: var(--sx-color-neutral-stroke-1);
    --sx-rating-star-active-color: var(--sx-color-rating);
    --sx-rating-star-transition: transform var(--sx-duration-fast), color var(--sx-duration-normal);
    --sx-rating-star-hover-scale: 1.2;

    --sx-search-disabled-opacity: var(--sx-picker-disabled-opacity);
    --sx-search-icon-start-margin-left: var(--sx-spacing-sm);

    --sx-security-code-gap: var(--sx-spacing-sm);
    --sx-security-code-cell-width: var(--sx-control-height-lg);
    --sx-security-code-cell-height: var(--sx-control-height-xl);
    --sx-security-code-font-size: var(--sx-type-title-font-size);
    --sx-security-code-font-weight: var(--sx-font-weight-bold);
    --sx-security-code-transition: var(--sx-control-transition);
    --sx-security-code-focus-shadow: 0 0 0 var(--sx-border-width-thick) var(--sx-color-brand-background-2);

    --sx-settings-pane-gap: var(--sx-spacing-sm);
    --sx-settings-detail-pad-top: var(--sx-spacing-mini);
    --sx-settings-detail-pad-right: var(--sx-spacing-none);
    --sx-settings-detail-pad-bottom: var(--sx-spacing-mini);
    --sx-settings-detail-pad-left: var(--sx-spacing-none);
    --sx-settings-wide-breakpoint: 30rem;
    --sx-settings-sidebar-width: 18rem;
    --sx-settings-glass-background-mix: 72%;
    --sx-settings-glass-filter: blur(1.25rem) saturate(150%);
    --sx-settings-splitter-line-width: var(--sx-border-width-thin);
    --sx-settings-splitter-line-offset: calc(var(--sx-settings-splitter-line-width) / 2);
    --sx-settings-splitter-line-transition: opacity var(--sx-duration-normal) var(--sx-easing-standard), background var(--sx-duration-normal) var(--sx-easing-standard);
    --sx-settings-splitter-handle-width: var(--sx-spacing-xs);
    --sx-settings-splitter-handle-height: var(--sx-control-height-compact);
    --sx-settings-splitter-handle-radius: var(--sx-spacing-xxs);
    --sx-settings-splitter-handle-z-index: 1;
    --sx-settings-splitter-handle-transition: opacity var(--sx-duration-normal) var(--sx-easing-standard), box-shadow var(--sx-duration-normal) var(--sx-easing-standard);
    --sx-settings-splitter-glow: 0 0 var(--sx-spacing-sm) var(--sx-color-brand-background-1);
    --sx-settings-overview-min-column-width: 20rem;
    --sx-settings-drag-overlay-z-index: var(--sx-z-index-popup);
    --sx-settings-item-min-height: 2.5rem;
    --sx-settings-item-focus-outline: var(--sx-border-width-medium) solid var(--sx-color-brand-stroke-1);

    --sx-theme-editor-color-grid-columns: 6;
    --sx-theme-editor-color-grid-gap: var(--sx-spacing-sm);
    --sx-theme-editor-color-swatch-size: var(--sx-color-picker-swatch-size);
    --sx-theme-editor-color-swatch-transition: var(--sx-control-transition);
    --sx-theme-editor-color-outline-offset: var(--sx-spacing-xxs);

    --sx-userbar-height: var(--sx-control-height-xl);
    --sx-userbar-glass-background-mix: 80%;
    --sx-userbar-glass-filter: blur(0.75rem);
    --sx-userbar-z-index: var(--sx-navbar-z-index);
    --sx-userbar-trigger-padding-inline: var(--sx-spacing-xs);
    --sx-userbar-gap: var(--sx-spacing-md);
    --sx-userbar-info-gap: var(--sx-spacing-xxs);
    --sx-userbar-hover-transition: background-color var(--sx-duration-fast) var(--sx-easing-standard);
    --sx-userbar-chevron-transition: transform var(--sx-duration-normal) var(--sx-easing-standard);
    --sx-userbar-chevron-open-rotation: 180deg;
    --sx-userbar-icon-slot: var(--sx-nav-menu-icon-slot, var(--sx-control-height-compact));
    --sx-userbar-menu-divider-height: var(--sx-border-width-thin);
    --sx-userbar-name-font-family: var(--sx-type-menu-font-family);
    --sx-userbar-name-font-size: var(--sx-type-menu-font-size);
    --sx-userbar-name-font-weight: var(--sx-type-menu-font-weight);
    --sx-userbar-name-line-height: var(--sx-type-menu-line-height);
    --sx-userbar-name-color: var(--sx-type-menu-color);
    --sx-userbar-subtitle-font-family: var(--sx-type-caption-font-family);
    --sx-userbar-subtitle-font-size: var(--sx-type-caption-font-size);
    --sx-userbar-subtitle-font-weight: var(--sx-type-caption-font-weight);
    --sx-userbar-subtitle-line-height: var(--sx-type-caption-line-height);
    --sx-userbar-subtitle-color: var(--sx-type-caption-color);

    --sx-user-switcher-trigger-gap: var(--sx-spacing-sm);
    --sx-user-switcher-trigger-padding-block: var(--sx-spacing-xs);
    --sx-user-switcher-trigger-padding-inline: var(--sx-spacing-sm);
    --sx-user-switcher-name-max-width: 7.5rem;
    --sx-user-switcher-item-size: 5rem;
    --sx-user-switcher-avatar-transition: transform var(--sx-duration-fast) var(--sx-easing-standard);
    --sx-user-switcher-avatar-hover-scale: 1.06;
    --sx-user-switcher-avatar-active-scale: 1.02;
    --sx-user-switcher-current-shadow: 0 0 0 var(--sx-border-width-medium) var(--sx-color-brand-background-1);

    --sx-notification-indicator-badge-size: calc(var(--sx-control-height-sm) * 0.58);
    --sx-notification-indicator-inline-size: calc(var(--sx-control-height-md) + (var(--sx-notification-indicator-badge-size) * 0.9));
    --sx-notification-indicator-block-size: calc(var(--sx-control-height-md) + (var(--sx-notification-indicator-badge-size) * 0.45));
    --sx-notification-indicator-badge-z-index: var(--sx-tabs-item-z-index);
    --sx-notification-indicator-badge-max-width: calc(var(--sx-notification-indicator-badge-size) * 1.85);
    --sx-notification-indicator-badge-padding-inline: calc(var(--sx-spacing-sm) * 0.45);
    --sx-notification-indicator-badge-font-size: var(--sx-type-hint-font-size);
    --sx-notification-indicator-badge-font-weight: var(--sx-font-weight-semibold);
    --sx-notification-indicator-panel-offset: var(--sx-spacing-xs);
    --sx-notification-indicator-panel-z-index: var(--sx-z-index-popup);
    --sx-notification-indicator-panel-width: 24rem;
    --sx-notification-indicator-panel-max-height: 32rem;
    --sx-notification-indicator-unread-background-mix: 6%;
    --sx-notification-indicator-pulse-duration: 1.6s;
    --sx-notification-indicator-pulse-shadow-mix: 30%;
    --sx-notification-indicator-pulse-shadow-size: var(--sx-spacing-sm);
    --sx-notification-indicator-pulse-start-scale: 1;
    --sx-notification-indicator-pulse-end-scale: 1.25;
    --sx-notification-indicator-title-font-family: var(--sx-type-title-font-family);
    --sx-notification-indicator-title-font-size: var(--sx-font-size-base);
    --sx-notification-indicator-title-font-weight: var(--sx-font-weight-bold);
    --sx-notification-indicator-title-line-height: var(--sx-line-height-compact);
    --sx-notification-indicator-title-color: var(--sx-color-neutral-foreground-1);
    --sx-notification-indicator-count-font-size: var(--sx-font-size-xs);
    --sx-notification-indicator-count-font-weight: var(--sx-font-weight-semibold);
    --sx-notification-indicator-item-title-font-family: var(--sx-type-body-strong-font-family);
    --sx-notification-indicator-item-title-font-size: var(--sx-font-size-sm);
    --sx-notification-indicator-item-title-font-weight: var(--sx-font-weight-semibold);
    --sx-notification-indicator-item-title-line-height: var(--sx-line-height-compact);
    --sx-notification-indicator-item-title-color: var(--sx-color-neutral-foreground-1);
    --sx-notification-indicator-message-font-family: var(--sx-type-body-font-family);
    --sx-notification-indicator-message-font-size: var(--sx-font-size-sm);
    --sx-notification-indicator-message-font-weight: var(--sx-type-body-font-weight);
    --sx-notification-indicator-message-line-height: var(--sx-line-height-compact);
    --sx-notification-indicator-message-color: var(--sx-color-neutral-foreground-2);
    --sx-notification-indicator-meta-font-family: var(--sx-type-caption-font-family);
    --sx-notification-indicator-meta-font-size: var(--sx-font-size-xs);
    --sx-notification-indicator-meta-font-weight: var(--sx-type-caption-font-weight);
    --sx-notification-indicator-meta-line-height: var(--sx-line-height-compact);
    --sx-notification-indicator-meta-color: var(--sx-color-neutral-foreground-3);

    --sx-sync-dialog-result-min-height: 4.5rem;
    --sx-sync-dialog-result-message-min-width: 12rem;
    --sx-sync-dialog-footer-border-width: var(--sx-border-width-thin);
    --sx-sync-dialog-width: 26rem;
    --sx-sync-signin-dialog-width: 24rem;
    --sx-sync-indicator-button-height: var(--sx-navbar-icon-button-size, calc(var(--sx-control-height-md) - var(--sx-spacing-xs)));
    --sx-sync-indicator-spin-duration: var(--sx-duration-wave);
    --sx-sync-indicator-muted-opacity: var(--sx-control-disabled-opacity);
    --sx-sync-indicator-badge-offset: var(--sx-spacing-xxs);
    --sx-sync-indicator-badge-size: var(--sx-spacing-sm);
    --sx-sync-indicator-badge-radius: var(--sx-radius-pill);
    --sx-sync-entity-list-max-height: min(16rem, 42vh);
    --sx-sync-entity-list-page-max-height: min(18rem, 46vh);
    --sx-sync-entity-row-radius: var(--sx-radius-md);
    --sx-sync-entity-warning-background-mix: 38%;
    --sx-sync-entity-name-min-width: 10rem;
    --sx-sync-entity-badge-padding-block: var(--sx-border-width-thin);
    --sx-sync-entity-time-min-width: 2.5rem;
    --sx-sync-entity-status-min-width: var(--sx-control-height-xs);
    --sx-sync-entity-pending-size: 1.25rem;
    --sx-sync-entity-mobile-breakpoint: 40rem;
    --sx-sync-log-time-min-width: 3.5rem;
    --sx-sync-page-max-width: 72rem;
    --sx-sync-page-result-message-min-width: 16rem;
    --sx-sync-status-progress-width: min(100%, 15rem);
    --sx-sync-status-progress-indent: var(--sx-control-height-xs);
    --sx-sync-status-progress-transition: opacity var(--sx-duration-normal) var(--sx-easing-standard), transform var(--sx-duration-normal) var(--sx-easing-standard);
    --sx-sync-status-progress-opacity-hidden: 0;
    --sx-sync-status-progress-opacity-visible: 1;
    --sx-sync-status-progress-hidden-offset: calc(var(--sx-spacing-xxs) * -1);
    --sx-sync-status-spin-duration: var(--sx-duration-wave);
    --sx-sync-status-disabled-text-min-width: 14rem;
    --sx-sync-status-mobile-breakpoint: var(--sx-sync-entity-mobile-breakpoint);

    --sx-login-panel-card-background: var(--sx-color-neutral-background-2);
    --sx-login-panel-card-hover-background: var(--sx-color-neutral-background-2-hover);
    --sx-login-panel-card-border-color: var(--sx-color-neutral-stroke-2);
    --sx-login-panel-card-transition: background-color var(--sx-duration-fast) var(--sx-easing-standard), transform var(--sx-duration-fast) var(--sx-easing-standard);
    --sx-login-panel-card-hover-offset: calc(var(--sx-border-width-thin) * -1);

    --sx-identity-setup-min-height: 25rem;
    --sx-identity-setup-step-number-size: var(--sx-control-height-xs);
    --sx-identity-setup-completed-color: var(--sx-color-status-success-foreground-1);
    --sx-identity-setup-completed-background: var(--sx-color-status-success-background-1);

    --sx-app-shell-rail-pad-x: var(--sx-spacing-xs);
    --sx-app-shell-header-pad-x: var(--sx-spacing-sm);
    --sx-app-shell-header-gap-compact: calc(var(--sx-spacing-mini) + var(--sx-spacing-tiny));
    --sx-app-shell-nav-menu-icon-slot: var(--sx-control-height-md);
    --sx-app-shell-content-inset-none: 0px;
    --sx-app-shell-status-height-default: 0px;
    --sx-app-shell-sidebar-z-index: 100;
    --sx-app-shell-splitter-z-index: 101;
    --sx-app-shell-main-z-index: 200;
    --sx-app-shell-collapsed-sidebar-z-index: 201;
    --sx-app-shell-inset-sidebar-z-index: 201;
    --sx-app-shell-splitter-width: var(--sx-spacing-mini);
    --sx-app-shell-splitter-transition: background var(--sx-duration-normal);
    --sx-app-shell-splitter-offset: calc(var(--sx-spacing-tiny) * -1);
    --sx-app-shell-scrollbar-size: var(--sx-spacing-sm);
    --sx-app-shell-scrollbar-radius: var(--sx-spacing-xxs);
    --sx-app-shell-surface-overlay-background-mix: 18%;
    --sx-app-shell-surface-overlay-animation: sx-shell-surface-fade-in var(--sx-duration-fast) var(--sx-easing-standard);
    --sx-app-shell-surface-dialog-width: 42rem;
    --sx-app-shell-surface-dialog-min-height: min(18rem, 100%);
    --sx-app-shell-surface-dialog-animation: sx-shell-surface-rise-in var(--sx-duration-normal) var(--sx-easing-emphasized);
    --sx-app-shell-surface-title-font-family: var(--sx-type-body-strong-font-family);
    --sx-app-shell-surface-title-font-size: var(--sx-type-body-strong-font-size);
    --sx-app-shell-surface-title-font-weight: var(--sx-type-body-strong-font-weight);
    --sx-app-shell-surface-title-line-height: var(--sx-type-body-strong-line-height);
    --sx-app-shell-surface-title-color: var(--sx-type-body-strong-color);
    --sx-app-shell-status-z-index: 7;
    --sx-app-shell-status-surface-mix: 64%;
    --sx-app-shell-status-slot-surface-mix: 58%;
    --sx-app-shell-status-glass-filter: blur(18px) saturate(165%);
    --sx-app-shell-status-min-height: var(--sx-control-height-xl);
    --sx-app-shell-status-icon-size: var(--sx-spacing-xl);
    --sx-app-shell-status-icon-offset: var(--sx-spacing-xxs);
    --sx-app-shell-status-spin-duration: var(--sx-duration-wave);
    --sx-app-shell-status-title-font-size: var(--sx-type-caption-font-size);
    --sx-app-shell-status-title-letter-spacing: 0.03em;
    --sx-app-shell-status-message-line-height: var(--sx-line-height-compact);
    --sx-app-shell-status-detail-font-size: calc(var(--sx-type-caption-font-size) * 1.08);
    --sx-app-shell-status-detail-line-height: 1.3;
    --sx-app-shell-status-dismiss-radius: var(--sx-radius-pill);
    --sx-app-shell-status-dismiss-hover-mix: 12%;
    --sx-app-shell-bottom-bar-background-mix: 80%;
    --sx-app-shell-bottom-bar-filter: blur(0.75rem);
    --sx-app-shell-inset-gap: 0.75rem;
    --sx-app-shell-inset-gap-top: calc(var(--sx-spacing-xs) + var(--sx-spacing-xxs));
    --sx-app-shell-inset-radius: var(--sx-radius-xl);
    --sx-app-shell-inset-surface-shadow-active: 0 0.75rem 2rem color-mix(in srgb, var(--sx-color-neutral-foreground-1) 10%, transparent), 0 0.125rem 0.5rem color-mix(in srgb, var(--sx-color-neutral-foreground-1) 5%, transparent);
    --sx-app-shell-inset-surface-shadow-inactive: none;
    --sx-app-shell-inset-navbar-island-shadow-active: 0 0.75rem 1.75rem color-mix(in srgb, var(--sx-color-neutral-foreground-1) 8%, transparent), 0 0.125rem 0.5rem color-mix(in srgb, var(--sx-color-neutral-foreground-1) 4%, transparent);
    --sx-app-shell-inset-header-background-mix: 82%;
    --sx-app-shell-inset-header-filter: blur(18px) saturate(160%);
    --sx-app-shell-inset-splitter-line-width: var(--sx-border-width-thin);
    --sx-app-shell-inset-splitter-line-transition: opacity var(--sx-duration-normal) var(--sx-easing-standard), background var(--sx-duration-normal) var(--sx-easing-standard);
    --sx-app-shell-inset-splitter-handle-width: var(--sx-spacing-xs);
    --sx-app-shell-inset-splitter-handle-height: var(--sx-control-height-sm);
    --sx-app-shell-inset-splitter-handle-radius: var(--sx-spacing-xxs);
    --sx-app-shell-inset-splitter-handle-transition: opacity var(--sx-duration-normal) var(--sx-easing-standard), box-shadow var(--sx-duration-normal) var(--sx-easing-standard);
    --sx-app-shell-inset-splitter-glow: 0 0 var(--sx-spacing-sm) var(--sx-color-brand-background-1);
    --sx-app-shell-winmode-glass-filter: blur(18px) saturate(160%);
    --sx-app-shell-winmode-glass-soft-mix: 18%;
    --sx-app-shell-winmode-glass-control-mix: 48%;
    --sx-app-shell-winmode-glass-stroke-mix: 52%;
    --sx-app-shell-winmode-glass-edge-fade-block: var(--sx-spacing-md);
    --sx-app-shell-winmode-glass-edge-fade-inline: var(--sx-spacing-xs);
    --sx-app-shell-winmode-glass-z-index: 9;
    --sx-app-shell-winmode-filter-glow: var(--sx-spacing-none) var(--sx-spacing-none) var(--sx-spacing-md) color-mix(in srgb, var(--sx-color-brand-background-1) 14%, transparent);
    --sx-app-shell-winmode-sidebar-border-mix: 45%;
    --sx-app-shell-winmode-inner-edge-color: var(--sx-color-neutral-background-1);
    --sx-app-shell-winmode-inner-edge-mix: 55%;
    --sx-app-shell-winmode-card-shadow: var(--sx-shadow4);
    --sx-app-shell-winmode-filter-flyout-min-width: 12.5rem;

    --sx-app-menu-max-width: calc(100vw - (var(--sx-spacing-xl) * 2));
    --sx-app-menu-min-width: 15rem;
    --sx-app-menu-width: 20rem;
    --sx-app-menu-max-height: 85vh;
    --sx-app-menu-font-family: var(--sx-type-menu-font-family);
    --sx-app-menu-font-size: var(--sx-type-menu-font-size);
    --sx-app-menu-scrollbar-size: var(--sx-spacing-xs);
    --sx-app-menu-scrollbar-radius: var(--sx-spacing-xs);
    --sx-app-menu-transition: all var(--sx-duration-normal) var(--sx-easing-standard);
    --sx-app-menu-transition-fast: all var(--sx-duration-fast) var(--sx-easing-standard);
    --sx-app-menu-expand-transition: grid-template-rows var(--sx-duration-slow) var(--sx-easing-standard);
    --sx-app-menu-active-background-mix: 15%;
    --sx-app-menu-row-active-background-mix: 10%;
    --sx-app-menu-danger-hover-mix: 10%;
    --sx-app-menu-muted-opacity: 0.9;
    --sx-app-menu-toggle-opacity: 0.6;
    --sx-app-menu-arrow-opacity: 0.7;
    --sx-app-menu-grid-gap-compact: calc(var(--sx-spacing-s) / 2);
    --sx-app-menu-appearance-columns: 4;
    --sx-app-menu-style-columns: 4;
    --sx-app-menu-preset-columns: 5;
    --sx-app-menu-color-columns: 6;
    --sx-app-menu-color-button-size: var(--sx-control-height-xs);
    --sx-app-menu-text-icon-size: calc(var(--sx-control-height-xs) * 0.83);
    --sx-app-menu-current-color-dot-size: calc(var(--sx-control-height-xs) * 0.58);
    --sx-app-menu-current-color-name-max-width: 5rem;
    --sx-app-menu-compact-control-size: var(--sx-control-height-sm);
    --sx-app-menu-hex-input-width: 4.5rem;
    --sx-app-menu-hex-input-font-size: var(--sx-type-code-font-size);
    --sx-app-menu-row-indent: calc(var(--sx-spacing-l) * 2.75);
    --sx-app-menu-accordion-content-max-height: 40rem;
    --sx-app-menu-page-close-padding: var(--sx-spacing-xxs);
    --sx-app-menu-page-close-icon-size: 0.625rem;

    --sx-app-root-background-opacity: 0.48;
    --sx-app-root-background-native-opacity: 1;
    --sx-app-root-shell-main-background-mix: 82%;
    --sx-app-root-shell-sidebar-background-mix: 86%;
    --sx-app-root-shell-native-main-background-mix: 72%;
    --sx-app-root-shell-native-sidebar-background-mix: 76%;
    --sx-app-root-shell-direct-main-background-mix: 42%;
    --sx-app-root-shell-direct-sidebar-background-mix: 52%;
    --sx-app-root-shell-main-filter: blur(1rem) saturate(145%);
    --sx-app-root-shell-sidebar-filter: blur(1.25rem) saturate(155%);

    --sx-app-startup-z-index: var(--sx-z-index-overlay);
    --sx-app-startup-content-width: 20rem;
    --sx-app-startup-mark-size: calc(var(--sx-spacing-xl) * 4);
    --sx-app-startup-ring-duration: var(--sx-duration-wave);
    --sx-app-startup-initial-font-family: var(--sx-type-display-font-family);
    --sx-app-startup-initial-font-size: var(--sx-font-size-display-sm);
    --sx-app-startup-initial-font-weight: var(--sx-font-weight-bold);
    --sx-app-startup-initial-line-height: var(--sx-line-height-single);
    --sx-app-startup-title-font-family: var(--sx-type-title-font-family);
    --sx-app-startup-title-font-size: var(--sx-font-size-title);
    --sx-app-startup-title-font-weight: var(--sx-font-weight-semibold);
    --sx-app-startup-title-line-height: var(--sx-line-height-tight);
    --sx-app-startup-title-color: var(--sx-type-title-color);
    --sx-app-startup-status-font-family: var(--sx-type-caption-font-family);
    --sx-app-startup-status-font-size: var(--sx-font-size-sm);
    --sx-app-startup-status-font-weight: var(--sx-type-caption-font-weight);
    --sx-app-startup-status-line-height: var(--sx-line-height-compact);
    --sx-app-startup-status-color: var(--sx-color-neutral-foreground-2);

    --sx-about-page-padding-block: var(--sx-spacing-xl);
    --sx-about-page-padding-inline: var(--sx-spacing-l);
    --sx-about-content-max-width: 25rem;
    --sx-about-logo-size: 30vmin;
    --sx-about-logo-min-size: 5rem;
    --sx-about-logo-max-size: 20rem;
    --sx-about-logo-radius: var(--sx-radius-xl);
    --sx-about-logo-placeholder-font-size: 7rem;
    --sx-about-section-gap: var(--sx-spacing-layout-gap);
    --sx-about-placeholder-background: var(--sx-color-brand-background-1);
    --sx-about-placeholder-color: var(--sx-color-on-brand);

    --sx-admin-page-padding-block: var(--sx-spacing-md);
    --sx-admin-page-padding-inline: var(--sx-spacing-md);
    --sx-admin-detail-padding: var(--sx-spacing-m);
    --sx-admin-empty-padding: calc(var(--sx-spacing-xl) * 2);
    --sx-admin-empty-padding-compact: var(--sx-spacing-xl);
    --sx-admin-empty-icon-size: var(--sx-icon-size-64);
    --sx-admin-card-icon-size-sm: 2rem;
    --sx-admin-card-icon-size-md: 2.5rem;
    --sx-admin-card-icon-size-lg: 3rem;
    --sx-admin-card-icon-font-size-md: 1.125rem;
    --sx-admin-clickable-transition: background-color var(--sx-duration-fast) var(--sx-easing-standard);
    --sx-admin-card-transition: border-color var(--sx-duration-normal) var(--sx-easing-standard);
    --sx-admin-grid-min-height: 25rem;
    --sx-admin-grid-empty-min-height: 12.5rem;
    --sx-admin-grid-row-min-height: var(--sx-control-height-md);
    --sx-admin-user-roles-list-min-width: 12.5rem;
    --sx-admin-user-roles-items-max-height: 18.75rem;
    --sx-admin-user-roles-checkbox-offset: var(--sx-spacing-xxs);
    --sx-admin-data-user-filter-min-width: 6rem;
    --sx-admin-data-user-filter-fluid-width: 24vw;
    --sx-admin-data-user-filter-max-width: 18rem;
    --sx-admin-data-drawer-top: calc(var(--sx-spacing-s) + 3.5rem);
    --sx-admin-data-drawer-z-index: 6;
    --sx-admin-data-drawer-max-height: min(65%, 34rem);
    --sx-admin-data-drawer-background-mix: 92%;
    --sx-admin-data-filter-columns: 4;
    --sx-admin-data-summary-columns: 3;
    --sx-admin-data-history-columns: 2;
    --sx-admin-data-detail-columns: 2;
    --sx-admin-data-checkbox-min-height: var(--sx-control-height-md);
    --sx-admin-data-schema-block-max-height: 12rem;
    --sx-admin-data-grid-compact-font-size: var(--sx-font-size-xs);
    --sx-admin-data-grid-compact-line-height: 1.2;
    --sx-admin-data-user-avatar-size: 1.25rem;
    --sx-admin-data-json-max-height: 25rem;
    --sx-admin-data-drawer-mobile-top: calc(var(--sx-spacing-s) + 6.5rem);
    --sx-admin-detail-stats-min-column-width: 8rem;
    --sx-admin-detail-info-columns: 3;
    --sx-admin-detail-table-border-width: calc(var(--sx-border-width-thin) * 2);
    --sx-admin-server-status-min-width: 7.5rem;
    --sx-admin-server-info-min-width: calc(var(--sx-spacing-xl) * 8);
    --sx-admin-server-timestamps-min-width: calc(var(--sx-spacing-xl) * 6);
    --sx-admin-server-default-border-width: calc(var(--sx-border-width-thin) * 3);
    --sx-admin-user-data-grid-columns: 4;
    --sx-admin-mono-font-family: var(--sx-font-family-code);
    --sx-admin-mono-letter-spacing: 0.01em;

    /* AI Agent 运行视图（SxAgentRunView）：工具入参/结果等宽字体（语义角色经组件 token 间接引用） */
    --sx-agent-run-mono-font-family: var(--sx-font-family-code);

    --sx-browser-nav-gap: var(--sx-spacing-xs);
    --sx-file-browser-grid-min-item-width: 6rem;
    --sx-file-browser-separator-margin-inline: var(--sx-spacing-xs);
    --sx-file-browser-item-transition: background-color var(--sx-duration-normal) var(--sx-easing-standard);
    --sx-discovery-tile-gap-small: var(--sx-spacing-mini);

    --sx-global-page-active-z-index: 1;
    --sx-global-page-hidden-z-index: 0;
    --sx-global-page-overlay-z-index: 2;
    --sx-global-page-overlay-background-mix: 18%;
    --sx-global-page-overlay-animation: sx-global-page-surface-fade-in var(--sx-duration-fast) var(--sx-easing-standard);
    --sx-global-page-surface-width-default: 64rem;
    --sx-global-page-surface-height-default: min(44rem, 100%);
    --sx-global-page-surface-animation: sx-global-page-surface-rise var(--sx-duration-normal) var(--sx-easing-emphasized);
    --sx-global-page-surface-mobile-breakpoint: var(--sx-breakpoint-sm);

    --sx-input-font-family: var(--sx-type-input-font-family);
    --sx-input-font-size: var(--sx-type-input-font-size);
    --sx-input-font-weight: var(--sx-type-input-font-weight);
    --sx-input-line-height: var(--sx-type-input-line-height);
    --sx-input-color: var(--sx-type-input-color);
    --sx-input-label-font-family: var(--sx-type-label-font-family);
    --sx-input-label-font-size: var(--sx-type-label-font-size);
    --sx-input-label-font-weight: var(--sx-type-label-font-weight);
    --sx-input-label-line-height: var(--sx-type-label-line-height);
    --sx-input-label-color: var(--sx-type-label-color);
    --sx-input-transition: var(--sx-control-transition);
    --sx-input-label-margin-bottom: var(--sx-spacing-xxs);
    --sx-input-placeholder-opacity: 0.7;
    --sx-input-floating-padding-top: var(--sx-spacing-md);
    --sx-input-floating-top: 1.25rem;
    --sx-input-floating-active-top: var(--sx-spacing-none);
    --sx-input-floating-active-font-weight: var(--sx-font-weight-bold);
    --sx-input-floating-label-z-index: 1;
    --sx-input-disabled-opacity: var(--sx-control-disabled-opacity);
    --sx-input-icon-start-margin-left: var(--sx-spacing-md);
    --sx-input-icon-end-margin-left: var(--sx-spacing-xs);
    --sx-input-icon-end-margin-right: var(--sx-spacing-sm);
    --sx-input-clear-margin-left: var(--sx-spacing-xs);
    --sx-input-clear-margin-right: var(--sx-spacing-sm);
    --sx-input-large-font-size: var(--sx-font-size-base);

    --sx-number-label-margin-bottom: var(--sx-input-label-margin-bottom);
    --sx-number-step-min-width: var(--sx-control-height-md);
    --sx-number-step-padding: var(--sx-spacing-none);
    --sx-number-step-transition: background var(--sx-duration-fast), color var(--sx-duration-fast);
    --sx-number-step-disabled-opacity: 0.5;
    --sx-number-disabled-opacity: var(--sx-control-disabled-opacity);
    --sx-number-compact-font-size: var(--sx-font-size-xs);

    --sx-textarea-font-family: var(--sx-type-editor-font-family);
    --sx-textarea-font-size: var(--sx-type-editor-font-size);
    --sx-textarea-font-weight: var(--sx-type-editor-font-weight);
    --sx-textarea-line-height: var(--sx-type-editor-line-height);
    --sx-textarea-color: var(--sx-type-editor-color);

    --sx-list-item-font-family: var(--sx-type-list-font-family);
    --sx-list-item-font-size: var(--sx-type-list-font-size);
    --sx-list-item-font-weight: var(--sx-type-list-font-weight);
    --sx-list-item-line-height: var(--sx-type-list-line-height);
    /* Shared geometry for interactive list-like rows. Hierarchy may add an expander or
       indentation, but the leading icon, text rhythm and rounded hit surface stay shared. */
    --sx-list-item-min-height: var(--sx-control-height-md);
    --sx-list-item-padding-block: var(--sx-spacing-sm);
    --sx-list-item-padding-inline: var(--sx-spacing-md);
    --sx-list-item-leading-gap: var(--sx-spacing-sm);
    --sx-list-item-row-gap: var(--sx-spacing-xxs);
    --sx-list-item-radius: var(--sx-radius-md);
    --sx-list-item-icon-size: var(--sx-icon-size-md);
    --sx-list-item-icon-box-size: calc(var(--sx-list-item-icon-size) + var(--sx-spacing-xs));
    --sx-list-item-selection-shadow: inset 0 0 0 var(--sx-border-width-medium) var(--sx-color-brand-stroke-1);
    --sx-list-item-title-font-size: var(--sx-font-size-base);
    --sx-list-item-title-font-weight: var(--sx-font-weight-normal);
    --sx-list-item-subtitle-font-size: var(--sx-font-size-sm);
    --sx-list-item-metadata-font-size: var(--sx-font-size-xs);

    --sx-tab-font-family: var(--sx-type-tab-font-family);
    --sx-tab-font-size: var(--sx-type-tab-font-size);
    --sx-tab-font-weight: var(--sx-type-tab-font-weight);
    --sx-tab-line-height: var(--sx-type-tab-line-height);

    --sx-table-header-font-family: var(--sx-type-table-header-font-family);
    --sx-table-header-font-size: var(--sx-type-table-header-font-size);
    --sx-table-header-font-weight: var(--sx-type-table-header-font-weight);
    --sx-table-header-line-height: var(--sx-type-table-header-line-height);
    --sx-table-header-color: var(--sx-type-table-header-color);
    --sx-table-cell-font-family: var(--sx-type-table-cell-font-family);
    --sx-table-cell-font-size: var(--sx-type-table-cell-font-size);
    --sx-table-cell-font-weight: var(--sx-type-table-cell-font-weight);
    --sx-table-cell-line-height: var(--sx-type-table-cell-line-height);
    --sx-table-cell-color: var(--sx-type-table-cell-color);

    --sx-markdown-font-family: var(--sx-type-body-font-family);
    --sx-markdown-font-size: var(--sx-type-body-font-size);
    --sx-markdown-line-height: var(--sx-type-body-line-height);
    --sx-markdown-color: var(--sx-type-body-color);
    --sx-markdown-heading-font-family: var(--sx-type-heading-font-family);
    --sx-markdown-heading-font-weight: var(--sx-type-heading-font-weight);
    --sx-markdown-heading-line-height: var(--sx-type-heading-line-height);
    --sx-markdown-heading-color: var(--sx-type-heading-color);
    --sx-markdown-code-font-family: var(--sx-type-code-font-family);
    --sx-markdown-code-font-size: var(--sx-type-code-font-size);

    --sx-code-font-family: var(--sx-type-code-font-family);
    --sx-code-font-size: var(--sx-type-code-font-size);
    --sx-code-font-weight: var(--sx-type-code-font-weight);
    --sx-code-line-height: var(--sx-type-code-line-height);
    --sx-code-color: var(--sx-type-code-color);
    --sx-code-label-font-size: var(--sx-font-size-xxs);
    --sx-code-label-font-weight: var(--sx-font-weight-bold);

    /* 6.4 Shared component interaction recipes */
    --sx-focus-ring-inner-width: var(--sx-border-width-medium);
    --sx-focus-ring-outer-width: var(--sx-border-width-thick);
    --sx-focus-ring-inner-color: var(--sx-color-neutral-background-1);
    --sx-focus-ring-outer-color: var(--sx-color-brand-foreground-1);
    --sx-focus-ring-shadow: 0 0 0 var(--sx-focus-ring-inner-width) var(--sx-focus-ring-inner-color), 0 0 0 var(--sx-focus-ring-outer-width) var(--sx-focus-ring-outer-color);
    --sx-control-focus-shadow: 0 0 0 var(--sx-border-width-thin) var(--sx-color-brand-background-1);
    --sx-control-focus-shadow-strong: 0 0 0 var(--sx-border-width-medium) var(--sx-color-brand-background-2);
    --sx-control-transition: all var(--sx-duration-normal) var(--sx-easing-standard);
    --sx-control-active-scale: 0.97;
    --sx-control-disabled-opacity: var(--sx-surface-disabled-opacity);
    --sx-visually-hidden-size: 1px;
    --sx-visually-hidden-offset: -1px;
    --sx-visually-hidden-clip: inset(50%);

    --sx-popup-z-index: var(--sx-z-index-overlay);
    --sx-popup-overlay-z-index: 9999;
    --sx-popup-min-width: 8rem;
    --sx-popup-max-height: 15rem;

    --sx-option-font-family: var(--sx-type-option-font-family);
    --sx-option-font-size: var(--sx-type-option-font-size);
    --sx-option-font-weight: var(--sx-type-option-font-weight);
    --sx-option-line-height: var(--sx-type-option-line-height);
    --sx-option-color: var(--sx-type-option-color);
    --sx-option-gap: var(--sx-spacing-sm);
    --sx-option-description-gap: var(--sx-spacing-xxs);
    --sx-option-control-size: 1.25rem;
    --sx-option-indicator-size: 0.625rem;
    --sx-option-description-font-size: var(--sx-type-hint-font-size);
    --sx-option-description-line-height: var(--sx-type-hint-line-height);
    --sx-option-description-color: var(--sx-type-hint-color);
    --sx-option-group-gap: var(--sx-spacing-md);

    --sx-switch-track-width: 2.25rem;
    --sx-switch-track-height: 1.25rem;
    --sx-switch-thumb-size: 1rem;
    --sx-switch-thumb-offset: var(--sx-spacing-xxs);
    --sx-switch-thumb-translate: 1rem;
    --sx-switch-thumb-z-index: 1;
    --sx-switch-win11-track-width: 2.5rem;
    --sx-switch-win11-track-height: 1.125rem;
    --sx-switch-win11-thumb-size: 0.75rem;
    --sx-switch-win11-thumb-offset: calc(var(--sx-spacing-xxs) + var(--sx-border-width-thin));
    --sx-switch-win11-thumb-translate: 1.375rem;
    --sx-switch-mark-size: 0.625rem;
    --sx-switch-on-label-offset: 0.4375rem;
    --sx-switch-off-label-offset: 0.375rem;
    --sx-switch-off-mark-size: 0.375rem;
    --sx-switch-label-line-height: var(--sx-line-height-single);
    --sx-switch-padding-block: var(--sx-spacing-xs);
    --sx-switch-padding-inline: var(--sx-spacing-none);
    --sx-switch-success-background: var(--sx-color-status-success);
    --sx-switch-success-border: var(--sx-color-status-success-border);
    --sx-switch-transition: var(--sx-control-transition);
    --sx-switch-thumb-transition: transform var(--sx-duration-normal) var(--sx-easing-standard), background-color var(--sx-duration-normal);
    --sx-switch-auto-mark-font-weight: var(--sx-font-weight-semibold);
    --sx-switch-on-off-label-size: 0.5rem;
    --sx-switch-on-mark-height: var(--sx-switch-on-off-label-size);
    --sx-switch-tristate-background-mix: 72%;
    --sx-switch-tristate-border-mix: 78%;
    --sx-switch-disabled-opacity: var(--sx-button-disabled-opacity);

    --sx-slider-track-size: var(--sx-spacing-xs);
    --sx-slider-thumb-size: var(--sx-option-control-size);
    --sx-slider-thumb-hit-size: var(--sx-slider-thumb-size);
    --sx-slider-thumb-line-thickness: var(--sx-border-width-medium);
    --sx-slider-thumb-line-length: calc(var(--sx-slider-thumb-size) * 0.9);
    --sx-slider-thumb-hover-scale: 1.1;
    --sx-slider-thumb-active-scale: 0.95;
    --sx-slider-thumb-line-hover-scale: 1.35;
    --sx-slider-thumb-line-active-scale: 1.15;
    --sx-slider-thumb-triangle-size: calc(var(--sx-slider-thumb-size) * 0.5);
    --sx-slider-thumb-triangle-hit-size: calc(var(--sx-slider-thumb-size) + var(--sx-slider-track-size));
    --sx-slider-thumb-triangle-up-path: polygon(50% calc(50% + var(--sx-slider-track-size) / 2), calc(50% + var(--sx-slider-thumb-triangle-size) / 2) calc(50% + var(--sx-slider-track-size) / 2 + var(--sx-slider-thumb-triangle-size)), calc(50% - var(--sx-slider-thumb-triangle-size) / 2) calc(50% + var(--sx-slider-track-size) / 2 + var(--sx-slider-thumb-triangle-size)));
    --sx-slider-thumb-triangle-down-path: polygon(calc(50% - var(--sx-slider-thumb-triangle-size) / 2) calc(50% - var(--sx-slider-track-size) / 2 - var(--sx-slider-thumb-triangle-size)), calc(50% + var(--sx-slider-thumb-triangle-size) / 2) calc(50% - var(--sx-slider-track-size) / 2 - var(--sx-slider-thumb-triangle-size)), 50% calc(50% - var(--sx-slider-track-size) / 2));
    --sx-slider-vertical-width: 2.5rem;
    --sx-slider-vertical-height: 10rem;
    --sx-slider-disabled-opacity: var(--sx-number-step-disabled-opacity);
    --sx-slider-thumb-transition: transform var(--sx-duration-fast) ease;

    --sx-select-label-margin-bottom: var(--sx-input-label-margin-bottom);
    --sx-select-popup-max-height: var(--sx-popup-max-height);
    --sx-select-transition: var(--sx-control-transition);
    --sx-select-capsule-padding-block: calc(var(--sx-spacing-xs) / 2);
    --sx-select-capsule-padding-inline: var(--sx-spacing-sm);
    --sx-select-capsule-remove-opacity: 0.7;
    --sx-select-capsule-remove-hover-opacity: 1;
    --sx-select-action-gap-auto: var(--sx-spacing-none);
    --sx-select-arrow-font-size: var(--sx-list-item-icon-size);
    --sx-select-clear-font-size: var(--sx-list-item-icon-size);
    --sx-select-popup-animation-duration: var(--sx-duration-stagger);
    --sx-select-popup-enter-scale: var(--sx-popover-enter-scale);
    --sx-select-value-font-family: var(--sx-type-menu-font-family);
    --sx-select-value-font-size: var(--sx-type-menu-font-size);
    --sx-select-value-font-weight: var(--sx-type-menu-font-weight);
    --sx-select-value-line-height: var(--sx-type-menu-line-height);
    --sx-select-value-color: var(--sx-type-menu-color);
    --sx-select-item-active-shadow: none;
    --sx-select-item-icon-box-size: var(--sx-list-item-icon-box-size);

    --sx-combobox-label-margin-bottom: var(--sx-input-label-margin-bottom);
    --sx-combobox-popup-max-height: var(--sx-popup-max-height);
    --sx-combobox-action-font-size: var(--sx-list-item-icon-size);
    --sx-combobox-popup-animation-duration: var(--sx-duration-stagger);
    --sx-combobox-popup-enter-scale: var(--sx-popover-enter-scale);
    --sx-combobox-item-icon-box-size: var(--sx-list-item-icon-box-size);
    --sx-combobox-disabled-opacity: var(--sx-surface-disabled-opacity);
    --sx-autocomplete-popup-max-height: var(--sx-popup-max-height);

    /* 6.5 Navigation and data component recipes */
    --sx-accordion-padding: var(--sx-spacing-md);

    --sx-command-bar-gap: var(--sx-spacing-xs);
    --sx-command-bar-choice-gap: var(--sx-spacing-xs);
    --sx-command-bar-overflow-gap: var(--sx-spacing-xs);
    --sx-command-bar-overflow-inline-control-padding-block: var(--sx-spacing-xs);
    --sx-command-bar-overflow-inline-control-padding-inline-end: var(--sx-menu-section-content-indent);
    --sx-command-bar-background: var(--sx-color-neutral-background-1);
    --sx-command-bar-border-color: var(--sx-color-neutral-stroke-2);
    --sx-command-bar-border-width: var(--sx-border-width-thin);
    --sx-command-bar-padding-none: var(--sx-spacing-none);
    --sx-command-bar-padding-xsmall: var(--sx-spacing-xxs);
    --sx-command-bar-padding-small: var(--sx-spacing-xs);
    --sx-command-bar-padding-medium: var(--sx-spacing-sm);
    --sx-command-bar-padding-large: var(--sx-spacing-md);
    --sx-command-bar-padding-xlarge: var(--sx-spacing-lg);
    --sx-command-bar-group-gap: var(--sx-command-bar-padding, var(--sx-spacing-xs));
    --sx-command-bar-group-capsule-padding: var(--sx-command-bar-padding, var(--sx-spacing-xs));
    --sx-command-bar-group-capsule-radius: var(--sx-radius-md);
    --sx-command-bar-group-capsule-surface-active: color-mix(in srgb, var(--sx-color-neutral-background-1) 96%, var(--sx-color-neutral-background-3));
    --sx-command-bar-group-capsule-surface-inactive: color-mix(in srgb, var(--sx-color-neutral-background-2) 82%, transparent);
    --sx-command-bar-group-capsule-shadow-active-light: var(--sx-navbar-island-shadow-active-light);
    --sx-command-bar-group-capsule-shadow-active-dark: var(--sx-navbar-island-shadow-active-dark);
    --sx-command-bar-wrap-gap: var(--sx-spacing-sm);
    --sx-command-bar-wrap-min-item-width: 120px;
    --sx-command-bar-separator-gap: var(--sx-spacing-xxs);
    --sx-command-bar-separator-hit-size: var(--sx-spacing-md);
    --sx-command-bar-separator-line-size: var(--sx-border-width-thin);
    --sx-command-bar-separator-line-length: calc(var(--sx-control-height-sm) - var(--sx-spacing-sm));
    --sx-command-bar-separator-radius: var(--sx-radius-pill);
    --sx-command-bar-separator-color: var(--sx-color-neutral-stroke-2);
    --sx-command-bar-separator-active-color: var(--sx-color-brand-background-1);
    --sx-command-bar-separator-opacity: 0.86;
    --sx-command-bar-separator-active-scale: 1.55;
    --sx-command-bar-separator-active-shadow: 0 0 var(--sx-spacing-sm) color-mix(in srgb, var(--sx-color-brand-background-1) 60%, transparent);
    --sx-command-bar-separator-transition-duration: var(--sx-duration-fast);

    --sx-menu-min-width: 12rem;
    --sx-menu-z-index: 2001;
    --sx-menu-radius: var(--sx-radius-md);
    --sx-menu-content-inset: var(--sx-spacing-xs);
    --sx-menu-slide-distance: var(--sx-spacing-xs);
    --sx-menu-slide-scale: 0.95;
    --sx-menu-item-font-family: var(--sx-type-menu-font-family);
    --sx-menu-item-font-size: var(--sx-type-menu-font-size);
    --sx-menu-item-font-weight: var(--sx-type-menu-font-weight);
    --sx-menu-item-line-height: var(--sx-type-menu-line-height);
    --sx-menu-item-color: var(--sx-type-menu-color);
    --sx-menu-item-foreground: var(--sx-list-item-foreground);
    --sx-menu-item-foreground-hover: var(--sx-list-item-foreground);
    --sx-menu-item-foreground-selected: var(--sx-list-item-foreground-selected);
    --sx-menu-item-foreground-on-selected: var(--sx-list-item-foreground-on-selected);
    --sx-menu-item-background: var(--sx-list-item-background);
    --sx-menu-item-background-hover: var(--sx-list-item-background-hover);
    --sx-menu-item-background-selected: var(--sx-list-item-background-selected);
    --sx-menu-item-background-selected-hover: var(--sx-list-item-background-selected-hover);
    --sx-menu-item-icon-color: var(--sx-color-neutral-foreground-3);
    --sx-menu-item-shortcut-color: var(--sx-color-neutral-foreground-4);
    --sx-menu-item-min-height: var(--sx-list-item-min-height);
    --sx-menu-item-padding-block: var(--sx-list-item-padding-block);
    --sx-menu-item-padding-inline: var(--sx-list-item-padding-inline);
    --sx-menu-item-gap: var(--sx-list-item-leading-gap);
    --sx-menu-item-end-gap: var(--sx-spacing-sm);
    --sx-menu-item-radius: var(--sx-list-item-radius);
    --sx-menu-item-icon-box-size: var(--sx-list-item-icon-box-size);
    --sx-menu-item-shortcut-font-size: var(--sx-type-caption-font-size);
    --sx-menu-section-gap: var(--sx-list-item-row-gap);
    --sx-menu-section-chevron-size: var(--sx-icon-size-12);
    --sx-menu-section-chevron-color: var(--sx-menu-item-icon-color);
    --sx-menu-section-chevron-transition: transform var(--sx-duration-fast) var(--sx-easing-standard);
    --sx-menu-section-content-indent: calc(var(--sx-menu-item-padding-inline) + var(--sx-icon-size-md) + var(--sx-menu-item-gap));
    --sx-menu-section-content-indent-without-icon: var(--sx-menu-section-content-indent);
    --sx-menu-section-content-indent-with-icon: var(--sx-menu-section-content-indent);
    --sx-menu-section-separator-size: var(--sx-border-width-thin);
    --sx-menu-section-separator-color: var(--sx-color-neutral-stroke-1);

    --sx-nav-action-icon-size: var(--sx-control-height-compact);
    --sx-nav-menu-line-height-default: var(--sx-line-height-reading);
    --sx-nav-menu-line-height: var(--sx-nav-menu-line-height-default);
    --sx-nav-menu-toggle-radius: var(--sx-radius-pill);
    --sx-nav-menu-toolbar-z-index: 10;
    --sx-nav-menu-context-z-index: 2;
    --sx-nav-menu-line-z-index: 1;
    --sx-nav-menu-child-indicator-size: 0.5rem;
    --sx-nav-menu-line-center-offset: calc(var(--sx-border-width-thin) / -2);
    --sx-nav-menu-flyout-min-width: 11.25rem;
    --sx-nav-menu-flyout-max-width: 17.5rem;
    --sx-nav-menu-filter-flyout-min-width: 12.5rem;
    --sx-nav-menu-filter-flyout-max-width: 17.5rem;
    --sx-nav-menu-filter-input-min-width: 7.5rem;

    --sx-navbar-z-index: 100;
    --sx-navbar-min-height-sm: 2.5rem;
    --sx-navbar-min-height-md: 3.5rem;
    --sx-navbar-min-height-lg: 4.5rem;
    --sx-navbar-title-font-family: var(--sx-type-menu-font-family);
    --sx-navbar-title-font-size: var(--sx-type-menu-font-size);
    --sx-navbar-title-font-weight: var(--sx-type-title-font-weight);
    --sx-navbar-title-line-height: 1.1;
    --sx-navbar-title-color: var(--sx-type-title-color);
    --sx-navbar-subtitle-font-family: var(--sx-type-caption-font-family);
    --sx-navbar-subtitle-font-size: var(--sx-type-caption-font-size);
    --sx-navbar-subtitle-font-weight: var(--sx-type-caption-font-weight);
    --sx-navbar-subtitle-line-height: 1.05;
    --sx-navbar-subtitle-color: var(--sx-type-caption-color);
    --sx-navbar-icon-line-height: var(--sx-line-height-single);
    --sx-navbar-island-z-index: 1;
    --sx-navbar-island-radius: 624.9375rem;
    --sx-navbar-island-shadow-active-light: 0 10px 24px rgba(0, 0, 0, 0.045), 0 2px 7px rgba(0, 0, 0, 0.02);
    --sx-navbar-island-shadow-active-dark: 0 10px 28px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    --sx-navbar-transparent-hover-background: rgba(128, 128, 128, 0.15);
    --sx-navbar-back-region-max-width: min(16rem, 45vw);
    --sx-navbar-back-arrow-font-size: 0.625rem;
    --sx-navbar-back-label-font-size: var(--sx-type-caption-font-size);
    --sx-navbar-back-label-max-width: 6rem;

    --sx-tabs-track-height-default: 2.875rem;
    --sx-tabs-track-height: var(--sx-tabs-track-height-default);
    --sx-tabs-track-height-compact: 2.25rem;
    --sx-tabs-scrollbar-size: 0.375rem;
    --sx-tabs-pill-radius: 9999px;
    --sx-tabs-button-item-padding: 0.375rem 1rem;
    --sx-tabs-capsule-padding: var(--sx-spacing-tiny);
    --sx-tabs-capsule-padding-compact: 2px;
    --sx-tabs-capsule-item-padding: 0.4rem 1.5rem;
    --sx-tabs-button-item-padding-compact: 0.25rem 0.75rem;
    --sx-tabs-capsule-item-padding-compact: 0.25rem 1rem;
    --sx-tabs-label-vertical-line-height: 1.1;
    --sx-tabs-sidebar-min-width: 8rem;
    --sx-tabs-sidebar-wide-min-width: 10rem;
    --sx-tabs-indicator-z-index: 1;
    --sx-tabs-item-z-index: 1;
    --sx-tabs-indicator-background-z-index: 0;
    --sx-tabs-capsule-border-z-index: 10;
    --sx-tabs-active-item-z-index: 3;

    --sx-datagrid-row-height: 2rem;
    --sx-datagrid-row-height-smaller: 1.5rem;
    --sx-datagrid-row-height-small: 2rem;
    --sx-datagrid-row-height-medium: 2.75rem;
    --sx-datagrid-row-height-large: 3.625rem;
    --sx-datagrid-header-font-family: var(--sx-table-header-font-family);
    --sx-datagrid-header-font-size: var(--sx-table-header-font-size);
    --sx-datagrid-header-font-weight: var(--sx-table-header-font-weight);
    --sx-datagrid-header-line-height: var(--sx-table-header-line-height);
    --sx-datagrid-header-color: var(--sx-table-header-color);
    --sx-datagrid-cell-font-family: var(--sx-table-cell-font-family);
    --sx-datagrid-cell-font-size: var(--sx-table-cell-font-size);
    --sx-datagrid-cell-font-weight: var(--sx-table-cell-font-weight);
    --sx-datagrid-cell-line-height: var(--sx-table-cell-line-height);
    --sx-datagrid-cell-color: var(--sx-table-cell-color);
    --sx-datagrid-status-font-family: var(--sx-type-hint-font-family);
    --sx-datagrid-status-font-size: var(--sx-type-hint-font-size);
    --sx-datagrid-status-font-weight: var(--sx-type-hint-font-weight);
    --sx-datagrid-status-line-height: var(--sx-type-hint-line-height);
    --sx-datagrid-status-color: var(--sx-type-hint-color);
    --sx-datagrid-error-color: var(--sx-color-status-danger-foreground);
    --sx-datagrid-focus-shadow: inset 0 0 0 var(--sx-border-width-medium) var(--sx-color-brand-stroke-1);
    --sx-datagrid-pinned-column-shadow: -1px 0 0 var(--sx-color-neutral-stroke-2);
    --sx-datagrid-header-action-size: var(--sx-control-height-xs);
    --sx-datagrid-header-action-gap: var(--sx-spacing-xxs);
    --sx-datagrid-resize-handle-width: var(--sx-spacing-sm);
    --sx-datagrid-resize-line-width: 0.1875rem;
    --sx-datagrid-header-z-index: 1;
    --sx-datagrid-pinned-header-z-index: 4;
    --sx-datagrid-resize-z-index: 2;
    --sx-datagrid-header-content-pad-y: var(--sx-spacing-xxs);
    --sx-datagrid-header-content-pad-x: var(--sx-spacing-xs);
    --sx-datagrid-select-column-width: var(--sx-control-height-lg);
    --sx-datagrid-select-control-size: var(--sx-icon-size-md);
    --sx-datagrid-spinner-size: var(--sx-icon-size-md);
    --sx-datagrid-spinner-border-width: var(--sx-border-width-medium);
    --sx-datagrid-menu-min-width: 11.25rem;
    --sx-datagrid-menu-title-margin: var(--sx-spacing-sm);
    --sx-datagrid-menu-title-font-family: var(--sx-datagrid-header-font-family);
    --sx-datagrid-menu-title-font-size: var(--sx-datagrid-header-font-size);
    --sx-datagrid-menu-title-font-weight: var(--sx-datagrid-header-font-weight);
    --sx-datagrid-menu-title-line-height: var(--sx-datagrid-header-line-height);
    --sx-datagrid-menu-title-color: var(--sx-datagrid-header-color);
    --sx-datagrid-menu-label-font-family: var(--sx-type-label-font-family);
    --sx-datagrid-menu-label-font-size: var(--sx-font-size-xs);
    --sx-datagrid-menu-label-font-weight: var(--sx-type-label-font-weight);
    --sx-datagrid-menu-label-line-height: var(--sx-type-label-line-height);
    --sx-datagrid-menu-label-color: var(--sx-type-label-color);
    --sx-datagrid-menu-hint-font-family: var(--sx-type-hint-font-family);
    --sx-datagrid-menu-hint-font-size: 0.625rem;
    --sx-datagrid-menu-hint-font-weight: var(--sx-type-hint-font-weight);
    --sx-datagrid-menu-hint-line-height: var(--sx-type-hint-line-height);
    --sx-datagrid-menu-hint-color: var(--sx-type-hint-color);
    --sx-datagrid-menu-input-min-width: 6.25rem;
    --sx-datagrid-menu-input-number-width: 5rem;
    --sx-datagrid-menu-input-number-min-width: 3.75rem;
    --sx-datagrid-menu-input-font-family: var(--sx-type-input-font-family);
    --sx-datagrid-menu-input-font-size: var(--sx-font-size-xs);
    --sx-datagrid-menu-input-font-weight: var(--sx-type-input-font-weight);
    --sx-datagrid-menu-input-line-height: var(--sx-type-input-line-height);
    --sx-datagrid-menu-input-color: var(--sx-type-input-color);

    --sx-paginator-control-size: var(--sx-control-height-compact);
    --sx-paginator-ellipsis-min-width: var(--sx-control-height-xs);

    --sx-listbox-max-height: 12rem;
    --sx-listbox-icon-box-size: var(--sx-list-item-icon-box-size);
    --sx-list-item-icon-width: var(--sx-list-item-icon-size);

    --sx-infinite-list-item-height: 3rem;
    --sx-infinite-item-height: var(--sx-infinite-list-item-height);
    --sx-infinite-list-skeleton-height: var(--sx-font-size-base);

    --sx-tree-row-height-default: var(--sx-list-item-min-height);
    --sx-tree-row-height: var(--sx-tree-row-height-default);
    --sx-tree-chevron-size-default: var(--sx-list-item-icon-size);
    --sx-tree-chevron-size: var(--sx-tree-chevron-size-default);
    --sx-tree-indent-default: 1.25rem;
    --sx-tree-line-trim: var(--sx-spacing-xxs);
    --sx-tree-line-z-index: 1;
    --sx-tree-context-z-index: 2;
    --sx-tree-item-font-family: var(--sx-type-navigation-font-family);
    --sx-tree-item-font-size: var(--sx-type-navigation-font-size);
    --sx-tree-item-font-weight: var(--sx-type-navigation-font-weight);
    --sx-tree-item-line-height: var(--sx-type-navigation-line-height);
    --sx-tree-item-color: var(--sx-type-navigation-color);
    --sx-tree-item-selected-font-weight: var(--sx-font-weight-semibold);
    --sx-tree-item-selected-color: var(--sx-list-item-foreground-selected);

    /* 6.6 Content, feedback, media, and surface component recipes */
    --sx-duration-fast: 150ms;
    --sx-duration-normal: 200ms;
    --sx-duration-slow: 300ms;
    --sx-duration-stagger: 120ms;
    --sx-duration-wave: 960ms;
    --sx-duration-enter: var(--sx-duration-normal);
    --sx-duration-exit: var(--sx-duration-normal);
    --sx-duration-toast: var(--sx-duration-slow);
    --sx-duration-delay: 500ms;
    --sx-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --sx-easing-emphasized: cubic-bezier(0.23, 1, 0.32, 1);
    --sx-easing-return: cubic-bezier(0.2, 0.8, 0.2, 1);

    --sx-surface-transition: all var(--sx-duration-normal) ease;
    --sx-surface-hover-lift: calc(var(--sx-spacing-xxs) * -1);
    --sx-surface-glass-edge-color: color-mix(in srgb, var(--sx-color-neutral-background-1) 70%, #ffffff);
    --sx-surface-glass-edge-shadow: inset 0 0 0 var(--sx-border-width-thin) var(--sx-surface-glass-edge-color);
    --sx-surface-outline-mix: 45%;
    --sx-surface-outline-color: color-mix(in srgb, var(--sx-color-neutral-stroke-2) var(--sx-surface-outline-mix), transparent);
    --sx-surface-overlay-glow: 0 0 3.25rem 0.45rem color-mix(in srgb, var(--sx-color-neutral-background-1) 32%, transparent);
    --sx-surface-disabled-opacity: 0.6;

    --sx-card-border-color: var(--sx-surface-outline-color);
    --sx-card-shadow: var(--sx-surface-glass-edge-shadow), var(--sx-shadow-sm);
    --sx-card-shadow-hover: var(--sx-shadow-lg);
    --sx-card-footer-font-size: var(--sx-type-caption-font-size);

    --sx-badge-size: 1.25rem;
    --sx-badge-dot-size: var(--sx-spacing-sm);
    --sx-badge-radius: var(--sx-radius-pill);
    --sx-badge-dot-radius: var(--sx-radius-pill);

    /* Interactive list / menu / option / nav / tree / index row — the canonical default / hover / selected
       recipe. Every clickable row in a BROWSABLE COLLECTION (capability index, nav menu, listbox, menu item,
       tree, data-grid row, autocomplete option) binds to THESE so its states stay consistent instead of each
       component re-deriving them from raw neutral/brand tokens (which drifts).

       SELECTION SEMANTICS — this is WEAK / SUBTLE selection, the correct model for "one row highlighted inside
       a longer scrollable list": a light brand TINT background + dark brand text. It marks the current row
       without turning the list into a wall of saturated blocks (content stays the focus), and is brand-tinted
       so "selected" reads differently from the neutral "hover". This is a SEMANTIC choice tied to the component
       category, NOT a per-instance style preference.
         · Weak (here): list / menu / nav / tree / table / index rows — a row within a browsable collection.
         · STRONG / filled selection (a saturated brand fill + on-brand contrast text) is a DIFFERENT category —
           the current value of a compact always-visible control (tab, select bar, single-select chip).
           Those own their selected styling; do NOT route them through these list-item tokens.
       (History: this was briefly a saturated wash with brand-on-brand text at ~1:1 contrast — unreadable; then
       a readable-but-heavy saturated wash; now the semantically-correct subtle tint.) */
    --sx-list-item-foreground: var(--sx-color-neutral-foreground-1);
    --sx-list-item-background: transparent;
    --sx-list-item-background-hover: var(--sx-color-neutral-background-2-hover);
    /* Dark brand text (brand foreground nudged toward the neutral foreground) so it stays legible on the pale
       tint — plain brand-foreground-1 on a tint is ~3.9:1; this lands ~5.5:1. */
    --sx-list-item-foreground-selected: color-mix(in srgb, var(--sx-color-brand-foreground-1), var(--sx-color-neutral-foreground-1) 28%);
    /* Subtle brand tint = a small amount of the brand color mixed into the surface; adapts to any brand hue and
       to light/dark mode automatically (unlike a fixed primary-100), and matches the collapsed nav's tinted active. */
    --sx-list-item-background-selected: color-mix(in srgb, var(--sx-color-brand-background-2) 14%, var(--sx-color-neutral-background-1));
    --sx-list-item-background-selected-hover: color-mix(in srgb, var(--sx-color-brand-background-2) 22%, var(--sx-color-neutral-background-1));
    --sx-list-item-foreground-on-selected: var(--sx-list-item-foreground-selected);
    /* Embedded count badge (the "circle with a number" on the trailing edge of a row): a neutral pill by
       default; on a selected (tinted) row it becomes a white pill with the dark-brand number so it stays
       legible and reads as a distinct pill against the tint. */
    --sx-list-item-count-foreground: var(--sx-color-neutral-foreground-3);
    --sx-list-item-count-background: var(--sx-color-neutral-background-3);
    --sx-list-item-count-foreground-on-selected: var(--sx-list-item-foreground-selected);
    --sx-list-item-count-background-on-selected: var(--sx-color-neutral-background-1);

    --sx-tag-radius: var(--sx-radius-sm);
    --sx-tag-pill-radius: var(--sx-radius-pill);
    --sx-tag-icon-size: var(--sx-icon-size-xs);
    --sx-tag-hole-padding-left: 0.625rem;
    --sx-tag-hole-radius: 0.15625rem;
    --sx-tag-hole-x: 0.35rem;

    --sx-avatar-radius: var(--sx-radius-pill);
    --sx-avatar-size-xs: var(--sx-badge-size);
    --sx-avatar-size-sm: var(--sx-control-height-xs);
    --sx-avatar-size-md: var(--sx-control-height-md);
    --sx-avatar-size-lg: var(--sx-control-height-lg);
    --sx-avatar-size-xl: 4rem;
    --sx-avatar-font-size-xs: var(--sx-font-size-xxs);
    --sx-avatar-font-size-sm: var(--sx-font-size-xs);
    --sx-avatar-font-size-md: var(--sx-font-size-sm);
    --sx-avatar-font-size-lg: var(--sx-font-size-title);
    --sx-avatar-font-size-xl: var(--sx-font-size-xl);
    --sx-avatar-status-size-xs: var(--sx-spacing-sm);
    --sx-avatar-status-size-sm: 0.5625rem;
    --sx-avatar-status-size-md: 0.625rem;
    --sx-avatar-status-size-lg: var(--sx-font-size-sm);
    --sx-avatar-status-size-xl: var(--sx-font-size-base);
    --sx-avatar-status-border-width-compact: var(--sx-border-width-thin);
    --sx-avatar-status-icon-size: 0.45rem;
    --sx-avatar-status-icon-size-lg: 0.5625rem;
    --sx-avatar-status-icon-size-xl: 0.625rem;
    --sx-avatar-badge-z-index: 1;
    --sx-avatar-badge-radius: var(--sx-radius-pill);
    --sx-avatar-badge-border-width: 0.09375rem;
    --sx-avatar-badge-padding-inline: 0.1875rem;
    --sx-avatar-badge-size-md: var(--sx-font-size-sm);
    --sx-avatar-badge-size-lg: var(--sx-font-size-base);
    --sx-avatar-badge-size-xl: 1.125rem;
    --sx-avatar-badge-font-size-md: var(--sx-spacing-sm);
    --sx-avatar-badge-font-size-lg: 0.5625rem;
    --sx-avatar-badge-font-size-xl: var(--sx-font-size-xxs);
    --sx-presence-ooo-inner-scale: 60%;

    --sx-avatar-editor-max-width: 25rem;
    --sx-avatar-editor-canvas-height: 20rem;
    --sx-avatar-editor-crop-size: 12rem;
    --sx-avatar-editor-crop-shadow: 0 0 0 62.5rem var(--sx-overlay-scrim);
    --sx-avatar-editor-crop-border: var(--sx-border-width-medium) solid color-mix(in srgb, var(--sx-color-neutral-background-1) 60%, transparent);
    --sx-avatar-editor-crop-z-index: 2;
    --sx-avatar-editor-loading-z-index: 3;
    --sx-avatar-editor-loading-opacity: 0.5;
    --sx-avatar-editor-zoom-min-width: 10rem;
    --sx-avatar-editor-slider-track-size: var(--sx-spacing-xs);
    --sx-avatar-editor-slider-thumb-size: var(--sx-icon-size-md);
    --sx-avatar-editor-gallery-item-size: 3.5rem;
    --sx-avatar-editor-gallery-ring-shadow: 0 0 0 var(--sx-border-width-medium) var(--sx-color-brand-background-hover);

    --sx-code-header-height: var(--sx-control-height-md);
    --sx-code-min-height-default: auto;
    --sx-code-max-height-default: none;
    --sx-code-overflow-default: auto;
    --sx-html-editor-min-height: 8rem;
    --sx-markdown-editor-min-height: 18rem;
    --sx-terminal-min-height: 20rem;
    --sx-terminal-screen-min-height: 14rem;
    --sx-ai-markdown-input-toolbar-gap: calc(var(--sx-spacing-xs) + var(--sx-spacing-xxs));
    --sx-ai-markdown-input-status-min-width: 2rem;
    --sx-ai-markdown-input-dictation-height: calc(var(--sx-control-height-sm) - var(--sx-spacing-sm));
    --sx-ai-markdown-input-dictation-bar-width: var(--sx-border-width-medium);
    --sx-ai-markdown-input-dictation-bar-min-height: var(--sx-border-width-thick);
    --sx-ai-markdown-input-dictation-level-default: 45%;
    --sx-ai-markdown-input-dictation-level-1: 35%;
    --sx-ai-markdown-input-dictation-level-2: 72%;
    --sx-ai-markdown-input-dictation-level-3: 48%;
    --sx-ai-markdown-input-dictation-level-4: 86%;
    --sx-ai-markdown-input-dictation-level-5: 42%;
    --sx-ai-markdown-input-dictation-opacity: 0.58;
    --sx-ai-markdown-input-dictation-active-opacity: 0.86;
    --sx-ai-markdown-input-preview-min-height: 9rem;
    --sx-markdown-table-margin-bottom: var(--sx-spacing-lg);
    --sx-markdown-heading-h1-font-size: var(--sx-type-title-font-size);
    --sx-markdown-heading-h2-font-size: var(--sx-font-size-title);
    --sx-markdown-heading-h3-font-size: var(--sx-font-size-base);
    --sx-markdown-heading-h4-font-size: var(--sx-font-size-base);
    --sx-markdown-inline-code-color: var(--sx-color-status-danger-foreground);
    --sx-highlighter-padding-inline: var(--sx-spacing-xxs);

    --sx-json-radius: var(--sx-radius-md);
    --sx-json-padding: var(--sx-spacing-md);
    --sx-json-gap: var(--sx-spacing-xxs);
    --sx-json-row-height: 1.6rem;
    --sx-json-editor-row-height: 2.2rem;
    --sx-json-row-radius: var(--sx-radius-sm);
    --sx-json-row-padding-inline-end: var(--sx-spacing-xs);
    --sx-json-row-clicked-background: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 4%, transparent);
    --sx-json-toggle-size: var(--sx-badge-size);
    --sx-json-toggle-radius: var(--sx-radius-pill);
    --sx-json-key-quotes-opacity: 0.75;
    --sx-json-boolean-scale: 0.85;
    --sx-json-indent-default: var(--sx-spacing-xl);
    --sx-json-guide-margin-left: 0.6rem;
    --sx-json-badge-letter-spacing: 0.05em;
    --sx-json-badge-shadow: inset 0 0 0 var(--sx-border-width-thin) color-mix(in srgb, var(--sx-color-neutral-foreground-1) 6%, transparent);
    --sx-json-copy-action-offset: calc(var(--sx-spacing-xs) * -1);
    --sx-json-copy-delay: var(--sx-duration-delay);
    --sx-json-value-max-width: min(25rem, 50vw);
    --sx-json-input-key-min-width: 5rem;
    --sx-json-input-key-max-width: 18.75rem;
    --sx-json-input-value-min-width: 3.75rem;
    --sx-json-input-value-max-width: 31.25rem;
    --sx-json-input-string-min-width: 7.5rem;
    --sx-json-action-button-size: var(--sx-control-height-xs);
    --sx-json-type-select-width: 5.625rem;
    --sx-json-row-error-z-index: 10;
    --sx-json-datepicker-width: 12.5rem;
    --sx-json-datepicker-height: 1.8rem;
    --sx-json-truncated-max-width: 18.75rem;
    --sx-json-truncated-opacity: 0.9;

    --sx-dialog-z-index: var(--sx-z-index-modal);
    --sx-dialog-backdrop-inset: -100vmax;
    --sx-dialog-backdrop-z-index: 0;
    --sx-dialog-edge-gradient:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--sx-overlay-backdrop) 34%, transparent) 0%,
            transparent 18%,
            transparent 78%,
            color-mix(in srgb, var(--sx-overlay-backdrop) 38%, transparent) 100%
        ),
        linear-gradient(
            to right,
            color-mix(in srgb, var(--sx-overlay-backdrop) 29%, transparent) 0%,
            transparent 16%,
            transparent 84%,
            color-mix(in srgb, var(--sx-overlay-backdrop) 29%, transparent) 100%
        );
    --sx-dialog-glass-filter: blur(12px) saturate(140%);
    --sx-dialog-surface-z-index: 1;
    --sx-dialog-handle-z-index: 2;
    --sx-dialog-x-default: 0px;
    --sx-dialog-y-default: 0px;
    --sx-dialog-enter-scale: 0.9;
    --sx-dialog-open-scale: 1;
    --sx-dialog-return-duration: 180ms;
    --sx-dialog-min-width: 20rem;
    --sx-dialog-min-height: 10rem;
    --sx-dialog-body-padding: var(--sx-spacing-xl);
    --sx-dialog-footer-padding-block: 1.25rem;
    --sx-dialog-footer-gap: var(--sx-spacing-md);
    --sx-dialog-width-small: 20rem;
    --sx-dialog-width-medium: 35rem;
    --sx-dialog-width-large: 55rem;

    --sx-drawer-z-index: 3000;
    --sx-drawer-overlay-filter: blur(2px);
    --sx-drawer-duration: var(--sx-duration-slow);
    --sx-drawer-width: 25rem;
    --sx-drawer-height: 20rem;
    --sx-drawer-shadow-right: -8px 0 24px -4px rgba(0, 0, 0, 0.1);
    --sx-drawer-shadow-left: 8px 0 24px -4px rgba(0, 0, 0, 0.1);
    --sx-drawer-shadow-top: 0 8px 24px -4px rgba(0, 0, 0, 0.1);
    --sx-drawer-shadow-bottom: 0 -8px 24px -4px rgba(0, 0, 0, 0.1);
    --sx-drawer-header-height: var(--sx-control-height-xl);
    --sx-drawer-mobile-width: 85%;

    --sx-popover-z-index: var(--sx-z-index-popup);
    --sx-popover-min-width: 10rem;
    --sx-popover-max-width: min(24rem, calc(100vw - var(--sx-spacing-lg)));
    --sx-popover-duration: 120ms;
    --sx-popover-arrow-size: var(--sx-spacing-sm);
    --sx-popover-arrow-offset: -0.3125rem;
    --sx-popover-arrow-shift: calc(var(--sx-popover-arrow-size) / -2);
    --sx-popover-slide-distance: var(--sx-spacing-xs);
    --sx-popover-enter-scale: 0.96;

    --sx-tooltip-z-index: var(--sx-z-index-overlay);
    --sx-tooltip-font-size: var(--sx-type-caption-font-size);
    --sx-tooltip-line-height: var(--sx-line-height-compact);
    --sx-tooltip-duration: var(--sx-duration-fast);
    --sx-tooltip-arrow-size: var(--sx-spacing-sm);
    --sx-tooltip-arrow-shift: calc(var(--sx-tooltip-arrow-size) / -2);
    --sx-tooltip-offscreen-position: -9999px;

    --sx-toast-z-index: var(--sx-z-index-overlay);
    --sx-toast-min-width: 18rem;
    --sx-toast-max-width: 24rem;
    --sx-toast-slide-distance: var(--sx-spacing-lg);
    --sx-toast-icon-size: var(--sx-icon-size-lg);
    --sx-toast-title-font-size: var(--sx-type-body-font-size);
    --sx-toast-title-font-weight: var(--sx-font-weight-semibold);
    --sx-toast-title-margin-bottom: var(--sx-spacing-xxs);
    --sx-toast-message-font-size: var(--sx-type-caption-font-size);
    --sx-toast-close-padding: var(--sx-spacing-xs);
    --sx-toast-close-offset: calc(var(--sx-toast-close-padding) * -1);
    --sx-toast-accent-border-width: 0.1875rem;

    --sx-teaching-bubble-min-width: 16rem;
    --sx-teaching-bubble-headline-font-size: var(--sx-type-heading-font-size);
    --sx-teaching-bubble-headline-font-weight: var(--sx-type-heading-font-weight);
    --sx-teaching-bubble-body-font-size: var(--sx-type-body-font-size);

    --sx-message-bar-font-family: var(--sx-type-body-font-family);
    --sx-message-bar-font-size: var(--sx-type-body-font-size);
    --sx-message-bar-font-weight: var(--sx-type-body-font-weight);
    --sx-message-bar-line-height: 1.375rem;
    --sx-message-bar-color: var(--sx-type-body-color);
    --sx-message-bar-title-font-family: var(--sx-group-title-font-family, var(--sx-type-label-font-family));
    --sx-message-bar-title-font-size: var(--sx-group-title-font-size);
    --sx-message-bar-title-font-weight: var(--sx-group-title-font-weight);
    --sx-message-bar-title-line-height: var(--sx-group-title-line-height);
    --sx-message-bar-title-color: var(--sx-group-title-color);
    --sx-message-bar-body-font-family: var(--sx-type-caption-font-family);
    --sx-message-bar-body-font-size: var(--sx-type-caption-font-size);
    --sx-message-bar-body-font-weight: var(--sx-type-caption-font-weight);
    --sx-message-bar-body-line-height: var(--sx-message-bar-line-height);
    --sx-message-bar-body-color: var(--sx-type-caption-color);

    --sx-progress-track-height: var(--sx-spacing-sm);
    --sx-progress-track-height-small: var(--sx-spacing-xs);
    --sx-progress-track-height-large: var(--sx-spacing-md);
    --sx-progress-radius: var(--sx-radius-pill);
    --sx-progress-indeterminate-width: 40%;
    --sx-progress-indeterminate-duration: 1.5s;
    --sx-progress-value-min-width: 2.5rem;
    --sx-progress-ring-size: 2.5rem;
    --sx-progress-ring-spin-duration: 1.2s;

    --sx-qrcode-size-default: 128px;
    --sx-image-placeholder-icon-size: var(--sx-icon-size-lg);
    --sx-image-placeholder-text-size: var(--sx-type-caption-font-size);
    --sx-icon-gallery-search-z-index: 10;
    --sx-icon-gallery-item-min-width: 8rem;
    --sx-friendly-time-radius: var(--sx-radius-sm);
    --sx-friendly-time-hover-background: var(--sx-color-neutral-background-1-hover);
    --sx-friendly-time-hover-color: var(--sx-color-brand-foreground-1);
    --sx-friendly-time-inline-padding: 6px;
    --sx-friendly-time-active-scale: 0.95;
    --sx-friendly-time-pressed-background: var(--sx-color-neutral-background-1-pressed);
    --sx-fab-gap: var(--sx-spacing-md);
    --sx-fab-z-index: var(--sx-z-index-popup);
    --sx-fab-offset: 2rem;
    --sx-fab-closed-scale: 0;
    --sx-fab-open-scale: 1;
    --sx-fab-active-scale: 0.9;
    --sx-skeleton-height-default: var(--sx-font-size-base);
    --sx-skeleton-width-default: 100%;
    --sx-skeleton-radius-circle: var(--sx-radius-pill);
    --sx-skeleton-pattern-opacity: 0.18;
    --sx-skeleton-pulse-duration: 1.5s;
    --sx-skeleton-pulse-opacity-min: 0.6;
    --sx-skeleton-pulse-opacity-max: 1;

    --sx-typography-h1-font-family: var(--sx-type-display-font-family);
    --sx-typography-h1-font-size: var(--sx-type-display-font-size);
    --sx-typography-h1-font-weight: var(--sx-type-display-font-weight);
    --sx-typography-h1-line-height: var(--sx-type-display-line-height);
    --sx-typography-h1-color: var(--sx-type-display-color);
    --sx-typography-h1-margin-bottom: var(--sx-spacing-md);
    --sx-typography-h2-font-family: var(--sx-type-title-font-family);
    --sx-typography-h2-font-size: var(--sx-font-size-display-sm);
    --sx-typography-h2-font-weight: var(--sx-type-title-font-weight);
    --sx-typography-h2-line-height: var(--sx-line-height-tight);
    --sx-typography-h2-color: var(--sx-type-title-color);
    --sx-typography-h2-margin-bottom: var(--sx-spacing-sm);
    --sx-typography-h3-font-family: var(--sx-type-heading-font-family);
    --sx-typography-h3-font-size: var(--sx-type-heading-font-size);
    --sx-typography-h3-font-weight: var(--sx-type-heading-font-weight);
    --sx-typography-h3-line-height: var(--sx-type-heading-line-height);
    --sx-typography-h3-color: var(--sx-type-heading-color);
    --sx-typography-h3-margin-bottom: var(--sx-spacing-xs);
    --sx-typography-h4-font-family: var(--sx-type-heading-font-family);
    --sx-typography-h4-font-size: var(--sx-type-title-font-size);
    --sx-typography-h4-font-weight: var(--sx-type-heading-font-weight);
    --sx-typography-h4-line-height: var(--sx-type-heading-line-height);
    --sx-typography-h4-color: var(--sx-type-heading-color);
    --sx-typography-h5-font-family: var(--sx-type-heading-font-family);
    --sx-typography-h5-font-size: var(--sx-font-size-lg);
    --sx-typography-h5-font-weight: var(--sx-type-heading-font-weight);
    --sx-typography-h5-line-height: var(--sx-type-heading-line-height);
    --sx-typography-h5-color: var(--sx-type-heading-color);
    --sx-typography-h6-font-family: var(--sx-type-heading-font-family);
    --sx-typography-h6-font-size: var(--sx-font-size-base);
    --sx-typography-h6-font-weight: var(--sx-type-heading-font-weight);
    --sx-typography-h6-line-height: var(--sx-type-heading-line-height);
    --sx-typography-h6-color: var(--sx-type-heading-color);
    --sx-typography-h6-text-transform: uppercase;

    --sx-icon-colorful-default-hue: 210;
    --sx-icon-colorful-saturation: 72%;
    --sx-icon-colorful-lightness: 52%;
    --sx-icon-colorful-foreground-mix: 82%;
    --sx-icon-colorful-background-mix: 9%;
    --sx-icon-colorful-background-hover-mix: 13%;
    --sx-icon-colorful-border-mix: 30%;
    --sx-icon-colorful-background-dark-mix: 18%;
    --sx-icon-colorful-background-hover-dark-mix: 24%;
    --sx-icon-colorful-border-dark-mix: 40%;
    --sx-icon-colorful-foreground-dark-mix: 62%;
    --sx-icon-colorful-foreground-dark-base: white;
    --sx-icon-colorful-contrast-lightness: 84%;
    --sx-icon-colorful-contrast-foreground-mix: 58%;
    --sx-icon-colorful-contrast-base: var(--sx-color-on-brand);
    --sx-icon-colorful-accent: hsl(var(--sx-icon-colorful-hue, var(--sx-icon-colorful-default-hue)) var(--sx-icon-colorful-saturation) var(--sx-icon-colorful-lightness));
    --sx-icon-colorful-foreground: color-mix(in srgb, var(--sx-icon-colorful-accent) var(--sx-icon-colorful-foreground-mix), var(--sx-color-neutral-foreground-1));
    --sx-icon-colorful-background: color-mix(in srgb, var(--sx-icon-colorful-accent) var(--sx-icon-colorful-background-mix), var(--sx-color-neutral-background-1));
    --sx-icon-colorful-background-hover: color-mix(in srgb, var(--sx-icon-colorful-accent) var(--sx-icon-colorful-background-hover-mix), var(--sx-color-neutral-background-2));
    --sx-icon-colorful-border: color-mix(in srgb, var(--sx-icon-colorful-accent) var(--sx-icon-colorful-border-mix), transparent);
    --sx-icon-colorful-background-dark: color-mix(in srgb, var(--sx-icon-colorful-accent) var(--sx-icon-colorful-background-dark-mix), var(--sx-color-neutral-background-2));
    --sx-icon-colorful-background-hover-dark: color-mix(in srgb, var(--sx-icon-colorful-accent) var(--sx-icon-colorful-background-hover-dark-mix), var(--sx-color-neutral-background-3));
    --sx-icon-colorful-border-dark: color-mix(in srgb, var(--sx-icon-colorful-accent) var(--sx-icon-colorful-border-dark-mix), transparent);
    --sx-icon-colorful-foreground-dark: color-mix(in srgb, var(--sx-icon-colorful-accent) var(--sx-icon-colorful-foreground-dark-mix), var(--sx-icon-colorful-foreground-dark-base));
    --sx-icon-background-color: var(--sx-color-neutral-background-3);
    --sx-icon-border-color: var(--sx-color-neutral-stroke-2);
    --sx-icon-bg-padding: 0.35em;
    --sx-icon-line-height: var(--sx-line-height-single);
    --sx-icon-radius-square: var(--sx-radius-none);
    --sx-icon-radius-circle: var(--sx-radius-pill);
    --sx-icon-size-10: calc(10px * var(--sx-font-scale, 1));
    --sx-icon-size-12: calc(12px * var(--sx-font-scale, 1));
    --sx-icon-size-16: calc(16px * var(--sx-font-scale, 1));
    --sx-icon-size-20: calc(20px * var(--sx-font-scale, 1));
    --sx-icon-size-24: calc(24px * var(--sx-font-scale, 1));
    --sx-icon-size-28: calc(28px * var(--sx-font-scale, 1));
    --sx-icon-size-32: calc(32px * var(--sx-font-scale, 1));
    --sx-icon-size-40: calc(40px * var(--sx-font-scale, 1));
    --sx-icon-size-48: calc(48px * var(--sx-font-scale, 1));
    --sx-icon-size-64: calc(64px * var(--sx-font-scale, 1));

    --sx-timeline-line-size-default: var(--sx-border-width-medium);
    --sx-timeline-line-size: var(--sx-timeline-line-size-default);
    --sx-timeline-line-color: var(--sx-color-neutral-stroke-2);
    --sx-timeline-content-gap: var(--sx-spacing-lg);
    --sx-timeline-wrap-row-gap: var(--sx-spacing-lg);
    --sx-timeline-wrap-column-gap: var(--sx-spacing-lg);
    --sx-timeline-wrap-connector-gap: var(--sx-spacing-lg);
    --sx-timeline-wrap-connector-content-gap: var(--sx-spacing-xs);
    --sx-timeline-wrap-connector-radius: var(--sx-radius-lg);
    --sx-timeline-structured-point-size: 2.75rem;
    --sx-timeline-axis-size: var(--sx-timeline-measured-axis-size, var(--sx-timeline-structured-point-size));
    --sx-timeline-current-color: var(--sx-color-brand-background-1);
    --sx-timeline-current-content-border-width: var(--sx-border-width-thin);
    --sx-timeline-current-content-border-color: var(--sx-color-brand-foreground-1);
    --sx-timeline-current-content-background: color-mix(in srgb, var(--sx-timeline-current-color) 8%, transparent);
    --sx-timeline-current-content-padding-block: var(--sx-spacing-xs);
    --sx-timeline-current-content-padding-inline: var(--sx-spacing-sm);
    --sx-timeline-current-content-radius: var(--sx-radius-md);
    --sx-timeline-current-point-border-width: var(--sx-border-width-thick);
    --sx-timeline-current-point-border-color: color-mix(in srgb, var(--sx-timeline-current-color) 72%, var(--sx-color-neutral-foreground-1) 28%);
    --sx-timeline-current-point-ring-size: var(--sx-spacing-xxs);
    --sx-timeline-current-point-ring-color: color-mix(in srgb, var(--sx-timeline-current-color) 32%, transparent);
    --sx-timeline-completion-size: 1em;
    --sx-timeline-completion-gap: var(--sx-spacing-xs);
    --sx-timeline-completion-radius: min(var(--sx-radius-sm), calc(var(--sx-timeline-completion-size) * 0.2));
    --sx-timeline-completion-border-width: 1.5px;
    --sx-timeline-completion-border-width-default: var(--sx-timeline-completion-border-width);
    --sx-timeline-completion-check-width: var(--sx-border-width-medium);
    --sx-timeline-completion-empty-border-color: var(--sx-color-neutral-foreground-2);
    --sx-timeline-completion-completed-background: var(--sx-color-status-success);
    --sx-timeline-completion-completed-border-color: var(--sx-color-status-success-foreground);
    --sx-timeline-completion-completed-color: var(--sx-color-on-status);
    --sx-timeline-time-font-family: var(--sx-type-caption-font-family);
    --sx-timeline-time-font-size: var(--sx-type-caption-font-size);
    --sx-timeline-time-font-weight: var(--sx-type-caption-font-weight);
    --sx-timeline-time-line-height: var(--sx-type-caption-line-height);
    --sx-timeline-time-color: var(--sx-type-caption-color);
    --sx-timeline-title-font-family: var(--sx-type-body-strong-font-family);
    --sx-timeline-title-font-size: var(--sx-type-body-strong-font-size);
    --sx-timeline-title-font-weight: var(--sx-type-body-strong-font-weight);
    --sx-timeline-title-line-height: var(--sx-type-body-strong-line-height);
    --sx-timeline-title-color: var(--sx-type-body-strong-color);
    --sx-timeline-body-font-family: var(--sx-type-body-font-family);
    --sx-timeline-body-font-size: var(--sx-type-body-font-size);
    --sx-timeline-body-font-weight: var(--sx-type-body-font-weight);
    --sx-timeline-body-line-height: var(--sx-type-body-line-height);
    --sx-timeline-body-color: var(--sx-type-body-color);
    --sx-timeline-label-font-family: var(--sx-type-caption-font-family);
    --sx-timeline-label-font-size: var(--sx-type-caption-font-size);
    --sx-timeline-label-font-weight: var(--sx-type-caption-font-weight);
    --sx-timeline-label-line-height: var(--sx-type-caption-line-height);
    --sx-timeline-label-color: var(--sx-type-caption-color);
    --sx-timeline-point-size-default: var(--sx-font-size-sm);
    --sx-timeline-point-size: var(--sx-timeline-point-size-default);
    --sx-timeline-point-size-dot: 0.625rem;
    --sx-timeline-point-size-structured: var(--sx-font-size-title);
    --sx-timeline-point-size-custom: 1.75rem;
    --sx-timeline-point-slot-size: var(--sx-timeline-axis-size);
    --sx-timeline-point-offset: var(--sx-spacing-xs);
    --sx-timeline-point-padding: var(--sx-spacing-xs);
    --sx-timeline-point-radius: var(--sx-radius-pill);
    --sx-timeline-point-icon-size-sm: var(--sx-font-size-xxs);
    --sx-timeline-point-icon-size-md: var(--sx-font-size-sm);
    --sx-timeline-point-font-family: var(--sx-type-caption-font-family);
    --sx-timeline-point-font-weight: var(--sx-type-caption-font-weight);
    --sx-timeline-point-line-height: var(--sx-line-height-single);
    --sx-timeline-point-stack-rows-single: 1fr;
    --sx-timeline-point-stack-rows-pair: minmax(0, 1fr) minmax(0, 1fr);
    --sx-timeline-point-stack-rows-full: minmax(0, 1fr) auto minmax(0, 1fr);
    --sx-timeline-point-top-font-size: var(--sx-font-size-xxs);
    --sx-timeline-point-middle-font-size: var(--sx-font-size-sm);
    --sx-timeline-point-middle-font-weight: var(--sx-font-weight-semibold);
    --sx-timeline-point-bottom-font-size: var(--sx-font-size-xxs);
    --sx-timeline-point-fill: var(--sx-color-neutral-background-1);
    --sx-timeline-point-border-width: var(--sx-border-width-medium);
    --sx-timeline-point-color: var(--sx-color-brand-foreground-1);
    --sx-timeline-head-color: var(--sx-color-brand-background-1);
    --sx-timeline-item-min-width-horizontal: 8rem;
    --sx-timeline-item-width-default: 16rem;
    --sx-timeline-item-max-width-default: 100%;
    --sx-timeline-base-z-index: 0;
    --sx-timeline-line-z-index: 1;
    --sx-timeline-check-width-ratio: 0.32;
    --sx-timeline-check-height-ratio: 0.52;

    /* 6.7 Layout and shell component recipes */
    --sx-anchor-gap: var(--sx-spacing-xs);
    --sx-anchor-font-family: var(--sx-button-font-family);
    --sx-anchor-font-size: var(--sx-button-font-size);
    --sx-anchor-font-weight: var(--sx-button-font-weight);
    --sx-anchor-line-height: var(--sx-button-line-height);
    --sx-anchor-padding-block: var(--sx-spacing-xs);
    --sx-anchor-padding-inline: var(--sx-spacing-sm);
    --sx-anchor-radius: var(--sx-radius-md);
    --sx-anchor-disabled-opacity: var(--sx-surface-disabled-opacity);
    --sx-anchor-color: var(--sx-color-neutral-foreground-1);
    --sx-anchor-hover-background: var(--sx-color-neutral-background-2);
    --sx-anchor-neutral-background: var(--sx-color-neutral-background-3);
    --sx-anchor-accent-background: var(--sx-color-brand-background-1);
    --sx-anchor-accent-color: var(--sx-color-on-brand);
    --sx-anchor-outline-border-color: var(--sx-color-brand-stroke-1);
    --sx-anchor-outline-color: var(--sx-color-brand-foreground-1);
    --sx-anchor-neutral-outline-border-color: var(--sx-color-neutral-stroke-1);
    --sx-anchor-lightweight-color: var(--sx-color-brand-foreground-1);
    --sx-anchor-lightweight-font-weight: var(--sx-button-quiet-font-weight);
    --sx-anchor-lightweight-hover-background: color-mix(in srgb, var(--sx-color-brand-background-1) 10%, transparent);
    --sx-anchor-stealth-color: var(--sx-color-neutral-foreground-1);
    --sx-anchor-stealth-font-weight: var(--sx-button-quiet-font-weight);
    --sx-anchor-stealth-hover-background: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 4%, transparent);
    --sx-anchor-link-color: var(--sx-color-brand-foreground-1);
    --sx-anchor-link-underline-thickness: var(--sx-border-width-thin);

    --sx-grid-spacing-default: var(--sx-spacing-lg);
    --sx-grid-item-padding-factor: 0.5;
    --sx-grid-item-span-1: calc(100% / 12);
    --sx-grid-item-span-2: calc(100% / 6);
    --sx-grid-item-span-3: 25%;
    --sx-grid-item-span-4: calc(100% / 3);
    --sx-grid-item-span-5: calc(100% / 12 * 5);
    --sx-grid-item-span-6: 50%;
    --sx-grid-item-span-7: calc(100% / 12 * 7);
    --sx-grid-item-span-8: calc(100% / 3 * 2);
    --sx-grid-item-span-9: 75%;
    --sx-grid-item-span-10: calc(100% / 6 * 5);
    --sx-grid-item-span-11: calc(100% / 12 * 11);
    --sx-grid-item-span-12: 100%;
    --sx-grid-breakpoint-sm: 512px;
    --sx-grid-breakpoint-md: 768px;
    --sx-grid-breakpoint-lg: 1024px;
    --sx-grid-breakpoint-xl: 1440px;

    --sx-stack-gap-default: var(--sx-spacing-sm);
    --sx-overflow-gap: var(--sx-spacing-sm);

    --sx-layout-background: var(--sx-color-neutral-background-3);
    --sx-layout-region-background: var(--sx-color-neutral-background-1);
    --sx-layout-region-border-color: var(--sx-color-neutral-stroke-1);
    --sx-layout-header-height: 64px;
    --sx-layout-sider-width: 260px;
    --sx-layout-sider-collapsed-width: 64px;
    --sx-layout-sider-transition: all var(--sx-duration-normal);

    --sx-page-box-padding-none: 0px;
    --sx-page-box-padding-xsmall: var(--sx-spacing-xs);
    --sx-page-box-padding-small: var(--sx-spacing-sm);
    --sx-page-box-padding-medium: var(--sx-spacing-md);
    --sx-page-box-padding-large: var(--sx-spacing-lg);
    --sx-page-box-padding-xlarge: var(--sx-spacing-xl);
    --sx-page-box-constrained-width: var(--sx-width-constrained-standard);

    --sx-section-gutter-none: var(--sx-spacing-none);
    --sx-section-gutter-small: var(--sx-spacing-sm);
    --sx-section-gutter-medium: var(--sx-spacing-md);
    --sx-section-gutter-large: var(--sx-spacing-lg);
    --sx-section-gutter-xlarge: var(--sx-spacing-xl);
    --sx-section-title-padding-y: var(--sx-group-title-padding-y);
    --sx-section-fill-min-height: 0px;

    --sx-safe-surface-inset-factor-default: 0;
    --sx-safe-surface-inset-factor-enabled: 0.3;
    --sx-safe-surface-inset-factor-cupertino: 0.3;
    --sx-safe-surface-inset-factor-disabled: 0;
    --sx-safe-surface-radius-none: 0px;
    --sx-safe-surface-rounded-radius-default: var(--sx-radius-md);
    --sx-safe-surface-content-pad-none: 0px;

    --sx-viewport-fade-size-default: var(--sx-spacing-xl);
    --sx-viewport-fade-source-color-default: var(--sx-color-neutral-background-1);
    --sx-viewport-fade-surface-mix-subtle: 72%;
    --sx-viewport-fade-surface-mix-medium: 84%;
    --sx-viewport-fade-surface-mix-strong: 94%;
    --sx-viewport-fade-z-index: 1;

    --sx-page-header-background: var(--sx-color-neutral-background-2);
    --sx-page-header-title-gap: var(--sx-spacing-sm);
    --sx-page-header-description-color: var(--sx-color-neutral-foreground-3);

    --sx-shell-viewport-inset-default: 0px;
    --sx-shell-viewport-max-width-default: none;

    --sx-horizontal-scroll-flipper-size: var(--sx-spacing-xl);
    --sx-horizontal-scroll-flipper-background: var(--sx-color-neutral-background-1);
    --sx-horizontal-scroll-flipper-hover-background: var(--sx-color-neutral-background-1-hover);
    --sx-horizontal-scroll-flipper-disabled-background: transparent;
    --sx-horizontal-scroll-flipper-icon-color: var(--sx-color-neutral-foreground-1);
    --sx-horizontal-scroll-flipper-border-color: var(--sx-color-neutral-stroke-1);
    --sx-horizontal-scroll-flipper-radius: var(--sx-radius-pill);
    --sx-horizontal-scroll-flipper-shadow: var(--sx-shadow-4);
    --sx-horizontal-scroll-flipper-disabled-opacity: 0.5;
    --sx-horizontal-scroll-flipper-transition: background-color var(--sx-duration-normal), opacity var(--sx-duration-normal);
    --sx-horizontal-scroll-flipper-margin-inline: var(--sx-spacing-xs);

    --sx-pull-to-refresh-gap: var(--sx-spacing-sm);
    --sx-pull-to-refresh-height-default: 0px;
    --sx-pull-to-refresh-opacity-default: 0;
    --sx-pull-to-refresh-rotate-default: 0deg;
    --sx-pull-to-refresh-transition: height var(--sx-duration-normal) ease, opacity var(--sx-duration-normal) ease;
    --sx-pull-to-refresh-icon-transition: transform var(--sx-duration-normal) ease;
    --sx-pull-to-refresh-disabled-opacity: var(--sx-surface-disabled-opacity);
    --sx-pull-to-refresh-spinner-size: 1.25rem;
    --sx-pull-to-refresh-spinner-border-color: var(--sx-color-neutral-stroke-2);
    --sx-pull-to-refresh-spinner-active-color: var(--sx-color-brand-stroke-1);
    --sx-pull-to-refresh-spinner-duration: 1s;

    --sx-responsive-grid-columns-default: 1;
    --sx-responsive-grid-min-item-width-default: 18.5rem;
    --sx-responsive-grid-gap-default: var(--sx-spacing-md);
    --sx-responsive-grid-item-height-default: 13.5rem;
    --sx-responsive-grid-max-columns-default: 12;
    --sx-responsive-grid-placeholder-radius: var(--sx-radius-lg);
    --sx-responsive-grid-placeholder-background: linear-gradient(180deg, var(--sx-color-neutral-background-2) 0%, var(--sx-color-neutral-background-3) 100%);
    --sx-responsive-grid-disabled-opacity: var(--sx-disabled-opacity, 0.56);

    --sx-adaptive-view-variant-min-width: 18rem;
    --sx-adaptive-view-gap: var(--sx-spacing-md);

    --sx-splitter-hit-size: var(--sx-spacing-md);
    --sx-splitter-line-size: var(--sx-border-width-thin);
    --sx-splitter-handle-size: 0.25rem;
    --sx-splitter-handle-length: 2rem;
    --sx-splitter-visual-opacity-hidden: 0;
    --sx-splitter-visual-opacity-visible: 1;
    --sx-splitter-base-z-index: 1;
    --sx-splitter-panel-z-index: 2;
    --sx-splitter-bar-z-index: var(--sx-z-index-overlay);
    --sx-splitter-transition: opacity var(--sx-duration-normal) ease, background var(--sx-duration-normal) ease;
    --sx-splitter-handle-transition: opacity var(--sx-duration-normal) ease, box-shadow var(--sx-duration-normal) ease;
    --sx-splitter-line-gradient-vertical: linear-gradient(to bottom, transparent 0%, var(--sx-color-neutral-stroke-2) 15%, var(--sx-color-neutral-stroke-2) 85%, transparent 100%);
    --sx-splitter-line-gradient-horizontal: linear-gradient(to right, transparent 0%, var(--sx-color-neutral-stroke-2) 15%, var(--sx-color-neutral-stroke-2) 85%, transparent 100%);
    --sx-splitter-line-gradient-active-vertical: linear-gradient(to bottom, transparent 0%, var(--sx-color-brand-background-1) 15%, var(--sx-color-brand-background-1) 85%, transparent 100%);
    --sx-splitter-line-gradient-active-horizontal: linear-gradient(to right, transparent 0%, var(--sx-color-brand-background-1) 15%, var(--sx-color-brand-background-1) 85%, transparent 100%);
    --sx-splitter-line-background: var(--sx-color-neutral-stroke-1);
    --sx-splitter-handle-radius: var(--sx-radius-sm);
    --sx-splitter-handle-background: var(--sx-color-brand-background-1);
    --sx-splitter-handle-shadow-active: 0 0 0.5rem var(--sx-color-brand-background-1);

    --sx-multi-splitter-hit-size: var(--sx-splitter-hit-size);
    --sx-multi-splitter-line-size: var(--sx-splitter-line-size);
    --sx-multi-splitter-handle-size: var(--sx-splitter-handle-size);
    --sx-multi-splitter-handle-length: var(--sx-splitter-handle-length);
    --sx-multi-splitter-visual-opacity-hidden: var(--sx-splitter-visual-opacity-hidden);
    --sx-multi-splitter-visual-opacity-visible: var(--sx-splitter-visual-opacity-visible);
    --sx-multi-splitter-bar-z-index: 3;

    --sx-dock-default-left-size: 256px;
    --sx-dock-default-right-size: 320px;
    --sx-dock-default-top-size: 144px;
    --sx-dock-default-bottom-size: 208px;
    --sx-dock-side-max-size: 34%;
    --sx-dock-top-max-size: 32%;
    --sx-dock-bottom-max-size: 40%;
    --sx-dock-collapsed-size: 0px;
    --sx-dock-rail-size: calc(var(--sx-spacing-xl) + var(--sx-spacing-md));
    --sx-dock-resizer-size: var(--sx-splitter-hit-size);
    --sx-dock-resizer-line-size: var(--sx-splitter-line-size);
    --sx-dock-resizer-handle-size: var(--sx-splitter-handle-size);
    --sx-dock-resizer-handle-length: var(--sx-splitter-handle-length);
    --sx-dock-area-gap: 0px;
    --sx-dock-rail-radius: var(--sx-radius-md);
    --sx-dock-rail-border-color: color-mix(in srgb, var(--sx-color-neutral-stroke-2) 42%, transparent);
    --sx-dock-rail-gap: var(--sx-spacing-tiny);
    --sx-dock-rail-padding: var(--sx-spacing-tiny);
    --sx-dock-rail-item-min-block-size: calc(var(--sx-spacing-xl) * 2);
    --sx-dock-rail-item-block-padding: var(--sx-spacing-sm);
    --sx-dock-rail-item-inline-padding: var(--sx-spacing-xs);
    --sx-dock-rail-item-horizontal-padding-inline: var(--sx-spacing-md);
    --sx-dock-rail-item-line-height: 1.3;
    --sx-dock-rail-item-collapsed-opacity: 0.58;
    --sx-dock-rail-item-collapsed-hover-opacity: 0.82;
    --sx-dock-rail-item-locked-opacity: 0.72;
    --sx-dock-panel-gap: var(--sx-spacing-xs);
    --sx-dock-panel-header-size: calc(var(--sx-spacing-xl) + var(--sx-spacing-sm));
    --sx-dock-panel-min-block-size: var(--sx-dock-panel-header-size);
    --sx-dock-panel-min-inline-size: calc(var(--sx-dock-panel-header-size) * 2);
    --sx-dock-panel-radius: var(--sx-radius-md);
    --sx-dock-panel-font-size: var(--sx-font-size-sm);
    --sx-dock-panel-line-height: 1.5;
    --sx-dock-panel-title-line-height: 1.4;
    --sx-dock-panel-header-padding-block: var(--sx-spacing-xs);
    --sx-dock-panel-header-padding-inline: var(--sx-spacing-sm);
    --sx-dock-status-background: color-mix(in srgb, var(--sx-color-neutral-background-1) 72%, transparent);
    --sx-dock-status-filter: blur(var(--sx-spacing-md)) saturate(145%);
    --sx-dock-status-font-size: var(--sx-font-size-xs);
    --sx-dock-status-line-height: 1.4;
    --sx-dock-workspace-z-index: 0;
    --sx-dock-area-z-index: 1;
    --sx-dock-status-z-index: 3;
    --sx-dock-panel-resizer-z-index: 7;
    --sx-dock-resizer-z-index: 8;
    --sx-dock-span-action-z-index: 9;
    --sx-dock-span-action-zone-size: calc(var(--sx-spacing-xl) + var(--sx-spacing-lg));
    --sx-dock-span-action-size: calc(var(--sx-spacing-xl) + var(--sx-spacing-xs));
    --sx-dock-span-action-scale-hidden: 0.82;
    --sx-dock-span-action-scale-visible: 1;
    --sx-dock-span-action-transition: opacity var(--sx-duration-fast) ease, transform var(--sx-duration-fast) ease;
    --sx-dock-active-bg: color-mix(in srgb, var(--sx-color-brand-background-1) 10%, var(--sx-color-neutral-background-1));
    --sx-dock-active-border: color-mix(in srgb, var(--sx-color-brand-background-1) 44%, var(--sx-color-neutral-stroke-2));
    --sx-dock-active-foreground: var(--sx-color-brand-foreground-1);
    --sx-dock-drop-zone-background: color-mix(in srgb, var(--sx-color-neutral-background-3) 60%, transparent);
    --sx-dock-dragging-outline-color: color-mix(in srgb, var(--sx-color-brand-stroke-1) 72%, transparent);
    --sx-dock-mobile-breakpoint: 640px;

    /* 6.8 Chart component recipes */
    --sx-chart-min-height-default: 12.5rem;
    --sx-chart-min-height: var(--sx-chart-min-height-default);
    --sx-chart-min-height-large: 16rem;
    --sx-chart-disabled-opacity: var(--sx-surface-disabled-opacity);
    --sx-chart-background: transparent;
    --sx-chart-font-family: var(--sx-type-body-font-family);
    --sx-chart-font-size: var(--sx-type-caption-font-size);
    --sx-chart-text-color: var(--sx-color-neutral-foreground-1);
    --sx-chart-muted-text-color: var(--sx-color-neutral-foreground-3);
    --sx-chart-title-color: var(--sx-type-title-color);
    --sx-chart-title-font-size: var(--sx-type-title-font-size);
    --sx-chart-title-font-weight: var(--sx-type-title-font-weight);
    --sx-chart-subtitle-color: var(--sx-type-caption-color);
    --sx-chart-axis-line-color: var(--sx-color-neutral-stroke-1);
    --sx-chart-axis-label-color: var(--sx-color-neutral-foreground-3);
    --sx-chart-split-line-color: var(--sx-color-neutral-stroke-2);
    --sx-chart-legend-color: var(--sx-color-neutral-foreground-2);
    --sx-chart-legend-inactive-color: var(--sx-color-neutral-foreground-4);
    --sx-chart-tooltip-background: var(--sx-color-neutral-background-1);
    --sx-chart-tooltip-color: var(--sx-color-neutral-foreground-1);
    --sx-chart-tooltip-border-color: var(--sx-color-neutral-stroke-1);
    --sx-chart-tooltip-shadow: var(--sx-shadow-8);
    --sx-chart-palette-1: var(--sx-color-brand-background-1);
    --sx-chart-palette-2: var(--sx-color-status-success);
    --sx-chart-palette-3: var(--sx-color-status-warning);
    --sx-chart-palette-4: var(--sx-color-status-danger);
    --sx-chart-palette-5: var(--sx-primary-300);
    --sx-chart-palette-6: var(--sx-primary-700);
    --sx-chart-palette-7: color-mix(in srgb, var(--sx-color-status-info) 68%, var(--sx-color-neutral-foreground-1));
    --sx-chart-palette-8: color-mix(in srgb, var(--sx-color-status-success) 72%, var(--sx-color-brand-background-1));

    /* 9. Group Title — 组标题通用样式 */
    --sx-group-title-font-size: var(--sx-type-label-font-size);       /* semantic label */
    --sx-group-title-font-weight: var(--sx-font-weight-extrabold);    /* 800 */
    --sx-group-title-color: var(--sx-color-neutral-foreground-1);     /* 主文字色 */
    --sx-group-title-line-height: var(--sx-type-label-line-height);
    --sx-group-title-padding-y: var(--sx-spacing-xs);             /* 上下内边距 */

    /* Group Title Icon */
    --sx-group-title-icon-size: var(--sx-icon-size-sm);           /* 0.875rem */
    --sx-group-title-icon-color: var(--sx-color-neutral-foreground-3); /* 比文字再淡一级 */
    --sx-group-title-icon-gap: var(--sx-spacing-xs);              /* 图标与文字间距 */

    /* 9.1 Card Title — 卡片标题通用样式 */
    --sx-card-title-font-family: var(--sx-type-title-font-family);
    --sx-card-title-font-size: var(--sx-font-size-base);
    --sx-card-title-font-weight: var(--sx-font-weight-bold);
    --sx-card-title-color: var(--sx-type-title-color);
    --sx-card-title-line-height: var(--sx-line-height-compact);
    --sx-card-title-icon-size: var(--sx-icon-size-sm);
    --sx-card-title-icon-color: var(--sx-group-title-icon-color);
    --sx-card-title-icon-gap: var(--sx-spacing-sm);

    /* 7. Responsive Breakpoints (5-Tier) */
    --sx-breakpoint-xs: 320px;   /* Extra Narrow (Phone small) */
    --sx-breakpoint-sm: 640px;   /* Narrow (Phone large) */
    --sx-breakpoint-md: 1024px;  /* Normal (Tablet) */
    --sx-breakpoint-lg: 1440px;  /* Wide (Desktop) */
    --sx-breakpoint-xl: 1920px;  /* Extra Wide (Ultra-wide) */

    /* 8. Icons (Font Awesome Pro Compatibility, scaled by font-scale) */
    --sx-icon-size-xs: calc(0.75rem * var(--sx-font-scale, 1));
    --sx-icon-size-sm: calc(0.875rem * var(--sx-font-scale, 1));
    --sx-icon-size-md: calc(1rem * var(--sx-font-scale, 1));
    --sx-icon-size-lg: calc(1.25rem * var(--sx-font-scale, 1));
    --sx-icon-size-xl: calc(1.5rem * var(--sx-font-scale, 1));
    --sx-icon-weight: 400; 
    --sx-icon-primary-opacity: 1.0;
    --sx-icon-secondary-opacity: 0.4;

    /* 8. Layer Overrides (Default: Modern) - Auto-scaled by density */
    --sx-borderRadiusSmall: var(--sx-radius-sm);
    --sx-borderRadiusMedium: var(--sx-radius-md);
    --sx-borderRadiusLarge: var(--sx-radius-lg);
    --sx-borderRadiusXLarge: var(--sx-radius-xl);
    --sx-borderRadiusPill: var(--sx-radius-pill);
    --sx-borderRadiusCircular: var(--sx-radius-pill);
    --sx-spacingHorizontalXXS: var(--sx-spacing-xxs);
    --sx-spacingHorizontalXS: var(--sx-spacing-xs);
    --sx-spacingHorizontalXSmall: var(--sx-spacing-xs);
    --sx-spacingHorizontalS: var(--sx-spacing-sm);
    --sx-spacingHorizontalSmall: var(--sx-spacing-sm);
    --sx-spacingHorizontalM: var(--sx-spacing-md);
    --sx-spacingHorizontalMedium: var(--sx-spacing-md);
    --sx-spacingVerticalXXS: var(--sx-spacing-xxs);
    --sx-spacingVerticalXS: var(--sx-spacing-xs);
    --sx-spacingVerticalXSmall: var(--sx-spacing-xs);
    --sx-spacingVerticalS: var(--sx-spacing-sm);
    --sx-spacingVerticalSmall: var(--sx-spacing-xs);
    --sx-spacingVerticalM: var(--sx-spacing-md);
    --sx-spacingVerticalMedium: var(--sx-spacing-sm);
    --sx-controlMinHeight: var(--sx-control-height-md);

    /* --- Safe Area Tokens --- */
    --sx-safe-area-inset-top: env(safe-area-inset-top, 0px);
    --sx-safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --sx-safe-area-inset-left: env(safe-area-inset-left, 0px);
    --sx-safe-area-inset-right: env(safe-area-inset-right, 0px);

    /* 10. Shadows (Support dark mode) */
    --sx-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --sx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --sx-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --sx-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);
    --sx-shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* 11. Overlay/Backdrop */
    --sx-overlay-backdrop: rgba(0, 0, 0, 0.4);
    --sx-overlay-scrim: rgba(0, 0, 0, 0.55);

    /* 12. Z-index layers */
    --sx-zIndexPopup: 1000;
    --sx-zIndexOverlay: 10000;
    --sx-zIndexModal: 100000;
    --sx-zIndexCritical: 999999;
    --sx-z-index-popup: var(--sx-zIndexPopup);
    --sx-z-index-overlay: var(--sx-zIndexOverlay);
    --sx-z-index-modal: var(--sx-zIndexModal);
    --sx-z-index-critical: var(--sx-zIndexCritical);
    --sx-mask-opaque: #000000;
}


/* Dark Theme Overrides */
[data-theme="dark"] {
    /* Anti-flash: tell browser to use dark canvas + scrollbar styling */
    color-scheme: dark;
    background-color: var(--sx-color-neutral-background-3);

    --sx-colorNeutralBackground1: #161616;
    --sx-colorNeutralBackground2: #1f1f1f;
    --sx-colorNeutralBackground3: #292929;
    --sx-colorNeutralForeground1: #ffffff;
    --sx-colorNeutralForeground2: #c8c8c8;
    --sx-colorNeutralForeground3: #9f9f9f;
    --sx-colorNeutralForeground4: #888888;
    --sx-colorNeutralStroke1: #444444;
    --sx-colorNeutralStroke2: #333333;

    /* Disabled State Colors (Dark mode) */
    --sx-colorNeutralBackgroundDisabled: #2a2a2a;
    --sx-colorNeutralForegroundDisabled: #666666;
    --sx-colorNeutralStrokeDisabled: #444444;
    --sx-colorBrandBackgroundDisabled: #4a7fc8;

    /* Primary color palette will be dynamically adjusted by theme runtime */
    /* Default dark theme primary colors (will be overridden by runtime) */
    --sx-primary-500: #479ef5;
    --sx-primary-600: #6cb8f6;
    
    /* Semantic aliases for dark theme */
    /* Note: BrandForeground1 and BrandStroke1 use lighter variants as CSS-only WCAG fallback.
       JS ThemeRuntime will override these with exact WCAG-computed values via inline styles. */
    --sx-colorBrandBackground1: var(--sx-primary-500);
    --sx-colorBrandBackground2: var(--sx-primary-600);
    --sx-colorBrandForeground1: var(--sx-primary-300);
    --sx-colorBrandStroke1: var(--sx-primary-400);

    /* Interactive State Tokens (Dark mode) */
    /* In dark mode, selected uses lighter shade for visibility */
    --sx-colorBrandBackgroundSelected: var(--sx-primary-600);
    --sx-colorBrandForegroundOnSelected: var(--sx-colorOnBrand);
    --sx-colorBrandBackgroundHover: var(--sx-primary-600);
    --sx-colorBrandBackgroundPressed: var(--sx-primary-700);
    --sx-colorNeutralBackgroundSelected: var(--sx-colorNeutralBackground3);
    --sx-colorNeutralForegroundOnSelected: var(--sx-colorNeutralForeground1);

    /* Status Colors (Dark mode) */
    --sx-colorStatusInfo: #479ef5;
    --sx-colorStatusInfoBackground: #0d2240;
    --sx-colorStatusInfoForeground: #6cb8f6;
    --sx-colorStatusInfoBorder: #2d5f8a;
    --sx-colorStatusSuccess: #4caf50;
    --sx-colorStatusSuccessBackground: #0f2d0f;
    --sx-colorStatusSuccessForeground: #6dd670;
    --sx-colorStatusSuccessBorder: #2e7d32;
    --sx-colorStatusWarning: #ffb900;
    --sx-colorStatusWarningBackground: #2d2600;
    --sx-colorStatusWarningForeground: #ffc107;
    --sx-colorStatusWarningBorder: #e6a700;
    --sx-colorStatusDanger: #f44336;
    --sx-colorStatusDangerBackground: #2d0f0f;
    --sx-colorStatusDangerForeground: #ef5350;
    --sx-colorStatusDangerBorder: #c62828;

    /* Code Editor Colors (Dark mode) */
    --sx-colorCodeBackground: #1e1e1e;
    --sx-colorCodeForeground: #d4d4d4;
    --sx-colorCodeHeaderBackground: #252526;
    --sx-colorCodeBorder: #333;
    --sx-colorCodeTextSecondary: #858585;
    --sx-colorCodeTextHover: #fff;

    /* Shadows (Enhanced for dark mode) */
    --sx-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --sx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --sx-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --sx-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.5);
    --sx-shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Overlay/Backdrop (Enhanced for dark mode) */
    --sx-overlay-backdrop: rgba(0, 0, 0, 0.6);
    --sx-overlay-scrim: rgba(0, 0, 0, 0.7);
}

/* ── Group Title Utility Class ── */
.sx-group-title {
    font-size: var(--sx-group-title-font-size);
    font-weight: var(--sx-group-title-font-weight);
    color: var(--sx-group-title-color);
    line-height: var(--sx-group-title-line-height);
    padding: var(--sx-group-title-padding-y) 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--sx-group-title-icon-gap);
}

.sx-group-title > .sx-icon {
    font-size: var(--sx-group-title-icon-size);
    color: var(--sx-group-title-icon-color);
    flex-shrink: 0;
}

/* Override Bootstrap / user-agent body color to follow the active theme.
   Bootstrap 5 explicitly sets body { color: #212529 } which blocks :root inheritance. */
html {
    font-family: var(--sx-font-family-base);
    font-size: 16px;
}

body {
    font-family: inherit;
    font-size: var(--sx-font-size-base);
    line-height: var(--sx-line-height-body);
    color: var(--sx-color-neutral-foreground-1);
    background-color: var(--sx-color-neutral-background-3);
}

html.sx-dialog-resize-shield,
html.sx-dialog-resize-shield body,
body.sx-dialog-resize-shield,
html.sx-dialog-resize-shield #app,
html.sx-dialog-resize-shield .sx-app-root {
    background:
        linear-gradient(var(--sx-overlay-backdrop), var(--sx-overlay-backdrop)),
        var(--sx-color-neutral-background-3) !important;
}

html.sx-native-theme-background,
html.sx-native-theme-background body,
body.sx-native-theme-background {
    background-color: transparent;
}

button,
input,
textarea,
select {
    font: inherit;
}