/* CSS Variables - Windows 10 Design System */

:root {
  /* Color Palette */
  --primary-blue: #0078d4;
  --primary-blue-hover: #106ebe;
  --primary-blue-active: #0063b1;
  
  --accent-cyan: #00b7c3;
  --accent-green: #107c10;
  --accent-red: #d13438;
  --accent-orange: #ffb900;
  
  /* Light Theme */
  --light-bg-primary: #ffffff;
  --light-bg-secondary: #f3f3f3;
  --light-bg-tertiary: #efefef;
  --light-text-primary: #000000;
  --light-text-secondary: #424242;
  --light-text-tertiary: #737373;
  --light-border: #e0e0e0;
  --light-glass: rgba(255, 255, 255, 0.7);
  
  /* Dark Theme */
  --dark-bg-primary: #1e1e1e;
  --dark-bg-secondary: #2d2d2d;
  --dark-bg-tertiary: #3e3e42;
  --dark-text-primary: #ffffff;
  --dark-text-secondary: #cccccc;
  --dark-text-tertiary: #999999;
  --dark-border: #3e3e42;
  --dark-glass: rgba(45, 45, 45, 0.7);
  
  /* Current Theme (defaults to light) */
  --bg-primary: var(--light-bg-primary);
  --bg-secondary: var(--light-bg-secondary);
  --bg-tertiary: var(--light-bg-tertiary);
  --text-primary: var(--light-text-primary);
  --text-secondary: var(--light-text-secondary);
  --text-tertiary: var(--light-text-tertiary);
  --border-color: var(--light-border);
  --glass-bg: var(--light-glass);
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  
  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-family-mono: 'Courier New', monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.2);
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 400ms ease-in-out;
  
  /* Z-Index Stack */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-notification: 800;
}

/* Dark Theme */
body.dark-theme {
  --bg-primary: var(--dark-bg-primary);
  --bg-secondary: var(--dark-bg-secondary);
  --bg-tertiary: var(--dark-bg-tertiary);
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --text-tertiary: var(--dark-text-tertiary);
  --border-color: var(--dark-border);
  --glass-bg: var(--dark-glass);
}

/* Auto Theme - respects system preference */
@media (prefers-color-scheme: dark) {
  body.auto-theme {
    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --bg-tertiary: var(--dark-bg-tertiary);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-tertiary: var(--dark-text-tertiary);
    --border-color: var(--dark-border);
    --glass-bg: var(--dark-glass);
  }
}

@media (prefers-color-scheme: light) {
  body.auto-theme {
    --bg-primary: var(--light-bg-primary);
    --bg-secondary: var(--light-bg-secondary);
    --bg-tertiary: var(--light-bg-tertiary);
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-tertiary: var(--light-text-tertiary);
    --border-color: var(--light-border);
    --glass-bg: var(--light-glass);
  }
}