:root {
    /* Base Font - Fluent UI v9 Standard */
    --ms-font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", Roboto, sans-serif;

    /* Base Font Size */
    --ms-font-size-xxl: 32px;
    --ms-font-size-xl: 28px;
    --ms-font-size-h1: 24px;
    --ms-font-size-h2: 20px;
    --ms-font-size-h3: 16px;
    --ms-font-size-h4: 14px;
    --ms-font-size-body: 14px;
    --ms-font-size-small: 12px;
    --ms-font-size-caption: 11px;
    --ms-font-size-label: 13px;
    
    /* Base Font Weight */
    --ms-font-weight-bold: 700;
    --ms-font-weight-semi-bold: 600;
    --ms-font-weight-medium: 500;
    --ms-font-weight-regular: 400;
    --ms-font-weight-light: 300;

    /* Base Color (Fluent Neutral) */
    --ms-color-neutral-900: #242424;
    --ms-color-neutral-800: #323130;
    --ms-color-neutral-700: #424242;
    --ms-color-neutral-600: #616161;
    --ms-color-neutral-500: #707070;
    --ms-color-neutral-400: #BDBDBD;
    --ms-color-neutral-300: #D2D0CE;
    --ms-color-neutral-200: #EDEBE9;
    --ms-color-neutral-100: #F3F2F1;
    --ms-color-neutral-050: #FAF9F8;

    --ms-color-scheme: light;

    /* Primary (Communication Blue) */
    --ms-color-primary-strong: #1f4ed8;
    --ms-color-primary: #0078d4;
    --ms-color-primary-dark: #005a9e;
    --ms-color-primary-subtle: #eff6fc;
    --ms-color-primary-light: #c7e0f4;
    --ms-color-primary-lighter: #f5f9fd;

    /* Secondary */
    --ms-color-secondary: #2b579a;
    --ms-color-secondary-dark: #204071;
    --ms-color-secondary-subtle: #e8f1f8;
    --ms-color-secondary-light: #d2e0f0;
    --ms-color-secondary-lighter: #f0f5fa;

    /* Success */
    --ms-color-success-strong: #166534;
    --ms-color-success: #107c10;
    --ms-color-success-dark: #0b6a0b;
    --ms-color-success-subtle: #dff6dd;
    --ms-color-success-light: #c6f0b9;
    --ms-color-success-lighter: #f2fbf2;

    /* Warning */
    --ms-color-warning-strong: #a16207;
    --ms-color-warning: #ffb900;
    --ms-color-warning-dark: #8a6a00;
    --ms-color-warning-subtle: #fff4ce;
    --ms-color-warning-light: #fff0a0;
    --ms-color-warning-lighter: #fffbe6;

    /* Danger */
    --ms-color-danger-strong: #b91c1c;
    --ms-color-danger: #d13438;
    --ms-color-danger-dark: #a4262c;
    --ms-color-danger-subtle: #fde7e9;
    --ms-color-danger-light: #f4cfd3;
    --ms-color-danger-lighter: #fff1f3;

    /* Info */
    --ms-color-info: #0063b1;
    --ms-color-info-dark: #004578;
    --ms-color-info-subtle: #e5f1fb;
    --ms-color-info-light: #c7e0f4;
    --ms-color-info-lighter: #eff6fc;

    /* Basic Color (Fluent Full Palette) */
    --ms-color-red: #e81123;
    --ms-color-orange: #f7630c;
    --ms-color-yellow: #ffb900;
    --ms-color-green: #107c10;
    --ms-color-teal: #038387;
    --ms-color-cyan: #00b7c3;
    --ms-color-blue: #0078d4;
    --ms-color-purple: #5c2d91;
    --ms-color-magenta: #881798;
    --ms-color-pink: #e3008c;

    --ms-color-gray-10: #faf9f8;
    --ms-color-gray-20: #f3f2f1;
    --ms-color-gray-30: #edebe9;
    --ms-color-gray-40: #e1dfdd;
    --ms-color-gray-50: #d2d0ce;
    --ms-color-gray-60: #c8c6c4;
    --ms-color-gray-70: #bebbb8;
    --ms-color-gray-80: #b3b0ad;
    --ms-color-gray-90: #a19f9d;
    --ms-color-gray-100: #979593;
    
    /* Duration */
    --ms-motion-instant: 50ms;
    --ms-motion-fast: 100ms;
    --ms-motion-base: 200ms;
    --ms-motion-slow: 300ms;

    /* Easing (Fluent Standard) */
    --ms-ease-standard: cubic-bezier(0.33, 0, 0.67, 1);
    --ms-ease-decelerate: cubic-bezier(0, 0, 0, 1);
    --ms-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --ms-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Text semantic */
    --ms-color-text-dark: var(--ms-color-neutral-900);
    --ms-color-text-primary: var(--ms-color-neutral-800);
    --ms-color-text-secondary: var(--ms-color-neutral-700);
    --ms-color-text-muted: var(--ms-color-neutral-500);
    --ms-color-text-disabled: var(--ms-color-neutral-400);
    --ms-color-text-inverse: #ffffff;

    /* Background semantic */
    --ms-color-bg-canvas: #ffffff;
    --ms-color-bg-base: #f5f5f5;
    --ms-color-bg-subtle: var(--ms-color-neutral-050);
    --ms-color-bg-hover: #f0f0f0;
    --ms-color-bg-active: #ebebeb;
    --ms-color-bg-disabled: #f3f2f1;

    /* Overlay / Scrim (Fluent Layering) */
    --ms-color-overlay-subtle: rgba(0,0,0,0.04);
    --ms-color-overlay: rgba(0,0,0,0.08);
    --ms-color-overlay-strong: rgba(0,0,0,0.12);
    --ms-color-scrim: rgba(0,0,0,0.32);

    /* Border semantic */
    --ms-color-border-default: #d2d0ce;
    --ms-color-border-subtle: #edebe9;
    --ms-color-border-focus: var(--ms-color-primary);
    --ms-color-border-error: var(--ms-color-danger);

    /* Primary interaction */
    --ms-color-primary-hover: #106ebe;
    --ms-color-primary-active: #005a9e;
    --ms-color-primary-disabled: #f3f2f1;

    /* Neutral interaction */
    --ms-color-neutral-hover: #f0f0f0;
    --ms-color-neutral-active: #ebebeb;

    /* Spacing (Fluent 4px Grid) */
    --ms-space-2xs: 2px;
    --ms-space-xs: 4px;
    --ms-space-sm: 8px;
    --ms-space-md: 12px;
    --ms-space-lg: 16px;
    --ms-space-xl: 20px;
    --ms-space-2xl: 24px;
    --ms-space-3xl: 32px;
    --ms-space-4xl: 40px;
    --ms-space-5xl: 48px;
    --ms-space-6xl: 64px;

    /* Radius (Windows 11 Geometry) */
    --ms-radius-none: 0;
    --ms-radius-sm: 2px;
    --ms-radius-md: 4px;   /* Standard: Buttons, Inputs */
    --ms-radius-lg: 8px;   /* Medium: Cards, Tables, Popovers */
    --ms-radius-xl: 12px;  /* Large: Dialogs */
    --ms-radius-pill: 9999px;

    /* Elevation (Fluent Layered Shadows) */
    --ms-shadow-2: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
    --ms-shadow-4: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
    --ms-shadow-8: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
    --ms-shadow-16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);

    /* Z-index */
    --ms-z-base: 1;
    --ms-z-dropdown: 100;
    --ms-z-sticky: 200;
    --ms-z-modal: 1000;
    --ms-z-toast: 1100;

    /* Line height */
    --ms-line-height-tight: 1.25;
    --ms-line-height-normal: 1.5;
    --ms-line-height-loose: 1.75;

    --ms-letter-spacing-tight: -0.01em;
    --ms-letter-spacing-normal: 0;

    /* Opacity */
    --ms-opacity-disabled: 0.38;
    --ms-opacity-muted: 0.60;
    --ms-opacity-overlay: 0.8;
    --ms-opacity-hover: 0.96;
    --ms-opacity-active: 0.92;

    /* Focus Ring */
    --ms-focus-ring-width: 2px;
    --ms-focus-ring-offset: 2px;
    --ms-focus-ring-color: var(--ms-color-primary);

    /* Motion Distance */
    --ms-motion-distance-sm: 4px;
    --ms-motion-distance-md: 8px;
    --ms-motion-distance-lg: 16px;

    /* Breakpoint */
    --ms-breakpoint-sm: 640px;
    --ms-breakpoint-md: 768px;
    --ms-breakpoint-lg: 1024px;
    --ms-breakpoint-xl: 1280px;
}