:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --nav-bg: #000000;
    --nav-text: #ffffff;
    --accent-color: #0077ff;
  }
  .theme-light {
    --bg-color: #fef6fb;
    --text-color: #4b4453;
    --nav-bg: #fff0f5;
    --nav-text: #5e548e;
    --accent-color: #a3d2ca;
  }
  .theme-dark {
    --bg-color: #0d0d0d;
    --text-color: #00f7ff;
    --nav-bg: #1a1a1a;
    --nav-text: #ff00ff;
    --accent-color: #00ffea;
  }
  
  .theme-tropical {
    --bg-color: #fdf5e6;
    --text-color: #22543d;
    --nav-bg: #ffd6a5;
    --nav-text: #004d40;
    --accent-color: #00c2a8;
  }
  
  .theme-luxury {
    --bg-color: #1e1e1e;
    --text-color: #e6e6e6;
    --nav-bg: linear-gradient(90deg, #d4af37, #c0c0c0);
    --nav-text: #ffffff;
    --accent-color: #ffd700;
  }
  
  .theme-midnight {
    --bg-color: #0f172a;
    --text-color: #c7d2fe;
    --nav-bg: #1e293b;
    --nav-text: #93c5fd;
    --accent-color: #6366f1;
  }
  
  .theme-fruity {
    --bg-color: #fff5e1;
    --text-color: #ff4d6d;
    --nav-bg: #ffc6ff;
    --nav-text: #ff006e;
    --accent-color: #fb5607;
  }
  
  body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.4s, color 0.4s;
  }
  
  .navbar {
    background-color: var(--nav-bg);
    color: var(--nav-text);
    transition: background-color 0.4s, color 0.4s;
  }
  
  button, select, input {
    accent-color: var(--accent-color);
  }
  
  a {
    color: var(--accent-color);
  }
  
  .navbar a {
    color: var(--nav-text);
  }
  
  * {
    transition: background-color 0.3s ease, color 0.3s ease;
  }