:root {
  /* 
   * Material 3 Design Tokens
   * Source Color: #38bdf8 (Sky Blue)
   */

  /* Light Theme Colors */
  --md-sys-color-primary: #00668b;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #c3e7ff;
  --md-sys-color-on-primary-container: #001e2d;

  --md-sys-color-secondary: #4e616d;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d1e5f4;
  --md-sys-color-on-secondary-container: #0a1e28;

  --md-sys-color-tertiary: #605a7d;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #e6deff;
  --md-sys-color-on-tertiary-container: #1c1736;

  --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: #f8fafc; /* Slate 50 - Aligned with existing light theme vibe */
  --md-sys-color-on-background: #191c1e;

  --md-sys-color-surface: #f8fafc;
  --md-sys-color-on-surface: #191c1e;
  
  --md-sys-color-surface-variant: #dce3e9;
  --md-sys-color-on-surface-variant: #40484c;
  
  --md-sys-color-outline: #71787d;
  --md-sys-color-outline-variant: #c0c7cd;

  /* Surface Containers (for Cards/Modals) */
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f3f6f9;
  --md-sys-color-surface-container: #edf1f4; /* Default Card BG */
  --md-sys-color-surface-container-high: #e7ecf0;
  --md-sys-color-surface-container-highest: #e1e6ea;

  /* Typography - Type Scale (Using Inter & Fira Code) */
  --md-sys-typescale-display-large: 900 3.5rem/1.125 var(--font-main);
  --md-sys-typescale-display-medium: 900 2.8rem/1.16 var(--font-main);
  --md-sys-typescale-display-small: 800 2.25rem/1.22 var(--font-main);

  --md-sys-typescale-headline-large: 700 2rem/1.25 var(--font-main);
  --md-sys-typescale-headline-medium: 600 1.75rem/1.29 var(--font-main);
  --md-sys-typescale-headline-small: 500 1.5rem/1.33 var(--font-main);

  --md-sys-typescale-title-large: 500 1.375rem/1.27 var(--font-main);
  --md-sys-typescale-title-medium: 500 1.125rem/1.5 var(--font-main);
  --md-sys-typescale-title-small: 500 0.875rem/1.43 var(--font-main);

  --md-sys-typescale-body-large: 400 1.125rem/1.6 var(--font-main); /* ~18px */
  --md-sys-typescale-body-medium: 400 1rem/1.5 var(--font-main);      /* 16px */
  --md-sys-typescale-body-small: 400 0.875rem/1.43 var(--font-main);   /* 14px */
  
  --md-sys-typescale-label-large: 600 0.875rem/1.43 var(--font-main);
  --md-sys-typescale-label-medium: 600 0.75rem/1.33 var(--font-main);
  --md-sys-typescale-label-small: 600 0.6875rem/1.45 var(--font-main);

  /* Shape */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px; /* Cards */
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px; /* Buttons */

  /* Elevation */
  --md-sys-elevation-level-0: 0px 0px 0px 0px transparent;
  --md-sys-elevation-level-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level-4: 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level-5: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
}

/* Dark Theme Colors - Activated by data-theme="dark" attribute */
:root[data-theme="dark"] {
  --md-sys-color-primary: #7dd3fc; /* Lighter Sky Blue */
  --md-sys-color-on-primary: #003549;
  --md-sys-color-primary-container: #004c69;
  --md-sys-color-on-primary-container: #c3e7ff;

  --md-sys-color-secondary: #b5c9d7;
  --md-sys-color-on-secondary: #20333d;
  --md-sys-color-secondary-container: #364954;
  --md-sys-color-on-secondary-container: #d1e5f4;

  --md-sys-color-tertiary: #c9c1ea;
  --md-sys-color-on-tertiary: #312c4c;
  --md-sys-color-tertiary-container: #484264;
  --md-sys-color-on-tertiary-container: #e6deff;

  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;

  --md-sys-color-background: #0f172a; /* Slate 900 */
  --md-sys-color-on-background: #e1e2e4;

  --md-sys-color-surface: #0f172a;
  --md-sys-color-on-surface: #e1e2e4;

  --md-sys-color-surface-variant: #40484c;
  --md-sys-color-on-surface-variant: #c0c7cd;
  
  --md-sys-color-outline: #8a9297;
  --md-sys-color-outline-variant: #40484c;

  /* Surface Containers */
  --md-sys-color-surface-container-lowest: #0b1221;
  --md-sys-color-surface-container-low: #1e293b; /* Slate 800 */
  --md-sys-color-surface-container: #222d40;
  --md-sys-color-surface-container-high: #2b364a;
  --md-sys-color-surface-container-highest: #354055;
  
  /* Adjust elevation for dark mode (subtle borders/lighter overlay) */
  --md-sys-elevation-level-1: 0px 4px 8px 3px rgba(0, 0, 0, 0.4), 0px 1px 3px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level-2: 0px 8px 12px 6px rgba(0, 0, 0, 0.4), 0px 4px 4px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level-3: 0px 12px 16px 8px rgba(0, 0, 0, 0.4), 0px 6px 6px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level-4: 0px 16px 24px 10px rgba(0, 0, 0, 0.4), 0px 8px 8px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level-5: 0px 24px 36px 12px rgba(0, 0, 0, 0.4), 0px 12px 12px rgba(0, 0, 0, 0.3);
}