/**
 * Google Material 3 (Material You) Design Tokens
 * Automotive & Ambient Display Edition
 */

:root {
  /* MD3 Typography */
  --md-sys-typescale-display-large: 400 3.5rem / 4rem 'Google Sans', 'Roboto', system-ui, sans-serif;
  --md-sys-typescale-display-medium: 400 2.8rem / 3.25rem 'Google Sans', 'Roboto', system-ui, sans-serif;
  --md-sys-typescale-display-small: 400 2.25rem / 2.75rem 'Google Sans', 'Roboto', system-ui, sans-serif;

  --md-sys-typescale-headline-large: 400 2rem / 2.5rem 'Google Sans', 'Roboto', system-ui, sans-serif;
  --md-sys-typescale-headline-medium: 400 1.75rem / 2.25rem 'Google Sans', 'Roboto', system-ui, sans-serif;
  --md-sys-typescale-headline-small: 400 1.5rem / 2rem 'Google Sans', 'Roboto', system-ui, sans-serif;

  --md-sys-typescale-title-large: 400 1.375rem / 1.75rem 'Google Sans', 'Roboto', system-ui, sans-serif;
  --md-sys-typescale-title-medium: 500 1rem / 1.5rem 'Google Sans', 'Roboto', system-ui, sans-serif;
  --md-sys-typescale-title-small: 500 0.875rem / 1.25rem 'Google Sans', 'Roboto', system-ui, sans-serif;

  --md-sys-typescale-body-large: 400 1rem / 1.5rem 'Roboto', system-ui, sans-serif;
  --md-sys-typescale-body-medium: 400 0.875rem / 1.25rem 'Roboto', system-ui, sans-serif;
  --md-sys-typescale-body-small: 400 0.75rem / 1rem 'Roboto', system-ui, sans-serif;

  --md-sys-typescale-label-large: 500 0.875rem / 1.25rem 'Google Sans', 'Roboto', system-ui, sans-serif;
  --md-sys-typescale-label-medium: 500 0.75rem / 1rem 'Google Sans', 'Roboto', system-ui, sans-serif;
  --md-sys-typescale-label-small: 500 0.6875rem / 1rem 'Google Sans', 'Roboto', system-ui, sans-serif;

  /* MD3 Shapes */
  --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;

  /* MD3 Motion & Transitions */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 600ms;

  /* Default Dark Mode (Tesla Automotive Theme) */
  --md-sys-color-primary: #a8c7fa;
  --md-sys-color-on-primary: #062e6f;
  --md-sys-color-primary-container: #0842a0;
  --md-sys-color-on-primary-container: #d3e3fd;

  --md-sys-color-secondary: #c2e7ff;
  --md-sys-color-on-secondary: #003355;
  --md-sys-color-secondary-container: #004a77;
  --md-sys-color-on-secondary-container: #c2e7ff;

  --md-sys-color-tertiary: #6dd58c;
  --md-sys-color-on-tertiary: #003919;
  --md-sys-color-tertiary-container: #0f5223;
  --md-sys-color-on-tertiary-container: #8ef7aa;

  --md-sys-color-error: #f2b8b5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8c1d18;
  --md-sys-color-on-error-container: #f9dedc;

  --md-sys-color-background: #111318;
  --md-sys-color-on-background: #e2e2e9;

  --md-sys-color-surface: #111318;
  --md-sys-color-on-surface: #e2e2e9;
  --md-sys-color-surface-variant: #44474e;
  --md-sys-color-on-surface-variant: #c4c7d0;

  --md-sys-color-surface-container-lowest: #0c0e13;
  --md-sys-color-surface-container-low: #191c20;
  --md-sys-color-surface-container: #1d2024;
  --md-sys-color-surface-container-high: #282a2f;
  --md-sys-color-surface-container-highest: #33353a;

  --md-sys-color-outline: #8e9099;
  --md-sys-color-outline-variant: #44474f;

  --md-sys-color-inverse-surface: #e2e2e9;
  --md-sys-color-inverse-on-surface: #2f3036;
  --md-sys-color-inverse-primary: #0b57d0;

  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: rgba(0, 0, 0, 0.45);
  
  --md-sys-elevation-level1: 0px 1px 3px 1px rgba(0, 0, 0, 0.35);
  --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.4);
  --md-sys-elevation-level3: 0px 4px 10px 3px rgba(0, 0, 0, 0.45);
  --md-sys-elevation-level4: 0px 6px 14px 4px rgba(0, 0, 0, 0.5);
  --md-sys-elevation-level5: 0px 8px 20px 6px rgba(0, 0, 0, 0.6);
}

/* Light Theme (For daytime driving) */
[data-theme='light'] {
  --md-sys-color-primary: #0b57d0;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d3e3fd;
  --md-sys-color-on-primary-container: #041e49;

  --md-sys-color-secondary: #00639b;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #c2e7ff;
  --md-sys-color-on-secondary-container: #001d32;

  --md-sys-color-tertiary: #146c2e;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #a3f5b2;
  --md-sys-color-on-tertiary-container: #00210b;

  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #410e0b;

  --md-sys-color-background: #fdfcff;
  --md-sys-color-on-background: #1a1b1f;

  --md-sys-color-surface: #fdfcff;
  --md-sys-color-on-surface: #1a1b1f;
  --md-sys-color-surface-variant: #e1e2ec;
  --md-sys-color-on-surface-variant: #44474f;

  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f7f9fe;
  --md-sys-color-surface-container: #f0f3fa;
  --md-sys-color-surface-container-high: #e9edf4;
  --md-sys-color-surface-container-highest: #e3e8ef;

  --md-sys-color-outline: #74777f;
  --md-sys-color-outline-variant: #c4c7d0;

  --md-sys-color-inverse-surface: #2f3036;
  --md-sys-color-inverse-on-surface: #f2f0f4;
  --md-sys-color-inverse-primary: #a8c7fa;

  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: rgba(0, 0, 0, 0.15);

  --md-sys-elevation-level1: 0px 1px 3px 1px rgba(0, 0, 0, 0.12);
  --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.14);
  --md-sys-elevation-level3: 0px 4px 10px 3px rgba(0, 0, 0, 0.16);
  --md-sys-elevation-level4: 0px 6px 14px 4px rgba(0, 0, 0, 0.18);
  --md-sys-elevation-level5: 0px 8px 20px 6px rgba(0, 0, 0, 0.22);
}

/* Pure OLED Black Theme (Optimal for night driving / battery / no screen glow) */
[data-theme='oled'] {
  --md-sys-color-background: #000000;
  --md-sys-color-surface: #000000;
  --md-sys-color-surface-container-lowest: #000000;
  --md-sys-color-surface-container-low: #0a0a0c;
  --md-sys-color-surface-container: #121316;
  --md-sys-color-surface-container-high: #1a1c20;
  --md-sys-color-surface-container-highest: #22242a;
  --md-sys-color-outline-variant: #30323a;
}