/* Common Color Palette - Static colors that don't change */
:root {
  /* Base color palette */
  --color-blue: #1976d2;
  --color-pink: #e91e63;
  --color-purple: #673ab7;
  --color-gold: #b8860b;
  --color-success: #4caf50;
  --color-warning: #f44336;
  --color-light-blue: #03a9f4;
  --color-light-pink: #f48fb1;
  --color-light-purple: #b39ddb;
  --color-light-gold: #daa520;
  --color-white: #ffffff;
  --color-light-gray: #f8f9fa;
  --color-dark-gray: #212529;
  --color-dark-gold-bg: #2c2416;
  --color-dark-gold-card: #3d3220;
  --color-dark-gold-text: #f4e4a6;
  --color-dark-gold-border: #5a4a2a;
  --color-dark-gold-muted: #a0956b;
  --color-muted: #6c757d;
  --color-border-light: #dee2e6;
  --color-border-blue: #bbdefb;
  --color-border-pink: #f8bbd0;
  --color-border-purple: #d1c4e9;
  --color-bg-blue: #e3f2fd;
  --color-bg-pink: #fce4ec;
  --color-bg-purple: #ede7f6;
  --color-text-blue: #0d47a1;
  --color-text-pink: #880e4f;
  --color-text-purple: #4a148c;
}

/* Default Theme Variables */
:root {
  --primary-color: #3f51b5;
  --accent-color: #ff4081;
  --warn-color: var(--color-warning);
  --success-color: var(--color-success);
  --muted-text-color: var(--color-muted);
  --text-color-inverse: var(--color-white);
  --background-color: var(--color-light-gray);
  --card-background: var(--color-white);
  --text-color: var(--color-dark-gray);
  --border-color: var(--color-border-light);
  
  /* Text color variables for different surfaces */
  --text-primary: var(--color-dark-gray);
  --text-secondary: var(--color-muted);
  --text-on-primary: var(--color-white);
  --surface-color: var(--color-white);
  --surface-variant: var(--color-light-gray);
  --hover-color: rgba(0, 0, 0, 0.04);
  --primary-hover: #3949ab;
  --primary-color-25: rgba(63, 81, 181, 0.25);
}

/* Blue Theme */
body.theme-blue {
  --primary-color: var(--color-blue);
  --accent-color: var(--color-light-blue);
  --background-color: var(--color-bg-blue);
  --card-background: var(--color-white);
  --text-color: var(--color-text-blue);
  --border-color: var(--color-border-blue);
  
  --text-primary: var(--color-text-blue);
  --text-secondary: var(--color-muted);
  --text-on-primary: var(--color-white);
  --surface-color: var(--color-white);
  --surface-variant: var(--color-bg-blue);
  --hover-color: rgba(25, 118, 210, 0.04);
  --primary-hover: #1565c0;
  --primary-color-25: rgba(25, 118, 210, 0.25);
}

/* Pink Theme */
body.theme-pink {
  --primary-color: var(--color-pink);
  --accent-color: var(--color-light-pink);
  --background-color: var(--color-bg-pink);
  --card-background: var(--color-white);
  --text-color: var(--color-text-pink);
  --border-color: var(--color-border-pink);
  
  --text-primary: var(--color-text-pink);
  --text-secondary: var(--color-muted);
  --text-on-primary: var(--color-white);
  --surface-color: var(--color-white);
  --surface-variant: var(--color-bg-pink);
  --hover-color: rgba(233, 30, 99, 0.04);
  --primary-hover: #c2185b;
  --primary-color-25: rgba(233, 30, 99, 0.25);
}

/* Purple Theme */
body.theme-purple {
  --primary-color: var(--color-purple);
  --accent-color: var(--color-light-purple);
  --background-color: var(--color-bg-purple);
  --card-background: var(--color-white);
  --text-color: var(--color-text-purple);
  --border-color: var(--color-border-purple);
  
  --text-primary: var(--color-text-purple);
  --text-secondary: var(--color-muted);
  --text-on-primary: var(--color-white);
  --surface-color: var(--color-white);
  --surface-variant: var(--color-bg-purple);
  --hover-color: rgba(103, 58, 183, 0.04);
  --primary-hover: #512da8;
  --primary-color-25: rgba(103, 58, 183, 0.25);
}

/* Dark Gold Theme */
body.theme-gold {
  --primary-color: var(--color-gold);
  --accent-color: var(--color-light-gold);
  --background-color: var(--color-dark-gold-bg);
  --card-background: var(--color-dark-gold-card);
  --text-color: var(--color-dark-gold-text);
  --border-color: var(--color-dark-gold-border);
  --text-color-inverse: var(--color-dark-gold-bg);
  --muted-text-color: var(--color-dark-gold-muted);
  
  --text-primary: var(--color-dark-gold-text);
  --text-secondary: var(--color-dark-gold-muted);
  --text-on-primary: var(--color-dark-gold-bg);
  --surface-color: var(--color-dark-gold-card);
  --surface-variant: var(--color-dark-gold-bg);
  --hover-color: rgba(218, 165, 32, 0.04);
  --primary-hover: #9b7f0c;
  --primary-color-25: rgba(184, 134, 11, 0.25);
}

/* Theme button colors - using common color variables */
.theme-blue-option { 
  background-color: var(--color-blue) !important;
}
.theme-pink-option { 
  background-color: var(--color-pink) !important;
}
.theme-purple-option { 
  background-color: var(--color-purple) !important;
}
.theme-gold-option { 
  background-color: var(--color-gold) !important;
}
