:root {
  /* 
   * Material Design 3 Color System 
   * Based on Teal (#00796B) 
   */
  --md-sys-color-primary: #006A60;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #74F8E5;
  --md-sys-color-on-primary-container: #00201C;

  --md-sys-color-secondary: #4A635F;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #CCE8E3;
  --md-sys-color-on-secondary-container: #05201C;

  --md-sys-color-tertiary: #456179;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #CCE5FF;
  --md-sys-color-on-tertiary-container: #001E31;

  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-background: #FAFDFB;
  --md-sys-color-on-background: #191C1C;
  --md-sys-color-surface: #FAFDFB;
  --md-sys-color-on-surface: #191C1C;

  --md-sys-color-outline: #6F7977;
  --md-sys-color-surface-variant: #DAE5E1;
  --md-sys-color-on-surface-variant: #3F4947;

  /* Typography (Roboto / System Default) */
  --md-sys-typescale-headline-small: 400 24px/32px Roboto, sans-serif;
  --md-sys-typescale-title-large: 400 22px/28px Roboto, sans-serif;
  --md-sys-typescale-body-large: 400 16px/24px Roboto, sans-serif;
  --md-sys-typescale-body-medium: 400 14px/20px Roboto, sans-serif;
  --md-sys-typescale-label-large: 500 14px/20px Roboto, sans-serif;

  /* Elevation */
  --md-sys-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);

  /* Shape */
  --md-sys-shape-corner-small: 4px;
  --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;

  /* Animation */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-duration-medium: 250ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #53DBC9;
    --md-sys-color-on-primary: #003732;
    --md-sys-color-primary-container: #005048;
    --md-sys-color-on-primary-container: #74F8E5;

    --md-sys-color-secondary: #B0CCC7;
    --md-sys-color-on-secondary: #1C3531;
    --md-sys-color-secondary-container: #334B47;
    --md-sys-color-on-secondary-container: #CCE8E3;

    --md-sys-color-background: #191C1C;
    --md-sys-color-on-background: #E0E3E1;
    --md-sys-color-surface: #191C1C;
    --md-sys-color-on-surface: #E0E3E1;

    --md-sys-color-outline: #899390;
    --md-sys-color-surface-variant: #3F4947;
    --md-sys-color-on-surface-variant: #BFC9C5;
  }
}