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

:root {
    /* 1. Global Scale Factors (The source of all REMs) */
    --sx-unit-rem: 0.25rem; /* 4px */
    
    /* 2. Colors - Neutral */
    --sx-colorNeutralBackground1: #ffffff;
    --sx-colorNeutralBackground2: #fafafa;
    --sx-colorNeutralBackground3: #f5f5f5;
    --sx-colorNeutralForeground1: #242424;
    --sx-colorNeutralForeground2: #424242;
    --sx-colorNeutralForeground3: #616161;
    --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 */
    --sx-colorBrandBackground1: var(--sx-primary-500);
    --sx-colorBrandBackground2: var(--sx-primary-600);
    --sx-colorBrandForeground1: var(--sx-primary-500);

    /* 3.3. Status Colors (Success, Warning, Danger) */
    --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-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-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)); /* 1px */
    --sx-spacing-tiny: calc(0.125rem * var(--sx-density-scale, 1));   /* 2px */
    --sx-spacing-mini: calc(0.25rem * var(--sx-density-scale, 1));    /* 4px */

    /* 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-micro: calc(0.7rem * var(--sx-font-scale, 1));   /* Very small text */
    --sx-font-size-tiny: calc(0.85rem * var(--sx-font-scale, 1));   /* Small 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-xl: calc(1.5rem * var(--sx-font-scale, 1));
    --sx-font-size-xxl: calc(1.75rem * var(--sx-font-scale, 1));     /* H1 */
    --sx-font-size-xxxl: calc(2rem * var(--sx-font-scale, 1));       /* Extra large heading */
    --sx-font-weight-normal: 400;
    --sx-font-weight-semibold: 600;
    --sx-font-weight-bold: 700;

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

/* 9. Platform Native Styles (System) */
.sx-style-system.sx-platform-macos,
.sx-style-system.sx-platform-ios {
    --sx-font-size-base: 0.875rem; /* 14px */
    --sx-radius-md: 0.625rem;      /* 10px Apple Standard */
    --sx-control-height-md: 2rem;
    --sx-colorBrandBackground1: #007aff;
    --sx-font-weight-semibold: 500;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

.sx-style-system.sx-platform-windows {
    --sx-font-size-base: 0.875rem;
    --sx-radius-md: 4px;
    --sx-control-height-md: 2rem;
    --sx-colorBrandBackground1: #0078d4;
    font-family: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei", sans-serif;
}

.sx-style-system.sx-platform-android {
    --sx-radius-md: 1.25rem;       /* M3 Large corners */
    --sx-control-height-md: 2.5rem;
    --sx-colorBrandBackground1: #6750a4;
    --sx-font-size-base: 1rem;
    font-family: "Roboto", "Noto Sans SC", sans-serif;
}

/* Dark Theme Overrides */
[data-theme="dark"] {
    --sx-colorNeutralBackground1: #161616;
    --sx-colorNeutralBackground2: #1f1f1f;
    --sx-colorNeutralBackground3: #292929;
    --sx-colorNeutralForeground1: #ffffff;
    --sx-colorNeutralForeground2: #d6d6d6;
    --sx-colorNeutralForeground3: #adadad;
    --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 */
    --sx-colorBrandBackground1: var(--sx-primary-500);
    --sx-colorBrandBackground2: var(--sx-primary-600);
    --sx-colorBrandForeground1: var(--sx-primary-500);

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

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

/* Style Presets */
.sx-style-classic {
    --sx-radius-sm: 0;
    --sx-radius-md: 0.125rem; /* 2px */
    --sx-radius-lg: 0.25rem;  /* 4px */
    --sx-control-height-md: 2rem;
    --sx-spacing-md: 0.5rem;
}

.sx-style-soft {
    --sx-radius-sm: 0.5rem;
    --sx-radius-md: 1rem;
    --sx-radius-lg: 1.5rem;
    --sx-spacing-md: 1rem;
    --sx-control-height-md: 2.5rem;
}

/* Legacy compact style - deprecated, use density scale instead */
/* This class is kept for backward compatibility but will be overridden by density scale */
.sx-style-compact {
    /* Note: Density scale system replaces this. Use --sx-density-scale: 0.8 instead. */
}