:root {
  /* Material Design 3 color system - Light theme */
  --md-primary: #6750A4;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #EADDFF;
  --md-on-primary-container: #21005E;
  --md-secondary: #625B71;
  --md-on-secondary: #FFFFFF;
  --md-secondary-container: #E8DEF8;
  --md-on-secondary-container: #1E192B;
  --md-tertiary: #7D5260;
  --md-tertiary-container: #FFD8E4;
  --md-on-tertiary: #FFFFFF;
  --md-on-tertiary-container: #31111D;
  --md-surface: #FFFBFE;
  --md-surface-1: #F7F2FA;
  --md-surface-2: #F3EDF7;
  --md-surface-3: #EEE8F4;
  --md-surface-4: #EAE4F1;
  --md-surface-5: #E6E0ED;
  --md-on-surface: #1C1B1F;
  --md-surface-variant: #E7E0EC;
  --md-on-surface-variant: #49454E;
  --md-outline: #79747E;
  --md-outline-variant: #CAC4D0;
  --md-shadow: rgba(0, 0, 0, 0.15);
  --md-error: #B3261E;
  --md-on-error: #FFFFFF;
  --md-success: #2E7D32;
  --md-on-success: #FFFFFF;
  --md-outline-rgb: 121, 116, 126; /* RGB values for --md-outline */

  /* Typography */
  --md-font-display: 'Inter', sans-serif;
  --md-font-body: 'Inter', sans-serif;
  --md-font-code: 'JetBrains Mono', monospace;

  /* Animation speeds */
  --animation-fast: 0.2s;
  --animation-medium: 0.3s;
  --animation-slow: 0.5s;

    /* Add new color themes */
    --md-primary-blue: #1E88E5;
    --md-on-primary-blue: #FFFFFF;
    --md-primary-green: #43A047;
    --md-on-primary-green: #FFFFFF;

  /* Ghibli-inspired backgrounds */
  --bg-light: linear-gradient(135deg, #f5f7fa 0%, #fffbfe 100%);
  --bg-pattern-light: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7zM45 5c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7zM15 5c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7z' fill='%236750A4' fill-opacity='0.03'/%3E%3C/svg%3E");
  
  --bg-dark: linear-gradient(135deg, #1a1b1f 0%, #1C1B1F 100%);
  --bg-pattern-dark: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7zM45 5c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7zM15 5c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7z' fill='%23D0BCFF' fill-opacity='0.03'/%3E%3C/svg%3E");
  
  --bg-blue: linear-gradient(135deg, #e3f2fd 0%, #f5f7fa 100%);
  --bg-pattern-blue: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7zM45 5c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7zM15 5c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7z' fill='%231E88E5' fill-opacity='0.03'/%3E%3C/svg%3E");
  
  --bg-green: linear-gradient(135deg, #e8f5e9 0%, #f5f7fa 100%);
  --bg-pattern-green: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7zM45 5c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7zM15 5c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7z' fill='%2343A047' fill-opacity='0.03'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
  /* Material Design 3 color system - Dark theme */
  --md-primary: #D0BCFF;
  --md-on-primary: #381E72;
  --md-primary-container: #4F378B;
  --md-on-primary-container: #EADDFF;
  --md-secondary: #CCC2DC;
  --md-on-secondary: #332D41;
  --md-secondary-container: #4A4458;
  --md-on-secondary-container: #E8DEF8;
  --md-tertiary: #EFB8C8;
  --md-tertiary-container: #633B48;
  --md-on-tertiary: #492532;
  --md-on-tertiary-container: #FFD8E4;
  --md-surface: #1C1B1F;
  --md-surface-1: #24232A;
  --md-surface-2: #2B2930;
  --md-surface-3: #322F35;
  --md-surface-4: #39363F;
  --md-surface-5: #403D46;
  --md-on-surface: #E6E1E5;
  --md-surface-variant: #49454F;
  --md-on-surface-variant: #CAC4D0;
  --md-outline: #938F99;
  --md-outline-variant: #49454F;
  --md-shadow: rgba(0, 0, 0, 0.3);
  --md-error: #F2B8B5;
  --md-on-error: #601410;
  --md-success: #66BB6A;
  --md-on-success: #0E3E10;
  --md-outline-rgb: 147, 143, 153; /* RGB values for dark theme outline */
}

[data-theme="blue"] {
  --md-primary: var(--md-primary-blue);
  --md-on-primary: var(--md-on-primary-blue);
}

[data-theme="green"] {
  --md-primary: var(--md-primary-green);
  --md-on-primary: var(--md-on-primary-green);
}

/* Theme-specific backgrounds */
[data-theme="light"] body {
  background: var(--bg-pattern-light), var(--bg-light);
  background-attachment: fixed;
}

[data-theme="dark"] body {
  background: var(--bg-pattern-dark), var(--bg-dark);
  background-attachment: fixed;
}

[data-theme="blue"] body {
  background: var(--bg-pattern-blue), var(--bg-blue);
  background-attachment: fixed;
}

[data-theme="green"] body {
  background: var(--bg-pattern-green), var(--bg-green);
  background-attachment: fixed;
}