:root {
  /* COLORS */
  --black: hsl(0, 0%, 0%);
  --white: hsl(0, 100%, 100%);
  --red: hsl(0, 82%, 63%);
  --grey_50: hsl(220, 38%, 97%);
  --grey_500: hsl(219, 13%, 44%);
  --blue_50: hsl(225, 100%, 96%);
  --blue_100: hsl(220, 50%, 95%);
  --blue_300: hsl(216, 47%, 78%);
  --blue_500: hsl(223, 100%, 59%);
  --blue_850: hsl(215, 27%, 32%);
  --blue_900: hsl(216, 25%, 25%);
  --blue_950: hsl(214, 24%, 23%);
  --green_100: hsl(151, 88%, 94%);
  --green_500: hsl(151, 68%, 52%);
  --purple_100: hsl(278, 100%, 95%);
  --purple_600: hsl(277, 91%, 56%);
  --orange_50: hsl(27, 100%, 96%);
  --orange_400: hsl(22, 100%, 60%);

  /* TYPOGRAPHY */
  --ff: "Rubik", sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  /* TEXT PRESET 1 */
  --fs-1: 9rem;
  --lh-1: 1;
  --ls-1: 0;

  /* TEXT PRESET 2 */
  --fs-2: 4rem;
  --lh-2: 1;
  --ls-2: 0;

  /* TEXT PRESET 3 */
  --fs-3: 2.25rem;
  --lh-3: 1.2;
  --ls-3: 0;

  /* TEXT PRESET 4 */
  --fs-4: 1.75rem;
  --lh-4: 1;
  --ls-4: 0;

  /* TEXT PRESET 5 */
  --fs-5: 1.5rem;
  --lh-5: 1.5;
  --ls-5: 0;

  /* TEXT PRESET 6 */
  --fs-6: 1.25rem;
  --lh-6: 1.5;
  --ls-6: 0;

  /* Spacing Scale from Guide */
  --spacing-100: 0.5rem;
  --spacing-200: 1rem;
  --spacing-300: 1.5rem;
  --spacing-400: 2rem;
  --spacing-500: 2.5rem;
  --spacing-600: 3rem;
  --spacing-800: 4rem;
  --spacing-1600: 8rem;
  --spacing-1800: 9rem;
  --spacing-2300: 11.5rem;

  --app-bg-color: var(--grey_50);
  --app-bg-image: url(../assets/images/pattern-background-desktop-light.svg);
  --app-text-main: var(--blue_900);
  --app-card-bg: var(--white);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: var(--ff);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: var(--app-bg-image);
  background-color: var(--app-bg-color);
  color: var(--app-text-main);
  background-repeat: no-repeat;
  background-size: cover;
  --thema-sun-icon: url(../assets/images/icon-sun-dark.svg);
  --thema-moon-icon: url(../assets/images/icon-moon-dark.svg);
}
body.dark {
  --app-bg-color: var(--blue_900);
  --app-bg-image: url(../assets/images/pattern-background-desktop-dark.svg);
  --app-text-main: var(--white);
  --app-card-bg: var(--blue_850);
  --thema-sun-icon: url(../assets/images/icon-sun-light.svg);
  --thema-moon-icon: url(../assets/images/icon-moon-light.svg);
}
.thema-sun-icon,
.thema-moon-icon {
  width: 1.5rem;
  height: 1.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.thema-sun-icon {
  background-image: var(--thema-sun-icon);
}

.thema-moon-icon {
  background-image: var(--thema-moon-icon);
}
.bg-color-white {
  background-color: var(--app-card-bg);
}
.text-color {
  color: var(--app-text-main);
}
main {
  width: 100%;
  max-width: 1157px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-800);
}
.hidden {
  display: none !important;
}

.fs-xl {
  font-size: var(--fs-1);
  line-height: var(--lh-1);
}

.fs-l {
  font-size: var(--fs-2);
  line-height: var(--lh-2);
}

.fs-m {
  font-size: var(--fs-3);
  line-height: var(--lh-3);
}

.fs-s {
  font-size: var(--fs-4);
  line-height: var(--lh-4);
}

.fs-sm {
  font-size: var(--fs-5);
  line-height: var(--lh-5);
}

.fs-smaller {
  font-size: var(--fs-6);
  line-height: var(--lh-6);
}

.fw-light {
  font-weight: var(--fw-light);
}
.fw-regular {
  font-weight: var(--fw-regular);
}
.fw-medium {
  font-weight: var(--fw-medium);
}

.bg-color-purple-600 {
  background-color: var(--purple_600);
}
.bg-color-blue-900 {
  background-color: var(--blue_900);
}
.p-100 {
  padding: var(--spacing-100);
}

.screen-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    "question options"
    "question submit"
    "question error";
  gap: var(--spacing-800);
}
.v-stack-lg {
  display: flex;
  flex-direction: column;
  grid-area: question;
  gap: var(--spacing-600);
}

.quiz-menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200);
}
.btn {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: var(--spacing-400);
  padding: var(--spacing-300);
  border: 2px solid transparent;
  border-radius: var(--spacing-300);
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(143, 160, 193, 0.14);
}
.btn:hover {
  border: 2px solid var(--purple_600);
}
.empty-message {
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-100);
  padding: var(--spacing-100);
}

.empty-text {
  color: var(--red);
}
.selected {
  border: 2px solid var(--purple_600);
}
.selected .quiz-menu-char {
  background-color: var(--purple_600);
  color: var(--white);
}
/* Answer feedback states - shared properties */
.correct,
.error,
.show-correct {
  background-repeat: no-repeat;
  background-position: right var(--spacing-200) center;
  background-size: 1.875rem;
  padding: var(--spacing-300);
}

.correct {
  border: 2px solid var(--green_500);
  background-image: url(../assets/images/icon-correct.svg);
}
.correct .quiz-menu-char {
  background-color: var(--green_500);
  color: var(--white);
}

.error {
  border: 2px solid var(--red);
  background-image: url(../assets/images/icon-error.svg);
}
.error .quiz-menu-char {
  background-color: var(--red);
  color: var(--white);
}

.show-correct {
  background-image: url(../assets/images/icon-correct.svg);
}
.disabled {
  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: 0.8;
}
.btn-change {
  grid-area: submit;
  padding: var(--spacing-400);
  background-color: var(--purple_600);
  border: none;
  border-radius: var(--spacing-300);
  cursor: pointer;
}
.btn-change span {
  color: var(--white);
  text-align: center;
}
.btn-change:hover {
  background-color: var(--purple_100);
}

/* Quiz-menu header start*/
.app-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.active-category {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-300);
}
.active-category-img {
  width: 3.5rem;
  aspect-ratio: 1;
  background-color: var(--purple_100);
  padding: var(--spacing-100);
  border-radius: var(--spacing-100);
}
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  display: none;
}

.theme-toggle-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-200);
  justify-content: flex-end;
  margin-left: auto;
}

.switch {
  display: flex;
  align-items: center;
  width: 3rem;
  height: 1.75rem;
  border-radius: 999px;
  padding: 0.25rem;
  cursor: pointer;
}

.slider {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--white);
}

#theme-toggle:checked + .slider {
  transform: translateX(1.25rem);
}
/* Quiz-menu header end*/

.start-menu-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300);
}

.quiz-menu-btn-icon {
  border-radius: var(--spacing-100);
}
/* Icon backgrounds - shared properties */
.html-icon,
.css-icon,
.js-icon,
.accessibility-icon {
  border-radius: var(--spacing-100);
  aspect-ratio: 1;
}

.html-icon {
  background-color: var(--orange_50);
}
.css-icon {
  background-color: var(--green_100);
}
.js-icon {
  background-color: var(--blue_50);
}
.accessibility-icon {
  background-color: var(--purple_100);
}
/* Quiz menu end  */

/* Quiz question start */
.question-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--spacing-300);
}
.question-count {
  font-style: italic;
}
.marginBottom {
  margin-bottom: var(--spacing-1600);
}
.quiz-menu-char {
  border-radius: var(--spacing-100);
  padding: var(--spacing-200);
  background-color: var(--grey_50);
}

input[type="range"] {
  background: linear-gradient(
    to right,
    var(--purple_600) var(--progress, 50%),
    var(--grey_50) var(--progress, 10%)
  );
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.75rem;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  opacity: 0;
  height: 1.75rem;
  width: 1.75rem;
  background-color: var(--purple_600);
  border-radius: 50%;
  transition: background-color 0.3s, border-color 0.3s;
}

input[type="range"]:active::-webkit-slider-thumb {
  border: 2px solid var(--purple_600);
}

.question-char {
  width: 3.5rem;
  height: 3.5rem;
  aspect-ratio: 1;
  background-color: var(--grey_50);
  color: var(--grey_500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.question-char:hover {
  background-color: var(--purple_600);
  color: var(--white);
}

/* Quiz question end */

/* Quiz completed start */

.result-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
}

/* score */

.score-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-500);
  padding: var(--spacing-600);
  border-radius: var(--spacing-300);
  box-shadow: 0 16px 40px rgba(143, 160, 193, 0.14);
}
.score-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-200);
}
.category-info{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-200);
}

.btn-purple {
  width: 100%;
  padding: var(--spacing-400);
  background-color: var(--purple_600);
  border: none; 
  border-radius: var(--spacing-300);
  cursor: pointer;
}
.btn-purple span {
  color: var(--white);
  text-align: center;
}
.btn-purple:hover {
  background-color: var(--purple_100);
}

/* Quiz completed end */

/* Responsive Design */

@media (max-width: 1144px) {
  main {
    padding: var(--spacing-800);
    width: 100%;
    gap: var(--spacing-800);
  }
  .screen-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
      grid-template-areas: 
    "question" 
    "options"
    "submit"
     "error";
    gap: var(--spacing-600);
  }
  .v-stack-lg {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
  }

  .quiz-menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-200);
  }
  .question-text {
    margin-bottom: var(--spacing-200);
  }
}

@media (max-width: 767px) {
  :root {
    /* Mobile typography adjustments */
    --fs-1-mobile: 4rem;
    --fs-2-mobile: 1.75rem;
    --fs-3-mobile: 1.125rem;
    --fs-4-mobile: 1rem;
    --fs-5-mobile: 0.875rem;
  }

  .fs-xl-mobile {
    font-size: var(--fs-1-mobile);
    line-height: var(--lh-1);
  }
  .fs-l-mobile {
    font-size: var(--fs-2-mobile);
    line-height: var(--lh-2);
  }
  .fs-m-mobile {
    font-size: var(--fs-3-mobile);
    line-height: var(--lh-3);
  }
  .fs-s-mobile {
    font-size: var(--fs-4-mobile);
    line-height: var(--lh-4);
  }
  .fs-sm-mobile {
    font-size: var(--fs-5-mobile);
    line-height: var(--lh-5);
  }
  .fs-smaller-mobile {
    font-size: var(--fs-6);
    line-height: var(--lh-6);
  }

  main {
    padding: var(--spacing-300);
   max-width: 375px;
    gap: var(--spacing-300);
  }

  .active-category {
    gap: var(--spacing-100);
  }
  .active-category-img {
    width: 2.5rem;
  }
  .theme-toggle-container {
    gap: var(--spacing-100);
    margin-left: auto;
  }
  .switch {
    width: 2rem;
    height: 1.25rem;
  }

  .slider {
    width: 0.75rem;
    height: 0.75rem;
  }
  #theme-toggle:checked + .slider {
    transform: translateX(0.75rem);
  }
  .category-text {
    font-size: var(--fs-4-mobile);
  }
  .screen-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 
    "question" 
    "options"
    "submit"
    "error";
    gap: var(--spacing-300);
  }
  .v-stack-lg {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
  }
  .v-stack-lg h1 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
  }

  .question-info {
    margin-top: 0px;
    text-align: left;
  }

  .question-text {
    margin-bottom: var(--spacing-200);
  }
  .quiz-menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-200);
  }
  .btn {
    gap: var(--spacing-200);
    padding: var(--spacing-200);
  }
  .btn img {
    width: 2.5rem;
    height: auto;
    aspect-ratio: 1;
  }
  .empty-message img {
    width: 1.875rem;
    height: auto;
    aspect-ratio: 1;
  }

}