:root {
  --color-primary: #0c2a44;
  --dark-blue: #06192a;
  --green-blue: #114864;
  --cyan: #00a1ab;
  --black: #000000;
  --gray: #353535;
  --light-gray: #e8e8e8;
  --light-gray2: #e7ecee;
  --blue-gray: #c4d1dc;
  --blue-gray2: #eef2f5;
  --text-gray: #c5d1d8;
  --white: #fff;

  --bg-color: #eef2f5;

  /* COLORS THAT DONT CHANGE ON DARKMODE */
  --bg-white: #fff;
  --enable-primary: #0c2a44;
  --green-assigned: #44e27d;
  --gray-unassigned: #a4a4a2;
  --blue-used: #3d98c4;

  /* NAV BAR COLORS - Stay unchanged in dark mode */
  --color-primary-nav: #0c2a44;
  --dark-blue-nav: #06192a;
  --green-blue-nav: #114864;
  --cyan-nav: #00a1ab;
  --black-nav: #000000;
  --gray-nav: #353535;
  --light-gray-nav: #e8e8e8;
  --light-gray2-nav: #e7ecee;
  --blue-gray-nav: #c4d1dc;
  --white-nav: #fff;
  --border-nav: #0c2a44;
  --collapse-nav-open: #fff;
  --collapse-nav-closed: #0c2a44;
}

/* ROOT COLORS SWITCH WHEN DARK MODE - Softer dark theme */
[data-theme='dark'] {
  /* Text colors - lighter for readability */
  --color-primary: #e8e8e8;
  --black: #e8e8e8;
  --gray: #b0b8c0;
  --text-gray: #9ca3af;

  /* Background colors - softer dark grays/blues, closer to sidebar */
  --bg-color: #0f1a26;
  --light-gray: #1a2535;
  --light-gray2: #152030;
  --blue-gray: #2a3545;
  --blue-gray2: #1f2a3a;

  /* Accent colors - keep cyan, adjust others */
  --cyan: #00a1ab;
  --green-blue: #5a7a8a;
  --dark-blue: #06192a;

  /* White becomes dark background equivalent */
  --white: #1a1f2e;

  /* Border colors */
  --border-nav: #3a4150;
  --collapse-nav-open: #2d3440;
  --collapse-nav-closed: #2d3440;
}

/* Input text color adapts to theme */
input {
  color: var(--black);
  background-color: var(--white);
}

[data-theme='dark'] input {
  color: var(--black);
  background-color: var(--light-gray);
}