/**
 * Material Design 3 (M3) Design System Package (DSP) Tokens
 * Basierend auf dem offiziellen Material Design System Package (DSP)
 */

:root {
  /* ----------------- COLOR TOKENS ----------------- */

  /* Primary */
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EADDFF;
  --md-sys-color-on-primary-container: #21005E;
  
  /* Secondary */
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8DEF8;
  --md-sys-color-on-secondary-container: #1D192B;
  
  /* Tertiary */
  --md-sys-color-tertiary: #7D5260;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFD8E4;
  --md-sys-color-on-tertiary-container: #31111D;
  
  /* Error */
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;
  
  /* Background */
  --md-sys-color-background: #FFFBFE;
  --md-sys-color-on-background: #1C1B1F;
  
  /* Surface */
  --md-sys-color-surface: #FFFBFE;
  --md-sys-color-on-surface: #1C1B1F;
  --md-sys-color-surface-variant: #E7E0EC;
  --md-sys-color-on-surface-variant: #49454F;
  
  /* Surface Container Tokens (MD3 neu) */
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F2FA;
  --md-sys-color-surface-container: #F3EAF7; /* Wie im Screenshot gezeigt */
  --md-sys-color-surface-container-high: #ECE6F0;
  --md-sys-color-surface-container-highest: #E6E0E9;
  
  /* Outline */
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;
  
  /* Shadow and Scrim */
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  
  /* Inverse Colors */
  --md-sys-color-inverse-surface: #313033;
  --md-sys-color-inverse-on-surface: #F4EFF4;
  --md-sys-color-inverse-primary: #D0BCFF;
  
  /* ----------------- TYPOGRAPHY TOKENS ----------------- */
  
  /* Font Family */
  --md-ref-typeface-brand: 'Google Sans', sans-serif;
  --md-ref-typeface-plain: 'Roboto', sans-serif;
  
  /* Font Weight */
  --md-ref-typeface-weight-regular: 400;
  --md-ref-typeface-weight-medium: 500;
  --md-ref-typeface-weight-bold: 700;
  
  /* Display Typography */
  --md-sys-typescale-display-large-font-family-name: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-large-font-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-display-large-font-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-letter-spacing: -0.25px;
  
  --md-sys-typescale-display-medium-font-family-name: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium-font-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-display-medium-font-size: 45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-medium-letter-spacing: -0.25px;
  
  --md-sys-typescale-display-small-font-family-name: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small-font-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-display-small-font-size: 36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-display-small-letter-spacing: 0px;
  
  /* Headline Typography */
  --md-sys-typescale-headline-large-font-family-name: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large-font-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-headline-large-font-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-letter-spacing: 0px;
  
  --md-sys-typescale-headline-medium-font-family-name: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium-font-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-headline-medium-font-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-letter-spacing: 0px;
  
  --md-sys-typescale-headline-small-font-family-name: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-font-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-headline-small-font-size: 24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-headline-small-letter-spacing: 0px;
  
  /* Title Typography */
  --md-sys-typescale-title-large-font-family-name: var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large-font-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-title-large-font-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-letter-spacing: 0px;
  
  --md-sys-typescale-title-medium-font-family-name: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium-font-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-title-medium-font-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
  
  --md-sys-typescale-title-small-font-family-name: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small-font-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-title-small-font-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-letter-spacing: 0.1px;
  
  /* Label Typography */
  --md-sys-typescale-label-large-font-family-name: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-font-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-label-large-font-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-letter-spacing: 0.1px;
  
  --md-sys-typescale-label-medium-font-family-name: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium-font-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-label-medium-font-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-letter-spacing: 0.5px;
  
  --md-sys-typescale-label-small-font-family-name: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small-font-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-label-small-font-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-letter-spacing: 0.5px;
  
  /* Body Typography */
  --md-sys-typescale-body-large-font-family-name: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large-font-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-large-font-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-letter-spacing: 0.15px;
  
  --md-sys-typescale-body-medium-font-family-name: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-font-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-medium-font-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-letter-spacing: 0.25px;
  
  --md-sys-typescale-body-small-font-family-name: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small-font-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-small-font-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-letter-spacing: 0.4px;
  
  /* ----------------- ELEVATION TOKENS ----------------- */
  
  /* Elevation Values (Box Shadows) */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --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 TOKENS ----------------- */
  
  /* Corner Sizes */
  --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;
  
  /* ----------------- STATE TOKENS ----------------- */
  
  /* 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;

  /* ----------------- MOTION TOKENS ----------------- */
  
  /* Easing Curves */
  --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --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);
  
  /* 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;

  /* ----------------- LAYOUT TOKENS ----------------- */
  
  /* Spacing Tokens */
  --md-sys-spacing-track: 2px;
  --md-sys-spacing-unit-0-25x: 2px;
  --md-sys-spacing-unit-0-5x: 4px;
  --md-sys-spacing-unit-1x: 8px;
  --md-sys-spacing-unit-1-5x: 12px;
  --md-sys-spacing-unit-2x: 16px;
  --md-sys-spacing-unit-2-5x: 20px;
  --md-sys-spacing-unit-3x: 24px;
  --md-sys-spacing-unit-3-5x: 28px;
  --md-sys-spacing-unit-4x: 32px;
  --md-sys-spacing-unit-5x: 40px;
  --md-sys-spacing-unit-6x: 48px;
  --md-sys-spacing-unit-7x: 56px;
  --md-sys-spacing-unit-8x: 64px;
  --md-sys-spacing-unit-9x: 72px;
  --md-sys-spacing-unit-10x: 80px;
}