/* ==========================================
   Material Design 3 - Design Tokens
   ========================================== */

:root {
  /* ==========================================
     Color System - Light Theme
     ========================================== */
  
  /* Primary */
  --md-sys-color-primary: #6366f1;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e0e7ff;
  --md-sys-color-on-primary-container: #1e1b4b;
  
  /* Secondary */
  --md-sys-color-secondary: #8b5cf6;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #ede9fe;
  --md-sys-color-on-secondary-container: #4c1d95;
  
  /* Tertiary */
  --md-sys-color-tertiary: #10b981;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #d1fae5;
  --md-sys-color-on-tertiary-container: #064e3b;
  
  /* Error */
  --md-sys-color-error: #ef4444;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #fee2e2;
  --md-sys-color-on-error-container: #7f1d1d;
  
  /* Surface */
  --md-sys-color-surface: #fefefe;
  --md-sys-color-on-surface: #1c1b1f;
  --md-sys-color-surface-variant: #f3f4f6;
  --md-sys-color-on-surface-variant: #49454f;
  
  /* Background */
  --md-sys-color-background: #ffffff;
  --md-sys-color-on-background: #1c1b1f;
  
  /* Outline */
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #cac4d0;
  
  /* Surface Tint */
  --md-sys-color-surface-tint: #6366f1;
  
  /* Inverse */
  --md-sys-color-inverse-surface: #313033;
  --md-sys-color-inverse-on-surface: #f4eff4;
  --md-sys-color-inverse-primary: #c0c1ff;
  
  /* Shadow */
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  
  /* ==========================================
     Typography Scale
     ========================================== */
  
  /* Display */
  --md-sys-typescale-display-large-font-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-font-weight: 400;
  
  --md-sys-typescale-display-medium-font-size: 45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-medium-font-weight: 400;
  
  --md-sys-typescale-display-small-font-size: 36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-display-small-font-weight: 400;
  
  /* Headline */
  --md-sys-typescale-headline-large-font-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-font-weight: 400;
  
  --md-sys-typescale-headline-medium-font-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-font-weight: 400;
  
  --md-sys-typescale-headline-small-font-size: 24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-headline-small-font-weight: 400;
  
  /* Title */
  --md-sys-typescale-title-large-font-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-font-weight: 400;
  
  --md-sys-typescale-title-medium-font-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-font-weight: 500;
  
  --md-sys-typescale-title-small-font-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-font-weight: 500;
  
  /* Body */
  --md-sys-typescale-body-large-font-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-font-weight: 400;
  
  --md-sys-typescale-body-medium-font-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-font-weight: 400;
  
  --md-sys-typescale-body-small-font-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-font-weight: 400;
  
  /* Label */
  --md-sys-typescale-label-large-font-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-font-weight: 500;
  
  --md-sys-typescale-label-medium-font-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-font-weight: 500;
  
  --md-sys-typescale-label-small-font-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-font-weight: 500;
  
  /* ==========================================
     Elevation System
     ========================================== */
  
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
  
  /* ==========================================
     Shape System
     ========================================== */
  
  --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;
  
  /* ==========================================
     Motion System
     ========================================== */
  
  /* Duration */
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;
  --md-sys-motion-duration-extra-long1: 700ms;
  --md-sys-motion-duration-extra-long2: 800ms;
  --md-sys-motion-duration-extra-long3: 900ms;
  --md-sys-motion-duration-extra-long4: 1000ms;
  
  /* Easing */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);
  --md-sys-motion-easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --md-sys-motion-easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  
  /* ==========================================
     State Layer Opacity
     ========================================== */
  
  --md-sys-state-hover-state-layer-opacity: 0.08;
  --md-sys-state-focus-state-layer-opacity: 0.12;
  --md-sys-state-pressed-state-layer-opacity: 0.12;
  --md-sys-state-dragged-state-layer-opacity: 0.16;
}

/* ==========================================
   Dark Theme
   ========================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Primary */
    --md-sys-color-primary: #c0c1ff;
    --md-sys-color-on-primary: #2e2d6c;
    --md-sys-color-primary-container: #4543a3;
    --md-sys-color-on-primary-container: #e0e0ff;
    
    /* Secondary */
    --md-sys-color-secondary: #d8b4fe;
    --md-sys-color-on-secondary: #3b0764;
    --md-sys-color-secondary-container: #5b21b6;
    --md-sys-color-on-secondary-container: #f3e8ff;
    
    /* Tertiary */
    --md-sys-color-tertiary: #6ee7b7;
    --md-sys-color-on-tertiary: #064e3b;
    --md-sys-color-tertiary-container: #047857;
    --md-sys-color-on-tertiary-container: #d1fae5;
    
    /* Error */
    --md-sys-color-error: #fca5a5;
    --md-sys-color-on-error: #7f1d1d;
    --md-sys-color-error-container: #b91c1c;
    --md-sys-color-on-error-container: #fee2e2;
    
    /* Surface */
    --md-sys-color-surface: #1c1b1f;
    --md-sys-color-on-surface: #e6e1e5;
    --md-sys-color-surface-variant: #49454f;
    --md-sys-color-on-surface-variant: #cac4d0;
    
    /* Background */
    --md-sys-color-background: #1c1b1f;
    --md-sys-color-on-background: #e6e1e5;
    
    /* Outline */
    --md-sys-color-outline: #938f99;
    --md-sys-color-outline-variant: #49454f;
    
    /* Inverse */
    --md-sys-color-inverse-surface: #e6e1e5;
    --md-sys-color-inverse-on-surface: #313033;
    --md-sys-color-inverse-primary: #6366f1;
  }
}

/* ==========================================
   Utility Classes for Typography
   ========================================== */

.md3-display-large {
  font-size: var(--md-sys-typescale-display-large-font-size);
  line-height: var(--md-sys-typescale-display-large-line-height);
  font-weight: var(--md-sys-typescale-display-large-font-weight);
}

.md3-display-medium {
  font-size: var(--md-sys-typescale-display-medium-font-size);
  line-height: var(--md-sys-typescale-display-medium-line-height);
  font-weight: var(--md-sys-typescale-display-medium-font-weight);
}

.md3-display-small {
  font-size: var(--md-sys-typescale-display-small-font-size);
  line-height: var(--md-sys-typescale-display-small-line-height);
  font-weight: var(--md-sys-typescale-display-small-font-weight);
}

.md3-headline-large {
  font-size: var(--md-sys-typescale-headline-large-font-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: var(--md-sys-typescale-headline-large-font-weight);
}

.md3-headline-medium {
  font-size: var(--md-sys-typescale-headline-medium-font-size);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
}

.md3-headline-small {
  font-size: var(--md-sys-typescale-headline-small-font-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  font-weight: var(--md-sys-typescale-headline-small-font-weight);
}

.md3-title-large {
  font-size: var(--md-sys-typescale-title-large-font-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-font-weight);
}

.md3-title-medium {
  font-size: var(--md-sys-typescale-title-medium-font-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
}

.md3-title-small {
  font-size: var(--md-sys-typescale-title-small-font-size);
  line-height: var(--md-sys-typescale-title-small-line-height);
  font-weight: var(--md-sys-typescale-title-small-font-weight);
}

.md3-body-large {
  font-size: var(--md-sys-typescale-body-large-font-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-font-weight);
}

.md3-body-medium {
  font-size: var(--md-sys-typescale-body-medium-font-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
}

.md3-body-small {
  font-size: var(--md-sys-typescale-body-small-font-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  font-weight: var(--md-sys-typescale-body-small-font-weight);
}

.md3-label-large {
  font-size: var(--md-sys-typescale-label-large-font-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
}

.md3-label-medium {
  font-size: var(--md-sys-typescale-label-medium-font-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  font-weight: var(--md-sys-typescale-label-medium-font-weight);
}

.md3-label-small {
  font-size: var(--md-sys-typescale-label-small-font-size);
  line-height: var(--md-sys-typescale-label-small-line-height);
  font-weight: var(--md-sys-typescale-label-small-font-weight);
}

/* ==========================================
   Utility Classes for Elevation
   ========================================== */

.md3-elevation-0 {
  box-shadow: var(--md-sys-elevation-level0);
}

.md3-elevation-1 {
  box-shadow: var(--md-sys-elevation-level1);
}

.md3-elevation-2 {
  box-shadow: var(--md-sys-elevation-level2);
}

.md3-elevation-3 {
  box-shadow: var(--md-sys-elevation-level3);
}

.md3-elevation-4 {
  box-shadow: var(--md-sys-elevation-level4);
}

.md3-elevation-5 {
  box-shadow: var(--md-sys-elevation-level5);
}