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

: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-colorNeutralBackground3);

    /* 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-colorNeutralForeground1);

    /* 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.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-sm: 0.25rem;
    --sx-radius-md: 0.5rem;
    --sx-radius-lg: 0.75rem;
    --sx-radius-xl: 1rem;

    /* 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-sm: 1.75rem;
    --sx-control-height-base-md: 2.25rem;
    --sx-control-height-base-lg: 3rem;
    --sx-control-height-base-xl: 3.5rem;
    --sx-control-height-sm: calc(var(--sx-control-height-base-sm) * (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));

    /* 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 factor (Dynamic - injected by theme runtime, default: 1.0) */
    --sx-font-scale: 1.0;
    
    /* Font sizes (scaled by --sx-font-scale) */
    --sx-font-size-xxs: calc(0.6875rem * var(--sx-font-scale, 1));   /* 11px, minimum UI label size */
    --sx-font-size-caption: var(--sx-font-size-xxs);                 /* Semantic alias for compact caption text */
    --sx-font-size-xs: calc(0.75rem * var(--sx-font-scale, 1));
    --sx-font-size-sm: calc(0.875rem * var(--sx-font-scale, 1));
    --sx-font-size-base: calc(1rem * var(--sx-font-scale, 1));
    --sx-font-size-lg: calc(1.125rem * var(--sx-font-scale, 1));
    --sx-font-size-title: calc(1.25rem * var(--sx-font-scale, 1));
    --sx-font-size-xl: calc(1.5rem * var(--sx-font-scale, 1));
    --sx-font-size-display-sm: calc(1.875rem * var(--sx-font-scale, 1));
    --sx-font-size-xxl: calc(1.75rem * var(--sx-font-scale, 1));     /* Legacy medium display */
    --sx-font-size-xxxl: calc(2rem * var(--sx-font-scale, 1));       /* Legacy large display */
    --sx-font-size-display-lg: calc(2.25rem * var(--sx-font-scale, 1));
    --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-micro: var(--sx-font-size-xxs);                   /* Deprecated compatibility alias; prefer xxs */
    --sx-font-size-tiny: var(--sx-font-size-sm);                     /* Deprecated compatibility alias; prefer sm */
    --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;

    /* 9. Group Title — 组标题通用样式 */
    --sx-group-title-font-size: var(--sx-font-size-sm);            /* 0.875rem */
    --sx-group-title-font-weight: var(--sx-font-weight-extrabold); /* 800 */
    --sx-group-title-color: var(--sx-colorNeutralForeground1);     /* 主文字色 */
    --sx-group-title-line-height: 1.4;
    --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-colorNeutralForeground3); /* 比文字再淡一级 */
    --sx-group-title-icon-gap: var(--sx-spacing-xs);              /* 图标与文字间距 */

    /* 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-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-borderRadiusCircular: 999px;
    --sx-spacingHorizontalSmall: var(--sx-spacing-sm);
    --sx-spacingHorizontalMedium: var(--sx-spacing-md);
    --sx-spacingVerticalSmall: var(--sx-spacing-xs);
    --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);
}


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

    --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: 1.5;
    color: var(--sx-colorNeutralForeground1);
    background-color: var(--sx-colorNeutralBackground1);
}

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