:root {
  /* color pallet */
  --red-1: #DB2800;
  --red-2: #ff000036;
  --blue-1: #dbeef9;
  --blue-2: #007bff;
  --blue-3: #1773C4;
  --blue-4: #049fce;
  --blue-5: #000d9d;
  --blue-6: #101445;
  --blue-7: #060522;
  --blue-8: #646fe60d;
  --blue-fb: #3b5998;
  --blue-in: #0077b5;
  --purple-1: #5460E3;
  --purple-2: #646fe680;
  --purple-3: #838CEB;
  --gray-1: #ccc;
  --gray-2: #374151;
  --gray-3: #2f2f2f;
  --gray-4: #7e7b7b33;
  --white-1: #fff;
  --white-2: #fbfcfc;
  --white-3: #FBFBFB;
  --black-1: black;
  --black-2: #000000b3;
  --green-1: #35e20036;
  --green-2: #25D366;
  --green-3: #1abc9c;
  --green-4: #0BB0B0;
  --pink-1: #e5a0b9;
  --yellow-1: #ffc107;

  /* General variables */
  --gradient-1: linear-gradient(to right, var(--blue-4), var(--purple-1));
  --gradient-2: linear-gradient(90deg, #E6F5FA 0%, #EFF0FC 100%);

  /* Color variables */
  --color-background: var(--white-1);
  --color-separator-border: var(--gray-1);
  --color-scrollbar-background: var(--blue-1);
  --color-text: var(--gray-2);
  --color-input-background: var(--white-1);
  --color-input-placeholder: var(--gray-3);
  --color-checkbox-accent: var(--blue-2);
  --color-backdrop: var(--black-2);
  --color-card-background-1: var(--white-1);
  --color-card-background-2: var(--gradient-2);
}

[data-theme="dark"] {
  --color-background: var(--blue-7);
  --color-text: var(--white-1);
  --color-separator-border: var(--blue-6);
  --color-scrollbar-background: var(--blue-6);
  --color-input-background: var(--blue-6);
  --color-input-placeholder: var(--gray-1);
  --color-checkbox-accent: var(--purple-1);
  --color-backdrop: var(--gray-4);
  --color-card-background-1: var(--blue-6);
  --color-card-background-2:var(--blue-6);
}

html {
  font-size: 16px; /* Optional: ensures 1rem = 16px */
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-text-size-adjust: 100%; /* Prevents font boosting in iOS Safari */
}

/* Scrollbar Styles */

::-webkit-scrollbar {
  width: .3125rem;
  height: .3125rem;
}

::-webkit-scrollbar-track {
  background: var(--color-scrollbar-background);
}

::-webkit-scrollbar-thumb {
  border-radius: .0938rem;
  background-color: var(--purple-2);
}

/* Background for Popup Modals */

.backdrop {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-backdrop);
}

/* General Styles */

.hidden {
  display: none !important;
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text);
}

input, textarea {
  border: .0625rem solid var(--color-separator-border);
  background-color: var(--color-input-background);
  color: var(--color-text);
}

input::placeholder, textarea::placeholder {
  color: var(--color-input-placeholder);
}

input[type="checkbox"] {
  accent-color: var(--color-checkbox-accent);
}

.user-icon {
  fill: var(--pink-1);
  stroke: none;
}

#header {
  position: sticky;
  top: 0;
  z-index: 990;
}

@media (pointer: fine) {
  ::-webkit-scrollbar-thumb:hover {
    background: var(--purple-1);
  }
}