// Fluent 2 Design System for Ziya Trading Platform
// Based on Microsoft Fluent 2 Design Language
// https://fluent2.microsoft.design/

// Complete Fluent UI Color System - All Themes Support
// Theme mode enumeration
export enum ColorMode { light, dark, team-light, team-dark }

export global FluentColors {
    // Current theme mode
    in-out property <ColorMode> current-mode: ColorMode.light;
    
    // Theme switching callback
    callback switch-theme(ColorMode);
    
    // ===== LIGHT THEME COLORS =====
    
    // Neutral Colors - Light
    out property <color> neutral-foreground-1-light: #242424;
    out property <color> neutral-foreground-2-light: #424242;
    out property <color> neutral-foreground-3-light: #616161;
    out property <color> neutral-foreground-4-light: #757575;
    out property <color> neutral-foreground-disabled-light: #bdbdbd;
    out property <color> neutral-foreground-inverted-light: #ffffff;
    out property <color> neutral-foreground-inverted-2-light: #f5f5f5;
    out property <color> neutral-foreground-on-brand-light: #ffffff;
    out property <color> neutral-foreground-static-inverted-light: #ffffff;
    out property <color> neutral-foreground-inverted-disabled-light: #ffffff;
    
    // Interactive states - Light theme
    out property <color> neutral-foreground-1-hover-light: #424242;
    out property <color> neutral-foreground-1-pressed-light: #242424;
    out property <color> neutral-foreground-2-hover-light: #616161;
    out property <color> neutral-foreground-2-pressed-light: #424242;
    out property <color> neutral-foreground-2-brand-hover-light: #0078d4;
    out property <color> neutral-foreground-2-brand-pressed-light: #005a9e;
    out property <color> neutral-foreground-2-brand-selected-light: #0078d4;
    
    // Link colors - Light theme
    out property <color> neutral-foreground-link-light: #0078d4;
    out property <color> neutral-foreground-link-hover-light: #106ebe;
    out property <color> neutral-foreground-link-pressed-light: #005a9e;
    out property <color> neutral-foreground-link-selected-light: #0078d4;
    
    out property <color> neutral-background-1-light: #ffffff;
    out property <color> neutral-background-2-light: #fafafa;
    out property <color> neutral-background-3-light: #f5f5f5;
    out property <color> neutral-background-4-light: #f0f0f0;
    out property <color> neutral-background-5-light: #ebebeb;
    out property <color> neutral-background-6-light: #e1e1e1;
    out property <color> neutral-background-inverted-light: #292929;
    out property <color> neutral-background-static-light: #f0f0f0;
    out property <color> neutral-background-alpha-light: #ffffff;
    out property <color> neutral-background-alpha-2-light: #ffffff;
    
    // Background interactive states - Light theme
    out property <color> neutral-background-1-hover-light: #f5f5f5;
    out property <color> neutral-background-1-pressed-light: #f0f0f0;
    out property <color> neutral-background-1-selected-light: #ebebeb;
    out property <color> neutral-background-2-hover-light: #f0f0f0;
    out property <color> neutral-background-2-pressed-light: #ebebeb;
    out property <color> neutral-background-2-selected-light: #e1e1e1;
    out property <color> neutral-background-3-hover-light: #ebebeb;
    out property <color> neutral-background-3-pressed-light: #e1e1e1;
    out property <color> neutral-background-3-selected-light: #c7c7c7;
    
    out property <color> neutral-stroke-1-light: #e1e1e1;
    out property <color> neutral-stroke-2-light: #c7c7c7;
    out property <color> neutral-stroke-3-light: #b3b3b3;
    out property <color> neutral-stroke-accessible-light: #616161;
    out property <color> neutral-stroke-focus-1-light: #ffffff;
    out property <color> neutral-stroke-focus-2-light: #000000;
    out property <color> neutral-stroke-disabled-light: #e1e1e1;
    
    // Stroke interactive states - Light theme
    out property <color> neutral-stroke-1-hover-light: #c7c7c7;
    out property <color> neutral-stroke-1-pressed-light: #b3b3b3;
    out property <color> neutral-stroke-1-selected-light: #b3b3b3;
    out property <color> neutral-stroke-2-hover-light: #b3b3b3;
    out property <color> neutral-stroke-2-pressed-light: #9e9e9e;
    
    // ===== DARK THEME COLORS =====
    
    // Neutral Colors - Dark
    out property <color> neutral-foreground-1-dark: #ffffff;
    out property <color> neutral-foreground-2-dark: #f5f5f5;
    out property <color> neutral-foreground-3-dark: #ebebeb;
    out property <color> neutral-foreground-4-dark: #cccccc;
    out property <color> neutral-foreground-disabled-dark: #858585;
    out property <color> neutral-foreground-inverted-dark: #242424;
    out property <color> neutral-foreground-inverted-2-dark: #292929;
    out property <color> neutral-foreground-on-brand-dark: #ffffff;
    out property <color> neutral-foreground-static-inverted-dark: #ffffff;
    out property <color> neutral-foreground-inverted-disabled-dark: #858585;
    
    // Interactive states - Dark theme
    out property <color> neutral-foreground-1-hover-dark: #f5f5f5;
    out property <color> neutral-foreground-1-pressed-dark: #ffffff;
    out property <color> neutral-foreground-2-hover-dark: #ebebeb;
    out property <color> neutral-foreground-2-pressed-dark: #f5f5f5;
    out property <color> neutral-foreground-2-brand-hover-dark: #62abf5;
    out property <color> neutral-foreground-2-brand-pressed-dark: #77b7f7;
    out property <color> neutral-foreground-2-brand-selected-dark: #479ef5;
    
    // Link colors - Dark theme
    out property <color> neutral-foreground-link-dark: #479ef5;
    out property <color> neutral-foreground-link-hover-dark: #62abf5;
    out property <color> neutral-foreground-link-pressed-dark: #77b7f7;
    out property <color> neutral-foreground-link-selected-dark: #479ef5;
    
    out property <color> neutral-background-1-dark: #1c1c1c;
    out property <color> neutral-background-2-dark: #242424;
    out property <color> neutral-background-3-dark: #292929;
    out property <color> neutral-background-4-dark: #333333;
    out property <color> neutral-background-5-dark: #3d3d3d;
    out property <color> neutral-background-6-dark: #474747;
    out property <color> neutral-background-inverted-dark: #ffffff;
    out property <color> neutral-background-static-dark: #333333;
    out property <color> neutral-background-alpha-dark: #1c1c1c;
    out property <color> neutral-background-alpha-2-dark: #1c1c1c;
    
    // Background interactive states - Dark theme
    out property <color> neutral-background-1-hover-dark: #242424;
    out property <color> neutral-background-1-pressed-dark: #292929;
    out property <color> neutral-background-1-selected-dark: #333333;
    out property <color> neutral-background-2-hover-dark: #292929;
    out property <color> neutral-background-2-pressed-dark: #333333;
    out property <color> neutral-background-2-selected-dark: #3d3d3d;
    out property <color> neutral-background-3-hover-dark: #333333;
    out property <color> neutral-background-3-pressed-dark: #3d3d3d;
    out property <color> neutral-background-3-selected-dark: #474747;
    
    out property <color> neutral-stroke-1-dark: #3d3d3d;
    out property <color> neutral-stroke-2-dark: #525252;
    out property <color> neutral-stroke-3-dark: #666666;
    out property <color> neutral-stroke-accessible-dark: #cccccc;
    out property <color> neutral-stroke-focus-1-dark: #ffffff;
    out property <color> neutral-stroke-focus-2-dark: #000000;
    out property <color> neutral-stroke-disabled-dark: #3d3d3d;
    
    // Stroke interactive states - Dark theme
    out property <color> neutral-stroke-1-hover-dark: #525252;
    out property <color> neutral-stroke-1-pressed-dark: #666666;
    out property <color> neutral-stroke-1-selected-dark: #666666;
    out property <color> neutral-stroke-2-hover-dark: #666666;
    out property <color> neutral-stroke-2-pressed-dark: #757575;
    
    // ===== TEAM LIGHT THEME COLORS =====
    
    // Neutral Colors - Team Light
    out property <color> neutral-foreground-1-team-light: #242424;
    out property <color> neutral-foreground-2-team-light: #424242;
    out property <color> neutral-foreground-3-team-light: #616161;
    out property <color> neutral-foreground-4-team-light: #757575;
    out property <color> neutral-foreground-disabled-team-light: #bdbdbd;
    out property <color> neutral-foreground-inverted-team-light: #ffffff;
    out property <color> neutral-foreground-inverted-2-team-light: #f5f5f5;
    out property <color> neutral-foreground-on-brand-team-light: #ffffff;
    out property <color> neutral-foreground-static-inverted-team-light: #ffffff;
    out property <color> neutral-foreground-inverted-disabled-team-light: #ffffff;
    
    // Interactive states - Team Light theme
    out property <color> neutral-foreground-1-hover-team-light: #424242;
    out property <color> neutral-foreground-1-pressed-team-light: #242424;
    out property <color> neutral-foreground-2-hover-team-light: #616161;
    out property <color> neutral-foreground-2-pressed-team-light: #424242;
    out property <color> neutral-foreground-2-brand-hover-team-light: #585a96;
    out property <color> neutral-foreground-2-brand-pressed-team-light: #4c4e85;
    out property <color> neutral-foreground-2-brand-selected-team-light: #6264a7;
    
    // Link colors - Team Light theme
    out property <color> neutral-foreground-link-team-light: #6264a7;
    out property <color> neutral-foreground-link-hover-team-light: #585a96;
    out property <color> neutral-foreground-link-pressed-team-light: #4c4e85;
    out property <color> neutral-foreground-link-selected-team-light: #6264a7;
    
    out property <color> neutral-background-1-team-light: #ffffff;
    out property <color> neutral-background-2-team-light: #f8f8f8;
    out property <color> neutral-background-3-team-light: #f3f2f1;
    out property <color> neutral-background-4-team-light: #edebe9;
    out property <color> neutral-background-5-team-light: #e1dfdd;
    out property <color> neutral-background-6-team-light: #d2d0ce;
    out property <color> neutral-background-inverted-team-light: #292929;
    out property <color> neutral-background-static-team-light: #edebe9;
    out property <color> neutral-background-alpha-team-light: #ffffff;
    out property <color> neutral-background-alpha-2-team-light: #ffffff;
    
    // Background interactive states - Team Light theme
    out property <color> neutral-background-1-hover-team-light: #f8f8f8;
    out property <color> neutral-background-1-pressed-team-light: #f3f2f1;
    out property <color> neutral-background-1-selected-team-light: #edebe9;
    out property <color> neutral-background-2-hover-team-light: #f3f2f1;
    out property <color> neutral-background-2-pressed-team-light: #edebe9;
    out property <color> neutral-background-2-selected-team-light: #e1dfdd;
    out property <color> neutral-background-3-hover-team-light: #edebe9;
    out property <color> neutral-background-3-pressed-team-light: #e1dfdd;
    out property <color> neutral-background-3-selected-team-light: #d2d0ce;
    
    out property <color> neutral-stroke-1-team-light: #d2d0ce;
    out property <color> neutral-stroke-2-team-light: #c8c6c4;
    out property <color> neutral-stroke-3-team-light: #b3b0ad;
    out property <color> neutral-stroke-accessible-team-light: #605e5c;
    out property <color> neutral-stroke-focus-1-team-light: #ffffff;
    out property <color> neutral-stroke-focus-2-team-light: #000000;
    out property <color> neutral-stroke-disabled-team-light: #d2d0ce;
    
    // Stroke interactive states - Team Light theme
    out property <color> neutral-stroke-1-hover-team-light: #c8c6c4;
    out property <color> neutral-stroke-1-pressed-team-light: #b3b0ad;
    out property <color> neutral-stroke-1-selected-team-light: #b3b0ad;
    out property <color> neutral-stroke-2-hover-team-light: #b3b0ad;
    out property <color> neutral-stroke-2-pressed-team-light: #a19f9d;
    
    // ===== TEAM DARK THEME COLORS =====
    
    // Neutral Colors - Team Dark  
    out property <color> neutral-foreground-1-team-dark: #ffffff;
    out property <color> neutral-foreground-2-team-dark: #f3f2f1;
    out property <color> neutral-foreground-3-team-dark: #edebe9;
    out property <color> neutral-foreground-4-team-dark: #d2d0ce;
    out property <color> neutral-foreground-disabled-team-dark: #8a8886;
    out property <color> neutral-foreground-inverted-team-dark: #242424;
    out property <color> neutral-foreground-inverted-2-team-dark: #292929;
    out property <color> neutral-foreground-on-brand-team-dark: #ffffff;
    out property <color> neutral-foreground-static-inverted-team-dark: #ffffff;
    out property <color> neutral-foreground-inverted-disabled-team-dark: #8a8886;
    
    // Interactive states - Team Dark theme
    out property <color> neutral-foreground-1-hover-team-dark: #f3f2f1;
    out property <color> neutral-foreground-1-pressed-team-dark: #ffffff;
    out property <color> neutral-foreground-2-hover-team-dark: #edebe9;
    out property <color> neutral-foreground-2-pressed-team-dark: #f3f2f1;
    out property <color> neutral-foreground-2-brand-hover-team-dark: #9a9bd2;
    out property <color> neutral-foreground-2-brand-pressed-team-dark: #a8a9db;
    out property <color> neutral-foreground-2-brand-selected-team-dark: #8b8cc8;
    
    // Link colors - Team Dark theme
    out property <color> neutral-foreground-link-team-dark: #8b8cc8;
    out property <color> neutral-foreground-link-hover-team-dark: #9a9bd2;
    out property <color> neutral-foreground-link-pressed-team-dark: #a8a9db;
    out property <color> neutral-foreground-link-selected-team-dark: #8b8cc8;
    
    out property <color> neutral-background-1-team-dark: #252423;
    out property <color> neutral-background-2-team-dark: #2d2c2b;
    out property <color> neutral-background-3-team-dark: #323130;
    out property <color> neutral-background-4-team-dark: #3b3a39;
    out property <color> neutral-background-5-team-dark: #484644;
    out property <color> neutral-background-6-team-dark: #605e5c;
    out property <color> neutral-background-inverted-team-dark: #ffffff;
    out property <color> neutral-background-static-team-dark: #3b3a39;
    out property <color> neutral-background-alpha-team-dark: #252423;
    out property <color> neutral-background-alpha-2-team-dark: #252423;
    
    // Background interactive states - Team Dark theme
    out property <color> neutral-background-1-hover-team-dark: #2d2c2b;
    out property <color> neutral-background-1-pressed-team-dark: #323130;
    out property <color> neutral-background-1-selected-team-dark: #3b3a39;
    out property <color> neutral-background-2-hover-team-dark: #323130;
    out property <color> neutral-background-2-pressed-team-dark: #3b3a39;
    out property <color> neutral-background-2-selected-team-dark: #484644;
    out property <color> neutral-background-3-hover-team-dark: #3b3a39;
    out property <color> neutral-background-3-pressed-team-dark: #484644;
    out property <color> neutral-background-3-selected-team-dark: #605e5c;
    
    out property <color> neutral-stroke-1-team-dark: #484644;
    out property <color> neutral-stroke-2-team-dark: #605e5c;
    out property <color> neutral-stroke-3-team-dark: #797775;
    out property <color> neutral-stroke-accessible-team-dark: #d2d0ce;
    out property <color> neutral-stroke-focus-1-team-dark: #ffffff;
    out property <color> neutral-stroke-focus-2-team-dark: #000000;
    out property <color> neutral-stroke-disabled-team-dark: #484644;
    
    // Stroke interactive states - Team Dark theme
    out property <color> neutral-stroke-1-hover-team-dark: #605e5c;
    out property <color> neutral-stroke-1-pressed-team-dark: #797775;
    out property <color> neutral-stroke-1-selected-team-dark: #797775;
    out property <color> neutral-stroke-2-hover-team-dark: #797775;
    out property <color> neutral-stroke-2-pressed-team-dark: #8a8886;
    
    // ===== BRAND COLORS (All Themes) =====
    
    // Brand Colors - Light
    out property <color> brand-background-1-light: #0078d4;
    out property <color> brand-background-2-light: #106ebe;
    out property <color> brand-background-3-light: #005a9e;
    out property <color> brand-foreground-1-light: #ffffff;
    out property <color> brand-foreground-2-light: #f3f2f1;
    out property <color> brand-stroke-1-light: #0078d4;
    out property <color> brand-stroke-2-light: #106ebe;
    
    // Brand interactive states - Light theme
    out property <color> brand-background-1-hover-light: #106ebe;
    out property <color> brand-background-1-pressed-light: #005a9e;
    out property <color> brand-background-1-selected-light: #0078d4;
    out property <color> brand-background-2-hover-light: #005a9e;
    out property <color> brand-background-2-pressed-light: #004578;
    out property <color> brand-stroke-1-hover-light: #106ebe;
    out property <color> brand-stroke-1-pressed-light: #005a9e;
    
    // Brand Colors - Dark
    out property <color> brand-background-1-dark: #479ef5;
    out property <color> brand-background-2-dark: #62abf5;
    out property <color> brand-background-3-dark: #77b7f7;
    out property <color> brand-foreground-1-dark: #ffffff;
    out property <color> brand-foreground-2-dark: #f3f2f1;
    out property <color> brand-stroke-1-dark: #479ef5;
    out property <color> brand-stroke-2-dark: #62abf5;
    
    // Brand interactive states - Dark theme
    out property <color> brand-background-1-hover-dark: #62abf5;
    out property <color> brand-background-1-pressed-dark: #77b7f7;
    out property <color> brand-background-1-selected-dark: #479ef5;
    out property <color> brand-background-2-hover-dark: #77b7f7;
    out property <color> brand-background-2-pressed-dark: #8cc8f8;
    out property <color> brand-stroke-1-hover-dark: #62abf5;
    out property <color> brand-stroke-1-pressed-dark: #77b7f7;
    
    // Brand Colors - Team Light
    out property <color> brand-background-1-team-light: #6264a7;
    out property <color> brand-background-2-team-light: #585a96;
    out property <color> brand-background-3-team-light: #4c4e85;
    out property <color> brand-foreground-1-team-light: #ffffff;
    out property <color> brand-foreground-2-team-light: #f3f2f1;
    out property <color> brand-stroke-1-team-light: #6264a7;
    out property <color> brand-stroke-2-team-light: #585a96;
    
    // Brand interactive states - Team Light theme
    out property <color> brand-background-1-hover-team-light: #585a96;
    out property <color> brand-background-1-pressed-team-light: #4c4e85;
    out property <color> brand-background-1-selected-team-light: #6264a7;
    out property <color> brand-background-2-hover-team-light: #4c4e85;
    out property <color> brand-background-2-pressed-team-light: #414374;
    out property <color> brand-stroke-1-hover-team-light: #585a96;
    out property <color> brand-stroke-1-pressed-team-light: #4c4e85;
    
    // Brand Colors - Team Dark
    out property <color> brand-background-1-team-dark: #8b8cc8;
    out property <color> brand-background-2-team-dark: #9a9bd2;
    out property <color> brand-background-3-team-dark: #a8a9db;
    out property <color> brand-foreground-1-team-dark: #ffffff;
    out property <color> brand-foreground-2-team-dark: #f3f2f1;
    out property <color> brand-stroke-1-team-dark: #8b8cc8;
    out property <color> brand-stroke-2-team-dark: #9a9bd2;
    
    // Brand interactive states - Team Dark theme
    out property <color> brand-background-1-hover-team-dark: #9a9bd2;
    out property <color> brand-background-1-pressed-team-dark: #a8a9db;
    out property <color> brand-background-1-selected-team-dark: #8b8cc8;
    out property <color> brand-background-2-hover-team-dark: #a8a9db;
    out property <color> brand-background-2-pressed-team-dark: #b6b7e4;
    out property <color> brand-stroke-1-hover-team-dark: #9a9bd2;
    out property <color> brand-stroke-1-pressed-team-dark: #a8a9db;
    
    // ===== SEMANTIC COLORS (All Themes) =====
    
    // Success Colors - All Themes
    out property <color> success-background-1-light: #107c10;
    out property <color> success-background-2-light: #0e6e0e;
    out property <color> success-foreground-1-light: #ffffff;
    out property <color> success-stroke-1-light: #107c10;
    
    out property <color> success-background-1-dark: #54b054;
    out property <color> success-background-2-dark: #6bb26b;
    out property <color> success-foreground-1-dark: #ffffff;
    out property <color> success-stroke-1-dark: #54b054;
    
    out property <color> success-background-1-team-light: #237b4b;
    out property <color> success-background-2-team-light: #1e6f42;
    out property <color> success-foreground-1-team-light: #ffffff;
    out property <color> success-stroke-1-team-light: #237b4b;
    
    out property <color> success-background-1-team-dark: #5bb85b;
    out property <color> success-background-2-team-dark: #6fc46f;
    out property <color> success-foreground-1-team-dark: #ffffff;
    out property <color> success-stroke-1-team-dark: #5bb85b;
    
    // Warning Colors - All Themes
    out property <color> warning-background-1-light: #fde047;
    out property <color> warning-background-2-light: #facc15;
    out property <color> warning-foreground-1-light: #323130;
    out property <color> warning-stroke-1-light: #f7c52d;
    
    out property <color> warning-background-1-dark: #ffb900;
    out property <color> warning-background-2-dark: #ffc328;
    out property <color> warning-foreground-1-dark: #323130;
    out property <color> warning-stroke-1-dark: #ffb900;
    
    out property <color> warning-background-1-team-light: #c19c00;
    out property <color> warning-background-2-team-light: #a18600;
    out property <color> warning-foreground-1-team-light: #ffffff;
    out property <color> warning-stroke-1-team-light: #c19c00;
    
    out property <color> warning-background-1-team-dark: #ffd43a;
    out property <color> warning-background-2-team-dark: #ffda56;
    out property <color> warning-foreground-1-team-dark: #323130;
    out property <color> warning-stroke-1-team-dark: #ffd43a;
    
    // Critical/Error Colors - All Themes
    out property <color> critical-background-1-light: #d13438;
    out property <color> critical-background-2-light: #b91c1c;
    out property <color> critical-foreground-1-light: #ffffff;
    out property <color> critical-stroke-1-light: #d13438;
    
    out property <color> critical-background-1-dark: #ff6b6b;
    out property <color> critical-background-2-dark: #ff8080;
    out property <color> critical-foreground-1-dark: #ffffff;
    out property <color> critical-stroke-1-dark: #ff6b6b;
    
    out property <color> critical-background-1-team-light: #c50e1f;
    out property <color> critical-background-2-team-light: #a80e1b;
    out property <color> critical-foreground-1-team-light: #ffffff;
    out property <color> critical-stroke-1-team-light: #c50e1f;
    
    out property <color> critical-background-1-team-dark: #ff8080;
    out property <color> critical-background-2-team-dark: #ff9494;
    out property <color> critical-foreground-1-team-dark: #ffffff;
    out property <color> critical-stroke-1-team-dark: #ff8080;
    
    // ===== CURRENT THEME ACCESSORS =====
    // These automatically switch based on current-mode
    
    // Current Neutral Colors
    out property <color> neutral-foreground-1: current-mode == ColorMode.light ? neutral-foreground-1-light : 
                                               current-mode == ColorMode.dark ? neutral-foreground-1-dark :
                                               current-mode == ColorMode.team-light ? neutral-foreground-1-team-light : neutral-foreground-1-team-dark;
                                               
    out property <color> neutral-foreground-2: current-mode == ColorMode.light ? neutral-foreground-2-light : 
                                               current-mode == ColorMode.dark ? neutral-foreground-2-dark :
                                               current-mode == ColorMode.team-light ? neutral-foreground-2-team-light : neutral-foreground-2-team-dark;
                                               
    out property <color> neutral-foreground-3: current-mode == ColorMode.light ? neutral-foreground-3-light : 
                                               current-mode == ColorMode.dark ? neutral-foreground-3-dark :
                                               current-mode == ColorMode.team-light ? neutral-foreground-3-team-light : neutral-foreground-3-team-dark;
                                               
    out property <color> neutral-foreground-disabled: current-mode == ColorMode.light ? neutral-foreground-disabled-light : 
                                                      current-mode == ColorMode.dark ? neutral-foreground-disabled-dark :
                                                      current-mode == ColorMode.team-light ? neutral-foreground-disabled-team-light : neutral-foreground-disabled-team-dark;
    
    out property <color> neutral-background-1: current-mode == ColorMode.light ? neutral-background-1-light : 
                                               current-mode == ColorMode.dark ? neutral-background-1-dark :
                                               current-mode == ColorMode.team-light ? neutral-background-1-team-light : neutral-background-1-team-dark;
                                               
    out property <color> neutral-background-2: current-mode == ColorMode.light ? neutral-background-2-light : 
                                               current-mode == ColorMode.dark ? neutral-background-2-dark :
                                               current-mode == ColorMode.team-light ? neutral-background-2-team-light : neutral-background-2-team-dark;
                                               
    out property <color> neutral-background-3: current-mode == ColorMode.light ? neutral-background-3-light : 
                                               current-mode == ColorMode.dark ? neutral-background-3-dark :
                                               current-mode == ColorMode.team-light ? neutral-background-3-team-light : neutral-background-3-team-dark;
                                               
    out property <color> neutral-background-4: current-mode == ColorMode.light ? neutral-background-4-light : 
                                               current-mode == ColorMode.dark ? neutral-background-4-dark :
                                               current-mode == ColorMode.team-light ? neutral-background-4-team-light : neutral-background-4-team-dark;
    
    out property <color> neutral-stroke-1: current-mode == ColorMode.light ? neutral-stroke-1-light : 
                                           current-mode == ColorMode.dark ? neutral-stroke-1-dark :
                                           current-mode == ColorMode.team-light ? neutral-stroke-1-team-light : neutral-stroke-1-team-dark;
                                           
    out property <color> neutral-stroke-2: current-mode == ColorMode.light ? neutral-stroke-2-light : 
                                           current-mode == ColorMode.dark ? neutral-stroke-2-dark :
                                           current-mode == ColorMode.team-light ? neutral-stroke-2-team-light : neutral-stroke-2-team-dark;
                                           
    out property <color> neutral-stroke-accessible: current-mode == ColorMode.light ? neutral-stroke-accessible-light : 
                                                    current-mode == ColorMode.dark ? neutral-stroke-accessible-dark :
                                                    current-mode == ColorMode.team-light ? neutral-stroke-accessible-team-light : neutral-stroke-accessible-team-dark;
    
    // Current Interactive States
    out property <color> neutral-foreground-1-hover: current-mode == ColorMode.light ? neutral-foreground-1-hover-light : 
                                                     current-mode == ColorMode.dark ? neutral-foreground-1-hover-dark :
                                                     current-mode == ColorMode.team-light ? neutral-foreground-1-hover-team-light : neutral-foreground-1-hover-team-dark;
                                                     
    out property <color> neutral-foreground-2-brand-hover: current-mode == ColorMode.light ? neutral-foreground-2-brand-hover-light : 
                                                          current-mode == ColorMode.dark ? neutral-foreground-2-brand-hover-dark :
                                                          current-mode == ColorMode.team-light ? neutral-foreground-2-brand-hover-team-light : neutral-foreground-2-brand-hover-team-dark;
    
    // Current Link Colors
    out property <color> neutral-foreground-link: current-mode == ColorMode.light ? neutral-foreground-link-light : 
                                                  current-mode == ColorMode.dark ? neutral-foreground-link-dark :
                                                  current-mode == ColorMode.team-light ? neutral-foreground-link-team-light : neutral-foreground-link-team-dark;
                                                  
    out property <color> neutral-foreground-link-hover: current-mode == ColorMode.light ? neutral-foreground-link-hover-light : 
                                                        current-mode == ColorMode.dark ? neutral-foreground-link-hover-dark :
                                                        current-mode == ColorMode.team-light ? neutral-foreground-link-hover-team-light : neutral-foreground-link-hover-team-dark;
                                                        
    out property <color> neutral-foreground-link-pressed: current-mode == ColorMode.light ? neutral-foreground-link-pressed-light : 
                                                          current-mode == ColorMode.dark ? neutral-foreground-link-pressed-dark :
                                                          current-mode == ColorMode.team-light ? neutral-foreground-link-pressed-team-light : neutral-foreground-link-pressed-team-dark;
    
    // Current Background Interactive States
    out property <color> neutral-background-1-hover: current-mode == ColorMode.light ? neutral-background-1-hover-light : 
                                                     current-mode == ColorMode.dark ? neutral-background-1-hover-dark :
                                                     current-mode == ColorMode.team-light ? neutral-background-1-hover-team-light : neutral-background-1-hover-team-dark;
                                                     
    out property <color> neutral-background-1-pressed: current-mode == ColorMode.light ? neutral-background-1-pressed-light : 
                                                       current-mode == ColorMode.dark ? neutral-background-1-pressed-dark :
                                                       current-mode == ColorMode.team-light ? neutral-background-1-pressed-team-light : neutral-background-1-pressed-team-dark;
    
    // Current Stroke Interactive States
    out property <color> neutral-stroke-1-hover: current-mode == ColorMode.light ? neutral-stroke-1-hover-light : 
                                                 current-mode == ColorMode.dark ? neutral-stroke-1-hover-dark :
                                                 current-mode == ColorMode.team-light ? neutral-stroke-1-hover-team-light : neutral-stroke-1-hover-team-dark;
                                                 
    out property <color> neutral-stroke-1-pressed: current-mode == ColorMode.light ? neutral-stroke-1-pressed-light : 
                                                   current-mode == ColorMode.dark ? neutral-stroke-1-pressed-dark :
                                                   current-mode == ColorMode.team-light ? neutral-stroke-1-pressed-team-light : neutral-stroke-1-pressed-team-dark;
    
    // Current Brand Colors
    out property <color> brand-background-1: current-mode == ColorMode.light ? brand-background-1-light : 
                                             current-mode == ColorMode.dark ? brand-background-1-dark :
                                             current-mode == ColorMode.team-light ? brand-background-1-team-light : brand-background-1-team-dark;
                                             
    out property <color> brand-background-2: current-mode == ColorMode.light ? brand-background-2-light : 
                                             current-mode == ColorMode.dark ? brand-background-2-dark :
                                             current-mode == ColorMode.team-light ? brand-background-2-team-light : brand-background-2-team-dark;
                                             
    out property <color> brand-foreground-1: current-mode == ColorMode.light ? brand-foreground-1-light : 
                                             current-mode == ColorMode.dark ? brand-foreground-1-dark :
                                             current-mode == ColorMode.team-light ? brand-foreground-1-team-light : brand-foreground-1-team-dark;
    
    // Current Brand Interactive States
    out property <color> brand-background-1-hover: current-mode == ColorMode.light ? brand-background-1-hover-light : 
                                                   current-mode == ColorMode.dark ? brand-background-1-hover-dark :
                                                   current-mode == ColorMode.team-light ? brand-background-1-hover-team-light : brand-background-1-hover-team-dark;
                                                   
    out property <color> brand-background-1-pressed: current-mode == ColorMode.light ? brand-background-1-pressed-light : 
                                                     current-mode == ColorMode.dark ? brand-background-1-pressed-dark :
                                                     current-mode == ColorMode.team-light ? brand-background-1-pressed-team-light : brand-background-1-pressed-team-dark;
    
    // Current Semantic Colors
    out property <color> success-background-1: current-mode == ColorMode.light ? success-background-1-light : 
                                               current-mode == ColorMode.dark ? success-background-1-dark :
                                               current-mode == ColorMode.team-light ? success-background-1-team-light : success-background-1-team-dark;
                                               
    out property <color> warning-background-1: current-mode == ColorMode.light ? warning-background-1-light : 
                                               current-mode == ColorMode.dark ? warning-background-1-dark :
                                               current-mode == ColorMode.team-light ? warning-background-1-team-light : warning-background-1-team-dark;
                                               
    out property <color> critical-background-1: current-mode == ColorMode.light ? critical-background-1-light : 
                                                current-mode == ColorMode.dark ? critical-background-1-dark :
                                                current-mode == ColorMode.team-light ? critical-background-1-team-light : critical-background-1-team-dark;
    
    // Legacy compatibility and Trading-specific colors
    out property <color> neutral-foreground-rest: neutral-foreground-1;
    out property <color> profit-green: success-background-1;
    out property <color> loss-red: critical-background-1;
    out property <color> neutral-gray: neutral-foreground-3;
    
    // Accent colors for trading UI
    out property <color> accent-purple: #f000b8;
    out property <color> accent-teal: #37cdbe;
    out property <color> accent-blue: brand-background-1;
}

// Typography System - Official Fluent 2 Typography Tokens
// Based on: https://fluent2.microsoft.design/typography
export global FluentTypography {
    // ===== FLUENT FONT STACKS =====
    // Segoe - unmistakably Microsoft (Primary Web/Windows font stack)
    out property <string> font-family-base: "Segoe UI Variable, Segoe UI, system-ui, sans-serif";
    out property <string> font-family-web: "Segoe UI Variable, Segoe UI, system-ui, sans-serif";
    out property <string> font-family-windows: "Segoe UI Variable, Segoe UI, system-ui, sans-serif";
    
    // Platform-specific native font stacks for cross-platform consistency
    out property <string> font-family-macos: "SF Pro Display, SF Pro Text, system-ui, sans-serif";
    out property <string> font-family-ios: "SF Pro Display, SF Pro Text, system-ui, sans-serif";
    out property <string> font-family-android: "Roboto, system-ui, sans-serif";
    
    // Specialized font families
    out property <string> font-family-monospace: "Cascadia Code, Cascadia Mono, Consolas, Courier New, monospace";
    out property <string> font-family-numeric: "Bahnschrift, Segoe UI Variable, Segoe UI, system-ui, sans-serif";
    
    // ===== FONT WEIGHTS - Fluent 2 Weight Scale =====
    out property <int> font-weight-regular: 400;        // Regular
    out property <int> font-weight-medium: 500;         // Medium (Android)
    out property <int> font-weight-semibold: 600;       // Semibold
    out property <int> font-weight-bold: 700;           // Bold
    
    // ===== WEB TYPE RAMP - Official Fluent 2 Web Typography =====
    // Caption styles
    out property <length> font-size-caption-2: 10px;          // Caption 2
    out property <length> line-height-caption-2: 14px;
    out property <int> font-weight-caption-2: font-weight-regular;
    out property <int> font-weight-caption-2-strong: font-weight-semibold;
    
    out property <length> font-size-caption-1: 12px;          // Caption 1
    out property <length> line-height-caption-1: 16px;
    out property <int> font-weight-caption-1: font-weight-regular;
    out property <int> font-weight-caption-1-strong: font-weight-semibold;
    out property <int> font-weight-caption-1-stronger: font-weight-bold;
    
    // Body styles
    out property <length> font-size-body-1: 14px;             // Body 1 (Default)
    out property <length> line-height-body-1: 20px;
    out property <int> font-weight-body-1: font-weight-regular;
    out property <int> font-weight-body-1-strong: font-weight-semibold;
    out property <int> font-weight-body-1-stronger: font-weight-bold;
    
    // Subtitle styles
    out property <length> font-size-subtitle-2: 16px;         // Subtitle 2
    out property <length> line-height-subtitle-2: 22px;
    out property <int> font-weight-subtitle-2: font-weight-semibold;
    out property <int> font-weight-subtitle-2-stronger: font-weight-bold;
    
    out property <length> font-size-subtitle-1: 20px;         // Subtitle 1
    out property <length> line-height-subtitle-1: 26px;
    out property <int> font-weight-subtitle-1: font-weight-semibold;
    
    // Title styles
    out property <length> font-size-title-3: 24px;            // Title 3
    out property <length> line-height-title-3: 32px;
    out property <int> font-weight-title-3: font-weight-semibold;
    
    out property <length> font-size-title-2: 28px;            // Title 2
    out property <length> line-height-title-2: 36px;
    out property <int> font-weight-title-2: font-weight-semibold;
    
    out property <length> font-size-title-1: 32px;            // Title 1
    out property <length> line-height-title-1: 40px;
    out property <int> font-weight-title-1: font-weight-semibold;
    
    // Large title and display
    out property <length> font-size-large-title: 40px;        // Large Title
    out property <length> line-height-large-title: 52px;
    out property <int> font-weight-large-title: font-weight-semibold;
    
    out property <length> font-size-display: 68px;            // Display
    out property <length> line-height-display: 92px;
    out property <int> font-weight-display: font-weight-semibold;
    
    // ===== WINDOWS TYPE RAMP - Official Fluent 2 Windows Typography =====
    // Windows-specific variants using Segoe UI Variable
    out property <length> font-size-windows-caption: 12px;    // Caption
    out property <length> line-height-windows-caption: 16px;
    out property <int> font-weight-windows-caption: font-weight-regular;
    
    out property <length> font-size-windows-body: 14px;       // Body
    out property <length> line-height-windows-body: 20px;
    out property <int> font-weight-windows-body: font-weight-regular;
    out property <int> font-weight-windows-body-strong: font-weight-semibold;
    
    out property <length> font-size-windows-body-large: 18px; // Body Large
    out property <length> line-height-windows-body-large: 24px;
    out property <int> font-weight-windows-body-large: font-weight-regular;
    
    out property <length> font-size-windows-subtitle: 20px;   // Subtitle
    out property <length> line-height-windows-subtitle: 28px;
    out property <int> font-weight-windows-subtitle: font-weight-semibold;
    
    out property <length> font-size-windows-title: 28px;      // Title
    out property <length> line-height-windows-title: 36px;
    out property <int> font-weight-windows-title: font-weight-semibold;
    
    out property <length> font-size-windows-large-title: 40px; // Large Title
    out property <length> line-height-windows-large-title: 52px;
    out property <int> font-weight-windows-large-title: font-weight-semibold;
    
    out property <length> font-size-windows-display: 68px;    // Display
    out property <length> line-height-windows-display: 92px;
    out property <int> font-weight-windows-display: font-weight-semibold;
    
    // ===== LEGACY NUMERIC TOKENS - For backward compatibility =====
    out property <length> font-size-100: font-size-caption-2;   // 10px
    out property <length> font-size-200: font-size-caption-1;   // 12px
    out property <length> font-size-300: font-size-body-1;      // 14px
    out property <length> font-size-400: font-size-subtitle-2;  // 16px
    out property <length> font-size-500: 18px;                  // Custom
    out property <length> font-size-600: font-size-subtitle-1;  // 20px
    out property <length> font-size-700: font-size-title-3;     // 24px
    out property <length> font-size-800: font-size-title-2;     // 28px
    out property <length> font-size-900: font-size-title-1;     // 32px
    out property <length> font-size-1000: font-size-large-title; // 40px
    out property <length> font-size-1100: 48px;                // Custom Large
    out property <length> font-size-1200: font-size-display;    // 68px
    
    out property <length> line-height-100: line-height-caption-2;  // 14px
    out property <length> line-height-200: line-height-caption-1;  // 16px
    out property <length> line-height-300: line-height-body-1;     // 20px
    out property <length> line-height-400: line-height-subtitle-2; // 22px
    out property <length> line-height-500: 24px;                  // Custom
    out property <length> line-height-600: line-height-subtitle-1; // 26px
    out property <length> line-height-700: line-height-title-3;    // 32px
    out property <length> line-height-800: line-height-title-2;    // 36px
    out property <length> line-height-900: line-height-title-1;    // 40px
    out property <length> line-height-1000: line-height-large-title; // 52px
    out property <length> line-height-1100: 60px;                  // Custom
    out property <length> line-height-1200: line-height-display;    // 92px
    
    // ===== TEXT STYLING UTILITIES =====
    // Letter spacing for fine typography control
    out property <length> letter-spacing-tight: -0.16px;    // For large text
    out property <length> letter-spacing-normal: 0px;       // Standard
    out property <length> letter-spacing-wide: 0.32px;      // For small text
    
    // Text decoration
    out property <string> text-decoration-none: "none";
    out property <string> text-decoration-underline: "underline";
    out property <string> text-decoration-line-through: "line-through";
    
    // Text transform (following Fluent guidance for sentence case)
    out property <string> text-transform-none: "none";
    out property <string> text-transform-uppercase: "uppercase";
    out property <string> text-transform-lowercase: "lowercase";
    out property <string> text-transform-capitalize: "capitalize";
    
    // ===== USAGE EXAMPLES =====
    // Caption 2: font-size: FluentTypography.font-size-caption-2; line-height: FluentTypography.line-height-caption-2; font-weight: FluentTypography.font-weight-caption-2;
    // Body 1: font-size: FluentTypography.font-size-body-1; line-height: FluentTypography.line-height-body-1; font-weight: FluentTypography.font-weight-body-1;
    // Title 1: font-size: FluentTypography.font-size-title-1; line-height: FluentTypography.line-height-title-1; font-weight: FluentTypography.font-weight-title-1;
    // Display: font-size: FluentTypography.font-size-display; line-height: FluentTypography.line-height-display; font-weight: FluentTypography.font-weight-display;
}

// Spacing System - Fluent 2 Spacing Scale
export global FluentSpacing {
    out property <length> space-2: 2px;
    out property <length> space-4: 4px;
    out property <length> space-6: 6px;
    out property <length> space-8: 8px;
    out property <length> space-10: 10px;
    out property <length> space-12: 12px;
    out property <length> space-16: 16px;
    out property <length> space-20: 20px;
    out property <length> space-24: 24px;
    out property <length> space-28: 28px;
    out property <length> space-32: 32px;
    out property <length> space-36: 36px;
    out property <length> space-40: 40px;
    out property <length> space-48: 48px;
    out property <length> space-64: 64px;
    out property <length> space-80: 80px;
    out property <length> space-96: 96px;
    out property <length> space-120: 120px;
}

// Border Radius - Complete Fluent UI Border Radius System
export global FluentRadius {
    // Corner Radius Scale
    out property <length> border-radius-none: 0px;
    out property <length> border-radius-small: 2px;
    out property <length> border-radius-medium: 4px;
    out property <length> border-radius-large: 6px;
    out property <length> border-radius-x-large: 8px;
    out property <length> border-radius-circular: 10000px;
    
    // Legacy support
    out property <length> radius-none: 0px;
    out property <length> radius-small: 2px;
    out property <length> radius-medium: 4px;
    out property <length> radius-large: 6px;
    out property <length> radius-xlarge: 8px;
    out property <length> radius-circular: 10000px;
}

// Shadows - Complete Fluent UI Shadow System
// Based on: https://react.fluentui.dev/?path=/docs/theme-shadows--docs
export global FluentShadows {
    // ===== SHADOW BRAND TOKENS =====
    // These are the primary shadow tokens used throughout Fluent UI
    
    // Shadow 2 - Subtle elevation (tooltips, dropdowns)
    out property <length> shadow-2-x: 0px;
    out property <length> shadow-2-y: 1px;
    out property <length> shadow-2-blur: 2px;
    out property <length> shadow-2-spread: 0px;
    out property <color> shadow-2-color: #00000014;  // 8% opacity black
    
    // Shadow 4 - Low elevation (cards, buttons)
    out property <length> shadow-4-x: 0px;
    out property <length> shadow-4-y: 2px;
    out property <length> shadow-4-blur: 4px;
    out property <length> shadow-4-spread: 0px;
    out property <color> shadow-4-color: #0000001f;  // 12% opacity black
    
    // Shadow 8 - Medium elevation (dialogs, menus)
    out property <length> shadow-8-x: 0px;
    out property <length> shadow-8-y: 4px;
    out property <length> shadow-8-blur: 8px;
    out property <length> shadow-8-spread: 0px;
    out property <color> shadow-8-color: #0000001f;  // 12% opacity black
    
    // Shadow 16 - High elevation (modals, flyouts)
    out property <length> shadow-16-x: 0px;
    out property <length> shadow-16-y: 8px;
    out property <length> shadow-16-blur: 16px;
    out property <length> shadow-16-spread: 0px;
    out property <color> shadow-16-color: #00000024;  // 14% opacity black
    
    // Shadow 28 - Very high elevation (teaching callouts)
    out property <length> shadow-28-x: 0px;
    out property <length> shadow-28-y: 14px;
    out property <length> shadow-28-blur: 28px;
    out property <length> shadow-28-spread: 0px;
    out property <color> shadow-28-color: #00000024;  // 14% opacity black
    
    // Shadow 64 - Maximum elevation (panels, navigation)
    out property <length> shadow-64-x: 0px;
    out property <length> shadow-64-y: 32px;
    out property <length> shadow-64-blur: 64px;
    out property <length> shadow-64-spread: 0px;
    out property <color> shadow-64-color: #00000033;  // 20% opacity black
    
    // ===== THEME-AWARE SHADOW COLORS =====
    // Light theme shadow colors
    out property <color> shadow-light-ambient: #0000000f;      // 6% opacity black
    out property <color> shadow-light-key: #00000014;         // 8% opacity black
    out property <color> shadow-light-ambient-darker: #00000014; // 8% opacity black
    out property <color> shadow-light-key-darker: #0000001f;   // 12% opacity black
    out property <color> shadow-light-ambient-darkest: #0000001f; // 12% opacity black
    out property <color> shadow-light-key-darkest: #00000024;  // 14% opacity black
    
    // Dark theme shadow colors
    out property <color> shadow-dark-ambient: #0000001f;       // 12% opacity black
    out property <color> shadow-dark-key: #00000024;          // 14% opacity black
    out property <color> shadow-dark-ambient-darker: #00000024; // 14% opacity black
    out property <color> shadow-dark-key-darker: #00000033;    // 20% opacity black
    out property <color> shadow-dark-ambient-darkest: #00000033; // 20% opacity black
    out property <color> shadow-dark-key-darkest: #00000047;   // 28% opacity black
    
    // ===== SPECIALIZED SHADOW TOKENS =====
    // Brand shadow (with brand color tint)
    out property <length> shadow-brand-x: 0px;
    out property <length> shadow-brand-y: 2px;
    out property <length> shadow-brand-blur: 8px;
    out property <length> shadow-brand-spread: 0px;
    out property <color> shadow-brand-color: #0078d414;        // Brand blue with 8% opacity
    
    // Inset shadow (for pressed states)
    out property <length> shadow-inset-x: 0px;
    out property <length> shadow-inset-y: 1px;
    out property <length> shadow-inset-blur: 2px;
    out property <length> shadow-inset-spread: 0px;
    out property <color> shadow-inset-color: #0000001f;        // 12% opacity black
    
    // Focus shadow (for accessibility)
    out property <length> shadow-focus-x: 0px;
    out property <length> shadow-focus-y: 0px;
    out property <length> shadow-focus-blur: 0px;
    out property <length> shadow-focus-spread: 2px;
    out property <color> shadow-focus-color: #0078d4;          // Brand blue
    
    // ===== COMPONENT-SPECIFIC SHADOW TOKENS =====
    // Button shadows
    out property <color> shadow-button-rest: shadow-2-color;
    out property <color> shadow-button-hover: shadow-4-color;
    out property <color> shadow-button-pressed: shadow-inset-color;
    
    // Card shadows
    out property <color> shadow-card-rest: shadow-4-color;
    out property <color> shadow-card-hover: shadow-8-color;
    
    // Dialog shadows
    out property <color> shadow-dialog: shadow-64-color;
    
    // Flyout shadows
    out property <color> shadow-flyout: shadow-16-color;
    
    // Tooltip shadows
    out property <color> shadow-tooltip: shadow-8-color;
    
    // ===== LEGACY SHADOW SUPPORT =====
    // Note: shadow-*-blur properties are already defined above in the main shadow tokens
    // They can be used directly for backward compatibility
    
    // ===== SHADOW UTILITY FUNCTIONS =====
    // Helper properties for common shadow combinations
    
    // Subtle shadow (for subtle elevation)
    out property <length> subtle-shadow-x: shadow-2-x;
    out property <length> subtle-shadow-y: shadow-2-y;
    out property <length> subtle-shadow-blur: shadow-2-blur;
    out property <color> subtle-shadow-color: shadow-2-color;
    
    // Default shadow (for standard elevation)
    out property <length> default-shadow-x: shadow-4-x;
    out property <length> default-shadow-y: shadow-4-y;
    out property <length> default-shadow-blur: shadow-4-blur;
    out property <color> default-shadow-color: shadow-4-color;
    
    // Deep shadow (for high elevation)
    out property <length> deep-shadow-x: shadow-16-x;
    out property <length> deep-shadow-y: shadow-16-y;
    out property <length> deep-shadow-blur: shadow-16-blur;
    out property <color> deep-shadow-color: shadow-16-color;
    
    // ===== USAGE NOTES =====
    // To apply shadows in components, use the individual tokens:
    // Example: Rectangle { drop-shadow-offset-x: FluentShadows.shadow-4-x; drop-shadow-offset-y: FluentShadows.shadow-4-y; drop-shadow-blur: FluentShadows.shadow-4-blur; drop-shadow-color: FluentShadows.shadow-4-color; }
    // For focus states: Rectangle { border-width: FluentShadows.shadow-focus-spread; border-color: FluentShadows.shadow-focus-color; }
}

// Component Tokens - Fluent 2 Component Specifications
export global FluentComponents {
    // Button
    out property <length> button-height-small: 24px;
    out property <length> button-height-medium: 32px;
    out property <length> button-height-large: 40px;
    out property <length> button-padding-horizontal: 16px;
    out property <length> button-border-radius: FluentRadius.border-radius-medium;
    
    // Input
    out property <length> input-height: 32px;
    out property <length> input-padding-horizontal: 12px;
    out property <length> input-border-radius: FluentRadius.border-radius-medium;
    out property <length> input-border-width: 1px;
    
    // Card
    out property <length> card-padding: FluentSpacing.space-16;
    out property <length> card-border-radius: FluentRadius.border-radius-large;
    out property <length> card-border-width: 1px;
    
    // Navigation
    out property <length> nav-item-height: 40px;
    out property <length> nav-item-padding: FluentSpacing.space-12;
    out property <length> nav-item-border-radius: FluentRadius.border-radius-medium;
    
    // Title Bar
    out property <length> titlebar-height: 32px;
    out property <length> titlebar-button-width: 46px;
    
    // Sidebar
    out property <length> sidebar-width: 280px;
    out property <length> sidebar-collapsed-width: 48px;
}

// Animation & Motion - Fluent 2 Motion System
export global FluentMotion {
    out property <duration> duration-ultra-fast: 50ms;
    out property <duration> duration-faster: 100ms;
    out property <duration> duration-fast: 150ms;
    out property <duration> duration-normal: 200ms;
    out property <duration> duration-slow: 300ms;
    out property <duration> duration-slower: 400ms;
    out property <duration> duration-ultra-slow: 500ms;
    
    // Easing curves (represented as animation properties)
    out property <easing> ease-accelerate: ease-in;
    out property <easing> ease-decelerate: ease-out;
    out property <easing> ease-standard: ease-in-out;
    out property <easing> ease-max: ease;
}

// Layout Grid - Fluent 2 Layout System
export global FluentLayout {
    // Breakpoints
    out property <length> breakpoint-small: 480px;
    out property <length> breakpoint-medium: 768px;
    out property <length> breakpoint-large: 1024px;
    out property <length> breakpoint-xlarge: 1440px;
    
    // Container max widths
    out property <length> container-small: 640px;
    out property <length> container-medium: 768px;
    out property <length> container-large: 1024px;
    out property <length> container-xlarge: 1280px;
    
    // Grid
    out property <length> grid-gutter: FluentSpacing.space-24;
    out property <int> grid-columns: 12;
}

// Z-Index Scale
export global FluentLayers {
    out property <int> layer-base: 0;
    out property <int> layer-dropdown: 1000;
    out property <int> layer-sticky: 1020;
    out property <int> layer-banner: 1030;
    out property <int> layer-overlay: 1040;
    out property <int> layer-modal: 1050;
    out property <int> layer-popover: 1060;
    out property <int> layer-tooltip: 1070;
    out property <int> layer-toast: 1080;
}