:root {
  --primary: #3182ce;
  --secondary: #303972;
  --field: #b0d9ff;
  --text: black;
  --subtext: #9d9d9d;
  --label: #0d5190;
  --bg: rgb(255, 255, 255);
  --bg2: #f4f7fe;
  --bg3: rgba(255, 255, 255, 0.82);
  --border-color: #b0d9ff;
  --shadow: rgba(0, 0, 0, 0.15);
  --white: white;
  --bgsidebar: #e9e9e9;
  --textsidebar: #a0aec0;
  --sidebarwidth: 14vw;
  --sidebarminwidth: 14vw;
  --sidebarspace: 1%;
  --links: #25638f;

  --button: #2d3748;
  --layoutpadding: 3%;
  --border-radius: 10px;

  --utils_color_one: #fb7d5b;
  --utils_color_tow: #fcc43e;

  --presence: #31ce83;
  --absence: #ce3131;
  --lateArrival: #f0e43b;
  --earlyDeparture: #3182ce;
}

:root:has(.dark) {
  --primary: #3182ce;
  --secondary: #303972;
  --field: #b0d9ff;
  --text: white;
  --subtext: #9d9d9d;
  --label: #0d5190;
  --bg: rgb(51, 51, 51);
  --bg2: black;
  --bg3: rgba(255, 255, 255, 0.82);
  --border-color: #b0d9ff;
  --shadow: rgba(0, 0, 0, 0.15);
  --white: white;
  --bgsidebar: #e9e9e9;
  --textsidebar: #a0aec0;
  --sidebarwidth: 14vw;
  --sidebarminwidth: 14vw;
  --sidebarspace: 1%;
  --links: #25638f;

  --button: #2d3748;
  --layoutpadding: 3%;
  --border-radius: 10px;

  --utils_color_one: #fb7d5b;
  --utils_color_tow: #fcc43e;

  --presence: #31ce83;
  --absence: #ce3131;
  --lateArrival: #f0e43b;
  --earlyDeparture: #3182ce;
}
