/* Import Material Design themes */
@import './themes/light.css';
@import './themes/dark.css';

:root {
  /* Material Design Light Theme Mapping */
  --primary: var(--md-sys-color-primary);
  --on-primary: var(--md-sys-color-on-primary);
  --primary-dark: var(--md-sys-color-on-primary-fixed-variant);
  --primary-light: var(--md-sys-color-primary-container);
  --secondary: var(--md-sys-color-secondary);
  --on-secondary: var(--md-sys-color-on-secondary);
  --success: #4CAF50; /* Material Green */
  --danger: var(--md-sys-color-error);
  --text: var(--md-sys-color-on-surface);
  --text-light: var(--md-sys-color-on-surface-variant);
  --text-dark: var(--md-sys-color-on-background);
  --border: var(--md-sys-color-outline-variant);
  --surface-container-lowest: var(--md-sys-color-surface-container-lowest);
  --surface-container-low: var(--md-sys-color-surface-container-low);
  --surface-container: var(--md-sys-color-surface-container);
  --surface-container-high: var(--md-sys-color-surface-container-high);
  --surface-container-highest: var(--md-sys-color-surface-container-highest);

  /* Material Design specific colors */
  --surface: var(--md-sys-color-surface);
  --on-surface: var(--md-sys-color-on-surface);
  --surface-variant: var(--md-sys-color-surface-variant);
  --on-surface-variant: var(--md-sys-color-on-surface-variant);
  --outline: var(--md-sys-color-outline);
  --outline-variant: var(--md-sys-color-outline-variant);
  --primary-container: var(--md-sys-color-primary-container);
  --on-primary-container: var(--md-sys-color-on-primary-container);
  --secondary-container: var(--md-sys-color-secondary-container);
  --on-secondary-container: var(--md-sys-color-on-secondary-container);
  --error-container: var(--md-sys-color-error-container);
  --on-error-container: var(--md-sys-color-on-error-container);
  
  /* Material Design 3 尺寸和形状 */
  --border-radius: 12px; /* Material Design 3 rounded corners */
  --border-radius-sm: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  
  /* Material Design 3 阴影 */
  --shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --shadow-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
  
  /* 使用 Material Design 阴影 */
  --shadow: var(--shadow-2);
  --box-shadow-sm: var(--shadow-1);
  
  /* Material Design 3 字体 */
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-display: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Material Design 3 间距系统 (4px base unit) */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  
  /* 向后兼容的间距变量 */
  --padding-sm: var(--spacing-2);
  --padding-md: var(--spacing-3);
  --padding-lg: var(--spacing-4);
  --margin-sm: var(--spacing-2);
  --margin-md: var(--spacing-3);
  --margin-lg: var(--spacing-4);
}

/* Apply light theme by default */
:root {
  color-scheme: light;
}

:root.light {
  color-scheme: light;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    color-scheme: dark;
    
    /* Override with dark theme colors */
    --primary: var(--md-sys-color-primary);
    --primary-dark: var(--md-sys-color-on-primary-fixed-variant);
    --primary-light: var(--md-sys-color-primary-container);
    --secondary: var(--md-sys-color-secondary);
    --danger: var(--md-sys-color-error);
    --text: var(--md-sys-color-on-surface);
    --text-light: var(--md-sys-color-on-surface-variant);
    --text-dark: var(--md-sys-color-on-background);
    --border: var(--md-sys-color-outline-variant);
    --card-bg: var(--md-sys-color-surface-container);
    --bg-light: var(--md-sys-color-surface-container-low);
    --bg-dark: var(--md-sys-color-surface-container-high);
    
    /* Dark theme specific shadows */
    --shadow-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
    --shadow-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
    --shadow-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
    --shadow-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
    --shadow-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
  }
}

:root.dark {
  color-scheme: dark;
  
  /* Force dark theme colors */
  --primary: var(--md-sys-color-primary);
  --primary-dark: var(--md-sys-color-on-primary-fixed-variant);
  --primary-light: var(--md-sys-color-primary-container);
  --secondary: var(--md-sys-color-secondary);
  --danger: var(--md-sys-color-error);
  --text: var(--md-sys-color-on-surface);
  --text-light: var(--md-sys-color-on-surface-variant);
  --text-dark: var(--md-sys-color-on-background);
  --border: var(--md-sys-color-outline-variant);
  --card-bg: var(--md-sys-color-surface-container);
  --bg-light: var(--md-sys-color-surface-container-low);
  --bg-dark: var(--md-sys-color-surface-container-high);
}

/* Material Design 3 Typography Scale */
.md-typescale-display-large {
  font-family: var(--font-family-display);
  font-size: 57px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: -0.25px;
}

.md-typescale-display-medium {
  font-family: var(--font-family-display);
  font-size: 45px;
  font-weight: 400;
  line-height: 52px;
  letter-spacing: 0px;
}

.md-typescale-display-small {
  font-family: var(--font-family-display);
  font-size: 36px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: 0px;
}

.md-typescale-headline-large {
  font-family: var(--font-family-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 0px;
}

.md-typescale-headline-medium {
  font-family: var(--font-family-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0px;
}

.md-typescale-headline-small {
  font-family: var(--font-family-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0px;
}

.md-typescale-title-large {
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0px;
}

.md-typescale-title-medium {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.15px;
}

.md-typescale-title-small {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.1px;
}

.md-typescale-body-large {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.5px;
}

.md-typescale-body-medium {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.25px;
}

.md-typescale-body-small {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.4px;
}

.md-typescale-label-large {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.1px;
}

.md-typescale-label-medium {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
}

.md-typescale-label-small {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
}