/* Fluent Design Theme - Modern, Beautiful */

:root {
  /* Primary Colors - Fluent Design */
  --color-primary: #0078D4;
  --color-primary-light: #1084D7;
  --color-primary-dark: #005A9E;
  
  /* Theme Colors */
  --color-secondary: #1084D7;
  --color-accent: #FFB900;
  --color-success: #107C10;
  --color-warning: #FFB900;
  --color-error: #D83B01;
  --color-info: #0099BC;
  
  /* Neutral Grays - Fluent Design */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F3F3F3;
  --color-bg-tertiary: #EBEBEB;
  --color-bg-quaternary: #E1E1E1;
  
  --color-text-primary: #201F1E;
  --color-text-secondary: #3B3B3B;
  --color-text-tertiary: #605E5C;
  --color-text-quaternary: #8A8886;
  --color-text-disabled: #BFBFBF;
  
  --color-divider: #D2D0CE;
  --color-border: #C8C6C4;
  --color-surface-stroke: #8A8886;
  
  /* Shadows - Fluent Design */
  --shadow-xs: 0 0.5px 1px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0.5px 1px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.14);
  
  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;
  
  /* Typography */
  --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --font-family-display: var(--font-family-system);
  --font-family-body: var(--font-family-system);
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Border Radius - Fluent Design (subtle) */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.25s ease-in-out;
  --transition-slow: 0.35s ease-in-out;
  
  /* Z-index Scale */
  --z-dropdown: 1000;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-modal-backdrop: 1020;
  --z-modal: 1030;
  --z-popover: 1040;
  --z-tooltip: 1050;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #1E1E1E;
    --color-bg-secondary: #2D2D30;
    --color-bg-tertiary: #3E3E42;
    --color-bg-quaternary: #464647;
    
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #E1E1E1;
    --color-text-tertiary: #CCCCCC;
    --color-text-quaternary: #969696;
    
    --color-divider: #464647;
    --color-border: #505052;
  }
}

/* Typography Styles */
.display-1 {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.display-2 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.heading-1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.heading-2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.heading-3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.heading-4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.body-large {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
}

.body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
}

.body-small {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.caption {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-tertiary);
}

.label-large {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}