/**
 * Material 3 Design Tokens
 * 基于 Android Compose Material 3 设计系统
 */

:root {
  /* ===== Color Roles - Light Theme (Default) ===== */
  
  /* Primary */
  --md-sys-color-primary: #1976D2;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D1E4FF;
  --md-sys-color-on-primary-container: #001D36;
  
  /* Secondary */
  --md-sys-color-secondary: #535F70;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #D7E3F7;
  --md-sys-color-on-secondary-container: #101C2B;
  
  /* Tertiary */
  --md-sys-color-tertiary: #6B5778;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #F2DAFF;
  --md-sys-color-on-tertiary-container: #251431;
  
  /* Error */
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;
  
  /* Background & Surface */
  --md-sys-color-background: #FDFCFF;
  --md-sys-color-on-background: #1A1C1E;
  --md-sys-color-surface: #FDFCFF;
  --md-sys-color-on-surface: #1A1C1E;
  --md-sys-color-surface-variant: #DFE2EB;
  --md-sys-color-on-surface-variant: #43474E;
  
  /* Surface Containers (Material 3 新增) */
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F8FC;
  --md-sys-color-surface-container: #F1F3F7;
  --md-sys-color-surface-container-high: #EBEEF2;
  --md-sys-color-surface-container-highest: #E5E8EC;
  
  /* Outline */
  --md-sys-color-outline: #73777F;
  --md-sys-color-outline-variant: #C3C7CF;
  
  /* Inverse */
  --md-sys-color-inverse-surface: #2F3033;
  --md-sys-color-inverse-on-surface: #F1F0F4;
  --md-sys-color-inverse-primary: #A0CAFD;
  
  /* Scrim & Shadow */
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
  
  /* ===== Shape (圆角) ===== */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
  
  /* ===== Elevation (阴影层级) ===== */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
  --md-sys-elevation-2: 0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
  --md-sys-elevation-3: 0 1px 3px 0 rgba(0,0,0,0.3), 0 4px 8px 3px rgba(0,0,0,0.15);
  --md-sys-elevation-4: 0 2px 3px 0 rgba(0,0,0,0.3), 0 6px 10px 4px rgba(0,0,0,0.15);
  --md-sys-elevation-5: 0 4px 4px 0 rgba(0,0,0,0.3), 0 8px 12px 6px rgba(0,0,0,0.15);
  
  /* ===== Spacing (间距) ===== */
  --md-sys-space-1: 4px;
  --md-sys-space-2: 8px;
  --md-sys-space-3: 12px;
  --md-sys-space-4: 16px;
  --md-sys-space-5: 24px;
  --md-sys-space-6: 32px;
  --md-sys-space-7: 48px;
  --md-sys-space-8: 64px;
  
  /* ===== Typography ===== */
  --md-sys-typescale-display-large: 57px;
  --md-sys-typescale-display-medium: 45px;
  --md-sys-typescale-display-small: 36px;
  --md-sys-typescale-headline-large: 32px;
  --md-sys-typescale-headline-medium: 28px;
  --md-sys-typescale-headline-small: 24px;
  --md-sys-typescale-title-large: 22px;
  --md-sys-typescale-title-medium: 16px;
  --md-sys-typescale-title-small: 14px;
  --md-sys-typescale-body-large: 16px;
  --md-sys-typescale-body-medium: 14px;
  --md-sys-typescale-body-small: 12px;
  --md-sys-typescale-label-large: 14px;
  --md-sys-typescale-label-medium: 12px;
  --md-sys-typescale-label-small: 11px;
  
  /* Font Family */
  --md-sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  
  /* ===== Motion (动画) ===== */
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 250ms;
  --md-sys-motion-duration-long: 400ms;
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  
  /* ===== Layout ===== */
  --md-sys-layout-max-width: 1280px;
  --md-sys-layout-nav-rail-width: 80px;
  --md-sys-layout-drawer-width: 360px;
  --md-sys-layout-app-bar-height: 64px;
  --md-sys-layout-bottom-nav-height: 80px;
}

/* ===== Dark Theme ===== */
:root[data-theme="dark"],
[data-theme="dark"] {
  /* Primary */
  --md-sys-color-primary: #A0CAFD;
  --md-sys-color-on-primary: #003258;
  --md-sys-color-primary-container: #00497D;
  --md-sys-color-on-primary-container: #D1E4FF;
  
  /* Secondary */
  --md-sys-color-secondary: #BBC7DB;
  --md-sys-color-on-secondary: #253140;
  --md-sys-color-secondary-container: #3C4858;
  --md-sys-color-on-secondary-container: #D7E3F7;
  
  /* Tertiary */
  --md-sys-color-tertiary: #D6BEE4;
  --md-sys-color-on-tertiary: #3B2948;
  --md-sys-color-tertiary-container: #53405F;
  --md-sys-color-on-tertiary-container: #F2DAFF;
  
  /* Error */
  --md-sys-color-error: #FFB4AB;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000A;
  --md-sys-color-on-error-container: #FFDAD6;
  
  /* Background & Surface */
  --md-sys-color-background: #1A1C1E;
  --md-sys-color-on-background: #E3E2E6;
  --md-sys-color-surface: #1A1C1E;
  --md-sys-color-on-surface: #E3E2E6;
  --md-sys-color-surface-variant: #43474E;
  --md-sys-color-on-surface-variant: #C3C7CF;
  
  /* Surface Containers */
  --md-sys-color-surface-container-lowest: #0F1113;
  --md-sys-color-surface-container-low: #1A1C1E;
  --md-sys-color-surface-container: #1E2022;
  --md-sys-color-surface-container-high: #292B2D;
  --md-sys-color-surface-container-highest: #343638;
  
  /* Outline */
  --md-sys-color-outline: #8D9199;
  --md-sys-color-outline-variant: #43474E;
  
  /* Inverse */
  --md-sys-color-inverse-surface: #E3E2E6;
  --md-sys-color-inverse-on-surface: #2F3033;
  --md-sys-color-inverse-primary: #1976D2;
  
  /* Elevation (Dark模式用surface tint叠加) */
  --md-sys-elevation-1: 0 1px 3px 1px rgba(0,0,0,0.4), 0 1px 2px 0 rgba(0,0,0,0.6);
  --md-sys-elevation-2: 0 2px 6px 2px rgba(0,0,0,0.4), 0 1px 2px 0 rgba(0,0,0,0.6);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.4), 0 1px 3px 0 rgba(0,0,0,0.6);
  --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,0.4), 0 2px 3px 0 rgba(0,0,0,0.6);
  --md-sys-elevation-5: 0 8px 12px 6px rgba(0,0,0,0.4), 0 4px 4px 0 rgba(0,0,0,0.6);
}

/* ===== System Preference: Dark Mode ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Primary */
    --md-sys-color-primary: #A0CAFD;
    --md-sys-color-on-primary: #003258;
    --md-sys-color-primary-container: #00497D;
    --md-sys-color-on-primary-container: #D1E4FF;
    
    /* Secondary */
    --md-sys-color-secondary: #BBC7DB;
    --md-sys-color-on-secondary: #253140;
    --md-sys-color-secondary-container: #3C4858;
    --md-sys-color-on-secondary-container: #D7E3F7;
    
    /* Tertiary */
    --md-sys-color-tertiary: #D6BEE4;
    --md-sys-color-on-tertiary: #3B2948;
    --md-sys-color-tertiary-container: #53405F;
    --md-sys-color-on-tertiary-container: #F2DAFF;
    
    /* Error */
    --md-sys-color-error: #FFB4AB;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000A;
    --md-sys-color-on-error-container: #FFDAD6;
    
    /* Background & Surface */
    --md-sys-color-background: #1A1C1E;
    --md-sys-color-on-background: #E3E2E6;
    --md-sys-color-surface: #1A1C1E;
    --md-sys-color-on-surface: #E3E2E6;
    --md-sys-color-surface-variant: #43474E;
    --md-sys-color-on-surface-variant: #C3C7CF;
    
    /* Surface Containers */
    --md-sys-color-surface-container-lowest: #0F1113;
    --md-sys-color-surface-container-low: #1A1C1E;
    --md-sys-color-surface-container: #1E2022;
    --md-sys-color-surface-container-high: #292B2D;
    --md-sys-color-surface-container-highest: #343638;
    
    /* Outline */
    --md-sys-color-outline: #8D9199;
    --md-sys-color-outline-variant: #43474E;
    
    /* Inverse */
    --md-sys-color-inverse-surface: #E3E2E6;
    --md-sys-color-inverse-on-surface: #2F3033;
    --md-sys-color-inverse-primary: #1976D2;
    
    /* Elevation */
    --md-sys-elevation-1: 0 1px 3px 1px rgba(0,0,0,0.4), 0 1px 2px 0 rgba(0,0,0,0.6);
    --md-sys-elevation-2: 0 2px 6px 2px rgba(0,0,0,0.4), 0 1px 2px 0 rgba(0,0,0,0.6);
    --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.4), 0 1px 3px 0 rgba(0,0,0,0.6);
    --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,0.4), 0 2px 3px 0 rgba(0,0,0,0.6);
    --md-sys-elevation-5: 0 8px 12px 6px rgba(0,0,0,0.4), 0 4px 4px 0 rgba(0,0,0,0.6);
  }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --md-sys-motion-duration-short: 0ms;
    --md-sys-motion-duration-medium: 0ms;
    --md-sys-motion-duration-long: 0ms;
  }
}