:root {
    /* Default Theme (Slate-inspired Dark) */
    --primary-dark: #0f172a;
    --primary-body-dark: #1e293b;
    --primary-light: #f8fafc;
    --accent-blue: #64748b;
    --accent-green: #475569;
    --accent-red: #94a3b8;
    --text-primary: #000000;
    --text-secondary: #64748b;
    --hover-bg: #97a0ad;
    --dropdown-bg: #e2e8f0;
    --border-color: #334155;
    --body-bg: #f1f5f9;
    --card-bg: #f8fafc;
    --group-header-bg: #1e293b;
    --group-header-text: #ffffff;
    --table-header-bg: #1e293b;
  }
  
  /* 1. Light Theme (Slate-inspired) */
  html[data-theme="light"] {
    --primary-dark: #ffffff;
    --primary-body-dark: #f1f5f9;
    --primary-light: #f8fafc;
    --accent-blue: #475569;
    --accent-green: #64748b;
    --accent-red: #94a3b8;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --hover-bg: #cbd5e1;
    --dropdown-bg: #f8fafc;
    --border-color: #e2e8f0;
    --body-bg: #f8fafc;
    --card-bg: #ffffff;
    --group-header-bg: #878788;
    --group-header-text: #0f172a;
    --table-header-bg: #f1f5f9;
  }
  
  /* 2. Slate Theme - UNCHANGED */
  html[data-theme="slate"] 
  {
    --primary-dark: #0f172a;
    --primary-body-dark: #2c3e50;
    --primary-light: #f8fafc;
    --accent-blue: #848485;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --text-primary: #000000;
    --text-secondary: #94a3b8;
    --hover-bg: #94a3b8;
    --dropdown-bg: #e6e6e6;
    --border-color: #334155;
    --body-bg: #f1f5f9;
    --card-bg: #f9f9f9;
    --group-header-bg: #2c3e50;
    --group-header-text: #ffffff;
    --table-header-bg: #171515;
  }
  
  /* 3. Midnight Theme (Slate-inspired darker) */
  html[data-theme="midnight"] {
    --primary-dark: #0f172a;
    --primary-body-dark: #1e293b;
    --primary-light: #e2e8f0;
    --accent-blue: #475569;
    --accent-green: #64748b;
    --accent-red: #94a3b8;
    --text-primary: #000000;
    --text-secondary: #64748b;
    --hover-bg: #484949;
    --dropdown-bg: #cbd5e1;
    --border-color: #334155;
    --body-bg: #e2e8f0;
    --card-bg: #f1f5f9;
    --group-header-bg: #1e293b;
    --group-header-text: #ffffff;
    --table-header-bg: #1e293b;
  }
  
  /* 4. Sky Light Theme (True sky colors) */
html[data-theme="sky"] {
  --primary-dark: #ffffff;
  --primary-body-dark: #e0f2fe;
  --primary-light: #f0f9ff;
  --accent-blue: #0ea5e9;
  --accent-green: #06b6d4;
  --accent-red: #3b82f6;
  --text-primary: #0c4a6e;
  --text-secondary: #0369a1;
  --hover-bg: #bae6fd;
  --dropdown-bg: #e0f2fe;
  --border-color: #7dd3fc;
  --body-bg: #f0f9ff;
  --card-bg: #ffffff;
  --group-header-bg: #0ea5e9;
  --group-header-text: #4d87b0;
  --table-header-bg: #74bcdc;
}

  /* 4. Sky Light Theme (Slate-inspired light) */
  /* html[data-theme="sky"] {
    --primary-dark: #ffffff;
    --primary-body-dark: #f1f5f9;
    --primary-light: #f8fafc;
    --accent-blue: #64748b;
    --accent-green: #475569;
    --accent-red: #94a3b8;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --hover-bg: #cbd5e1;
    --dropdown-bg: #e2e8f0;
    --border-color: #cbd5e1;
    --body-bg: #f8fafc;
    --card-bg: #ffffff;
    --group-header-bg: #64748b;
    --group-header-text: #ffffff;
    --table-header-bg: #64748b;
  }
   */
  /* 5. Graphite Theme (Slate-inspired gray) */
  html[data-theme="graphite"] {
    --primary-dark: #1e293b;
    --primary-body-dark: #334155;
    --primary-light: #e2e8f0;
    --accent-blue: #475569;
    --accent-green: #257449;
    --accent-red: #94a3b8;
    --text-primary: #000000;
    --text-secondary: #64748b;
    --hover-bg: #64748b;
    --dropdown-bg: #cbd5e1;
    --border-color: #475569;
    --body-bg: #e2e8f0;
    --card-bg: #f1f5f9;
    --group-header-bg: #334155;
    --group-header-text: #ffffff;
    --table-header-bg: #334155;
  }
  
  /* 6. Ocean Theme (Slate-inspired blue-gray) */
  html[data-theme="ocean"] {
    --primary-dark: #0f172a;
    --primary-body-dark: #1e293b;
    --primary-light: #dbeafe;
    --accent-blue: #475569;
    --accent-green: #257449;
    --accent-red: #94a3b8;
    --text-primary: #000000;
    --text-secondary: #64748b;
    --hover-bg: #64748b;
    --dropdown-bg: #bfdbfe;
    --border-color: #334155;
    --body-bg: #dbeafe;
    --card-bg: #eff6ff;
    --group-header-bg: #1e293b;
    --group-header-text: #ffffff;
    --table-header-bg: #1e293b;
  }