/* Material Design 3 Variables */
:root {
  /* Typography Scale */
  --display-large: 3.5rem;
  --display-medium: 2.8rem;
  --display-small: 2.25rem;
  --headline-large: 2rem;
  --headline-medium: 1.75rem;
  --headline-small: 1.5rem;
  --title-large: 1.375rem;
  --title-medium: 1.1rem;
  --title-small: 0.975rem;
  --label-large: 0.9rem;
  --label-medium: 0.8rem;
  --label-small: 0.75rem;
  --body-large: 1.1rem;
  --body-medium: 0.975rem;
  --body-small: 0.85rem;

  /* Light Mode Colors */
  --md-primary: #34a853;
  --md-on-primary: #ffffff;
  --md-primary-container: #b6f2c6;
  --md-on-primary-container: #002111;

  --md-secondary: #4d5b50;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #cfe9d0;
  --md-on-secondary-container: #0a1f11;

  --md-tertiary: #39656c;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #bdeaf2;
  --md-on-tertiary-container: #001f24;

  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;

  --md-background: #f8f9fa;
  --md-on-background: #191c1a;

  --md-surface: #faf9fd;
  --md-on-surface: #191c1a;
  --md-surface-variant: #dce5db;
  --md-on-surface-variant: #404943;

  --md-outline: #707973;
  --md-outline-variant: #c0c9c0;

  --md-inverse-surface: #2e312e;
  --md-inverse-on-surface: #eff1ec;
  --md-inverse-primary: #9ad6a7;

  --md-shadow: rgba(0, 0, 0, 0.1);

  /* Shapes */
  --md-shape-corner-none: 0px;
  --md-shape-corner-extra-small: 4px;
  --md-shape-corner-small: 8px;
  --md-shape-corner-medium: 12px;
  --md-shape-corner-large: 16px;
  --md-shape-corner-extra-large: 28px;
  --md-shape-corner-full: 9999px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* Layout */
  --container-width: 1200px;
  --header-height: 64px;
  --nav-rail-width: 72px;
  --bottom-nav-height: 80px;
}

/* AMOLED Black Dark Mode Theme */
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark Mode Colors with AMOLED true black */
    --md-primary: #a4e0af; /* Brighter green for better contrast on black */
    --md-on-primary: #003919;
    --md-primary-container: #1a4628; /* Slightly darker for better contrast */
    --md-on-primary-container: #c8ffcb;

    --md-secondary: #b3ccb4;
    --md-on-secondary: #213527;
    --md-secondary-container: #2a3f30; /* Slightly darker */
    --md-on-secondary-container: #cfe9d0;

    --md-tertiary: #a1cddb;
    --md-on-tertiary: #00363e;
    --md-tertiary-container: #1a444b; /* Slightly darker */
    --md-on-tertiary-container: #bdeaf2;

    --md-error: #ffb4ab;
    --md-on-error: #690005;
    --md-error-container: #930012;
    --md-on-error-container: #ffdad6;

    /* AMOLED true black background */
    --md-background: #000000;
    --md-on-background: #e1e3de;

    /* AMOLED true black surface */
    --md-surface: #000000;
    --md-on-surface: #e1e3de;
    --md-surface-variant: #2c342d; /* Slightly lighter for contrast */
    --md-on-surface-variant: #c0c9c0;

    --md-outline: #8a938a;
    --md-outline-variant: #404943;

    --md-inverse-surface: #e1e3de;
    --md-inverse-on-surface: #000000; /* True black */
    --md-inverse-primary: #34a853;

    --md-shadow: rgba(0, 0, 0, 0.5); /* Darker shadows for AMOLED mode */
  }
}

/* Class-based AMOLED dark mode for manual toggle */
body.dark-mode {
  /* Dark Mode Colors with AMOLED true black */
  --md-primary: #a4e0af; /* Brighter green for better contrast on black */
  --md-on-primary: #003919;
  --md-primary-container: #1a4628; /* Slightly darker for better contrast */
  --md-on-primary-container: #c8ffcb;

  --md-secondary: #b3ccb4;
  --md-on-secondary: #213527;
  --md-secondary-container: #2a3f30; /* Slightly darker */
  --md-on-secondary-container: #cfe9d0;

  --md-tertiary: #a1cddb;
  --md-on-tertiary: #00363e;
  --md-tertiary-container: #1a444b; /* Slightly darker */
  --md-on-tertiary-container: #bdeaf2;

  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-error-container: #930012;
  --md-on-error-container: #ffdad6;

  /* AMOLED true black background */
  --md-background: #000000;
  --md-on-background: #e1e3de;

  /* AMOLED true black surface */
  --md-surface: #000000;
  --md-on-surface: #e1e3de;
  --md-surface-variant: #2c342d; /* Slightly lighter for contrast */
  --md-on-surface-variant: #c0c9c0;

  --md-outline: #8a938a;
  --md-outline-variant: #404943;

  --md-inverse-surface: #e1e3de;
  --md-inverse-on-surface: #000000; /* True black */
  --md-inverse-primary: #34a853;

  --md-shadow: rgba(0, 0, 0, 0.5); /* Darker shadows for AMOLED mode */
}