/**
 * Material Design 3 Color System
 * Generated from seed color: #0d7377 (Deep Teal)
 * 
 * This file contains the complete tonal palette generated by Google Material Color Utilities.
 * Seed: #0d7377 (deep teal - professional, cycling-focused)
 * 
 * Generated via Material Theme Builder:
 * https://material-foundation.github.io/material-theme-builder/
 * 
 * Structure: CSS custom properties organized by color role (primary, secondary, tertiary, neutral)
 * Each role includes tones 0-100 for flexible, accessible color application.
 * WCAG AA contrast guaranteed across all standard combinations.
 */

:root {
  /* ===== PRIMARY ROLE (Seed Color: #0d7377 Deep Teal) ===== */
  --md-sys-color-primary-0: #000000;
  --md-sys-color-primary-10: #002024;
  --md-sys-color-primary-20: #003d47;
  --md-sys-color-primary-25: #004d57;
  --md-sys-color-primary-30: #005d68;
  --md-sys-color-primary-35: #006d78;
  --md-sys-color-primary-40: #007d89;
  --md-sys-color-primary-50: #009aaa;
  --md-sys-color-primary-60: #00b8ca;
  --md-sys-color-primary-70: #00d5e6;
  --md-sys-color-primary-80: #5df2ff;
  --md-sys-color-primary-90: #a8f0ff;
  --md-sys-color-primary-95: #d2f9ff;
  --md-sys-color-primary-99: #f0fbfc;
  --md-sys-color-primary-100: #ffffff;

  /* ===== SECONDARY ROLE (Analogous: Teal-Green) ===== */
  --md-sys-color-secondary-0: #000000;
  --md-sys-color-secondary-10: #001f21;
  --md-sys-color-secondary-20: #023839;
  --md-sys-color-secondary-25: #0d4547;
  --md-sys-color-secondary-30: #1a5456;
  --md-sys-color-secondary-35: #276366;
  --md-sys-color-secondary-40: #357277;
  --md-sys-color-secondary-50: #509399;
  --md-sys-color-secondary-60: #6cb5bc;
  --md-sys-color-secondary-70: #87d7de;
  --md-sys-color-secondary-80: #a3f9ff;
  --md-sys-color-secondary-90: #c0f8ff;
  --md-sys-color-secondary-95: #d8fdff;
  --md-sys-color-secondary-99: #f0ffff;
  --md-sys-color-secondary-100: #ffffff;

  /* ===== TERTIARY ROLE (Complementary: Orange-Amber) ===== */
  --md-sys-color-tertiary-0: #000000;
  --md-sys-color-tertiary-10: #321500;
  --md-sys-color-tertiary-20: #4d2600;
  --md-sys-color-tertiary-25: #5d3107;
  --md-sys-color-tertiary-30: #6d3c0d;
  --md-sys-color-tertiary-35: #7d4814;
  --md-sys-color-tertiary-40: #8d541b;
  --md-sys-color-tertiary-50: #ab7333;
  --md-sys-color-tertiary-60: #ca934b;
  --md-sys-color-tertiary-70: #e9b564;
  --md-sys-color-tertiary-80: #ffd881;
  --md-sys-color-tertiary-90: #ffe5ba;
  --md-sys-color-tertiary-95: #fff1d6;
  --md-sys-color-tertiary-99: #fffbf7;
  --md-sys-color-tertiary-100: #ffffff;

  /* ===== NEUTRAL ROLE (Grays) ===== */
  --md-sys-color-neutral-0: #000000;
  --md-sys-color-neutral-10: #1a1c1d;
  --md-sys-color-neutral-20: #2e3032;
  --md-sys-color-neutral-25: #39403a;
  --md-sys-color-neutral-30: #454846;
  --md-sys-color-neutral-35: #505351;
  --md-sys-color-neutral-40: #5b5e5d;
  --md-sys-color-neutral-50: #757877;
  --md-sys-color-neutral-60: #909391;
  --md-sys-color-neutral-70: #aaadac;
  --md-sys-color-neutral-80: #c6c7c6;
  --md-sys-color-neutral-90: #e2e3e2;
  --md-sys-color-neutral-95: #f0f0f0;
  --md-sys-color-neutral-99: #faf9f9;
  --md-sys-color-neutral-100: #ffffff;

  /* ===== NEUTRAL VARIANT ROLE (Tinted Grays) ===== */
  --md-sys-color-neutral-variant-0: #000000;
  --md-sys-color-neutral-variant-10: #1a1f20;
  --md-sys-color-neutral-variant-20: #2f3637;
  --md-sys-color-neutral-variant-25: #3a4545;
  --md-sys-color-neutral-variant-30: #455050;
  --md-sys-color-neutral-variant-35: #505a5b;
  --md-sys-color-neutral-variant-40: #5b6667;
  --md-sys-color-neutral-variant-50: #768285;
  --md-sys-color-neutral-variant-60: #909a9d;
  --md-sys-color-neutral-variant-70: #aab4b7;
  --md-sys-color-neutral-variant-80: #c6d0d3;
  --md-sys-color-neutral-variant-90: #e2ecef;
  --md-sys-color-neutral-variant-95: #f0fafb;
  --md-sys-color-neutral-variant-99: #f9fdfb;
  --md-sys-color-neutral-variant-100: #ffffff;

  /* ===== ERROR ROLE (Red for validation, warnings) ===== */
  --md-sys-color-error-0: #000000;
  --md-sys-color-error-10: #410e0b;
  --md-sys-color-error-20: #601410;
  --md-sys-color-error-25: #73191a;
  --md-sys-color-error-30: #8c1d1b;
  --md-sys-color-error-35: #a4211f;
  --md-sys-color-error-40: #b3261e;
  --md-sys-color-error-50: #d84038;
  --md-sys-color-error-60: #f2b8b5;
  --md-sys-color-error-70: #f9dedc;
  --md-sys-color-error-80: #fce4e2;
  --md-sys-color-error-90: #fce4e2;
  --md-sys-color-error-95: #f9efed;
  --md-sys-color-error-99: #fffbf9;
  --md-sys-color-error-100: #ffffff;

  /* ===== SEMANTIC ROLES ===== */
  /* Light Theme Surface Colors */
  --md-sys-color-surface: var(--md-sys-color-neutral-99);
  --md-sys-color-surface-dim: var(--md-sys-color-neutral-87);
  --md-sys-color-surface-bright: var(--md-sys-color-neutral-99);
  --md-sys-color-surface-container-lowest: var(--md-sys-color-neutral-100);
  --md-sys-color-surface-container-low: var(--md-sys-color-neutral-96);
  --md-sys-color-surface-container: var(--md-sys-color-neutral-94);
  --md-sys-color-surface-container-high: var(--md-sys-color-neutral-92);
  --md-sys-color-surface-container-highest: var(--md-sys-color-neutral-90);

  --md-sys-color-on-surface: var(--md-sys-color-neutral-10);
  --md-sys-color-on-surface-variant: var(--md-sys-color-neutral-variant-30);

  --md-sys-color-background: var(--md-sys-color-neutral-99);
  --md-sys-color-on-background: var(--md-sys-color-neutral-10);

  /* Primary Action Colors */
  --md-sys-color-primary: var(--md-sys-color-primary-40);
  --md-sys-color-on-primary: var(--md-sys-color-primary-100);
  --md-sys-color-primary-container: var(--md-sys-color-primary-90);
  --md-sys-color-on-primary-container: var(--md-sys-color-primary-10);

  /* Secondary Action Colors */
  --md-sys-color-secondary: var(--md-sys-color-secondary-40);
  --md-sys-color-on-secondary: var(--md-sys-color-secondary-100);
  --md-sys-color-secondary-container: var(--md-sys-color-secondary-90);
  --md-sys-color-on-secondary-container: var(--md-sys-color-secondary-10);

  /* Tertiary Accent Colors */
  --md-sys-color-tertiary: var(--md-sys-color-tertiary-40);
  --md-sys-color-on-tertiary: var(--md-sys-color-tertiary-100);
  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-90);
  --md-sys-color-on-tertiary-container: var(--md-sys-color-tertiary-10);
  /* WCAG AA accessibility: Use bright tone for text on medium color bg */
  --md-sys-color-on-primary-light: var(--md-sys-color-primary-95);
  --md-sys-color-on-secondary-light: var(--md-sys-color-secondary-95);
  --md-sys-color-on-tertiary-light: var(--md-sys-color-tertiary-95);

  /* Outline & Border Colors */
  --md-sys-color-outline: var(--md-sys-color-neutral-variant-40);
  --md-sys-color-outline-variant: var(--md-sys-color-neutral-variant-80);
  --md-sys-color-inverse-on-surface: var(--md-sys-color-neutral-95);
  --md-sys-color-inverse-surface: var(--md-sys-color-neutral-20);
  --md-sys-color-inverse-primary: var(--md-sys-color-primary-80);

  /* ===== DARK THEME OVERRIDES (prefers-color-scheme: dark) ===== */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark Theme Surface Colors */
    --md-sys-color-surface: var(--md-sys-color-neutral-10);
    --md-sys-color-surface-dim: var(--md-sys-color-neutral-6);
    --md-sys-color-surface-bright: var(--md-sys-color-neutral-24);
    --md-sys-color-surface-container-lowest: var(--md-sys-color-neutral-4);
    --md-sys-color-surface-container-low: var(--md-sys-color-neutral-10);
    --md-sys-color-surface-container: var(--md-sys-color-neutral-12);
    --md-sys-color-surface-container-high: var(--md-sys-color-neutral-17);
    --md-sys-color-surface-container-highest: var(--md-sys-color-neutral-22);

    --md-sys-color-on-surface: var(--md-sys-color-neutral-90);
    --md-sys-color-on-surface-variant: var(--md-sys-color-neutral-variant-80);

    --md-sys-color-background: var(--md-sys-color-neutral-10);
    --md-sys-color-on-background: var(--md-sys-color-neutral-90);

    /* Dark Theme Primary Colors */
    --md-sys-color-primary: var(--md-sys-color-primary-80);
    --md-sys-color-on-primary: var(--md-sys-color-primary-20);
    --md-sys-color-primary-container: var(--md-sys-color-primary-30);
    --md-sys-color-on-primary-container: var(--md-sys-color-primary-90);

    /* Dark Theme Secondary Colors */
    --md-sys-color-secondary: var(--md-sys-color-secondary-80);
    --md-sys-color-on-secondary: var(--md-sys-color-secondary-20);
    --md-sys-color-secondary-container: var(--md-sys-color-secondary-30);
    --md-sys-color-on-secondary-container: var(--md-sys-color-secondary-90);

    /* Dark Theme Tertiary Colors */
    --md-sys-color-tertiary: var(--md-sys-color-tertiary-80);
    --md-sys-color-on-tertiary: var(--md-sys-color-tertiary-20);
    --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-30);
    --md-sys-color-on-tertiary-container: var(--md-sys-color-tertiary-90);

    /* Dark Theme Outline Colors */
    --md-sys-color-outline: var(--md-sys-color-neutral-variant-60);
    --md-sys-color-outline-variant: var(--md-sys-color-neutral-variant-30);
    --md-sys-color-inverse-on-surface: var(--md-sys-color-neutral-10);
    --md-sys-color-inverse-surface: var(--md-sys-color-neutral-90);
    --md-sys-color-inverse-primary: var(--md-sys-color-primary-40);
  }
}

:root[data-theme="dark"] {
  --md-sys-color-surface: var(--md-sys-color-neutral-10);
  --md-sys-color-surface-dim: var(--md-sys-color-neutral-6);
  --md-sys-color-surface-bright: var(--md-sys-color-neutral-24);
  --md-sys-color-surface-container-lowest: var(--md-sys-color-neutral-4);
  --md-sys-color-surface-container-low: var(--md-sys-color-neutral-10);
  --md-sys-color-surface-container: var(--md-sys-color-neutral-12);
  --md-sys-color-surface-container-high: var(--md-sys-color-neutral-17);
  --md-sys-color-surface-container-highest: var(--md-sys-color-neutral-22);
  --md-sys-color-on-surface: var(--md-sys-color-neutral-90);
  --md-sys-color-on-surface-variant: var(--md-sys-color-neutral-variant-80);
  --md-sys-color-background: var(--md-sys-color-neutral-10);
  --md-sys-color-on-background: var(--md-sys-color-neutral-90);
  --md-sys-color-primary: var(--md-sys-color-primary-80);
  --md-sys-color-on-primary: var(--md-sys-color-primary-20);
  --md-sys-color-primary-container: var(--md-sys-color-primary-30);
  --md-sys-color-on-primary-container: var(--md-sys-color-primary-90);
  --md-sys-color-secondary: var(--md-sys-color-secondary-80);
  --md-sys-color-on-secondary: var(--md-sys-color-secondary-20);
  --md-sys-color-secondary-container: var(--md-sys-color-secondary-30);
  --md-sys-color-on-secondary-container: var(--md-sys-color-secondary-90);
  --md-sys-color-tertiary: var(--md-sys-color-tertiary-80);
  --md-sys-color-on-tertiary: var(--md-sys-color-tertiary-20);
  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-30);
  --md-sys-color-on-tertiary-container: var(--md-sys-color-tertiary-90);
  --md-sys-color-outline: var(--md-sys-color-neutral-variant-60);
  --md-sys-color-outline-variant: var(--md-sys-color-neutral-variant-30);
  --md-sys-color-inverse-on-surface: var(--md-sys-color-neutral-10);
  --md-sys-color-inverse-surface: var(--md-sys-color-neutral-90);
  --md-sys-color-inverse-primary: var(--md-sys-color-primary-40);
}

:root[data-theme="light"] {
  --md-sys-color-surface: var(--md-sys-color-neutral-99);
  --md-sys-color-surface-dim: var(--md-sys-color-neutral-87);
  --md-sys-color-surface-bright: var(--md-sys-color-neutral-99);
  --md-sys-color-surface-container-lowest: var(--md-sys-color-neutral-100);
  --md-sys-color-surface-container-low: var(--md-sys-color-neutral-96);
  --md-sys-color-surface-container: var(--md-sys-color-neutral-94);
  --md-sys-color-surface-container-high: var(--md-sys-color-neutral-92);
  --md-sys-color-surface-container-highest: var(--md-sys-color-neutral-90);
  --md-sys-color-on-surface: var(--md-sys-color-neutral-10);
  --md-sys-color-on-surface-variant: var(--md-sys-color-neutral-variant-30);
  --md-sys-color-background: var(--md-sys-color-neutral-99);
  --md-sys-color-on-background: var(--md-sys-color-neutral-10);
  --md-sys-color-primary: var(--md-sys-color-primary-40);
  --md-sys-color-on-primary: var(--md-sys-color-primary-100);
  --md-sys-color-primary-container: var(--md-sys-color-primary-90);
  --md-sys-color-on-primary-container: var(--md-sys-color-primary-10);
  --md-sys-color-secondary: var(--md-sys-color-secondary-40);
  --md-sys-color-on-secondary: var(--md-sys-color-secondary-100);
  --md-sys-color-secondary-container: var(--md-sys-color-secondary-90);
  --md-sys-color-on-secondary-container: var(--md-sys-color-secondary-10);
  --md-sys-color-tertiary: var(--md-sys-color-tertiary-40);
  --md-sys-color-on-tertiary: var(--md-sys-color-tertiary-100);
  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-90);
  --md-sys-color-on-tertiary-container: var(--md-sys-color-tertiary-10);
  --md-sys-color-outline: var(--md-sys-color-neutral-variant-40);
  --md-sys-color-outline-variant: var(--md-sys-color-neutral-variant-80);
  --md-sys-color-inverse-on-surface: var(--md-sys-color-neutral-95);
  --md-sys-color-inverse-surface: var(--md-sys-color-neutral-20);
  --md-sys-color-inverse-primary: var(--md-sys-color-primary-80);
}