/* color variables */

:root {
  --clr-body-bg: hsl(0, 2%, 77%);
  --clr-card-bg: hsl(0 0% 100%);
  --clr-text: hsl(0 0% 15%);
  --clr-heading: hsl(0 0% 25%);
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1.25rem;
  line-height: 1.5;
  background: var(--clr-body-bg);
  color: var(--clr-text);
  margin: 1rem; 
  margin-bottom: 500px;
}



h1, h2, h3 {
  color: var(--clr-heading);
  line-height: 1.1;
}
/* auto-grid */
.auto-grid {
  --min-column-size: 225px;

  display: grid;
  gap: clamp(1rem, 5vmax, 1.625rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min-column-size)),
  1fr)
  ); 
}

.wrapper {
  --max-width: 55rem;
  width: min(100% - 2rem, var(max-width));
  margin-inline: auto;
  padding-top: 3rem;
}
/* card styling */
.card {
  background-color: var(--clr-card-bg);
  padding: 1rem;
  border-block-start: 0.7rem solid;
  border-radius: .5rem;
  box-shadow: 1px 1px 1px 1px;   
}

.card > * {
  margin: 0;
}

.card > *:not(:last-child) {
  margin-bottom: .75rem;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.color-picker > fieldset {
  position: fixed;
  border: 0;
  display: flex;
  gap: 2rem;
  width: fit-content;
  background: #ffffff1f;
  padding: 1rem 3rem;
  margin-inline: auto;
  border-radius: 0 0 1rem 1rem;
}

.color-picker input[type="radio"] {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  outline: 3px solid var(--radio-color, currentColor);
  outline-offset: 3px;
  border-radius: 50%;
}
/* color picker from form with id */
.color-picker input[type="radio"]:checked {
  background-color: var(--radio-color);
}

.color-picker input[type="radio"]#light {
  --radio-color: gray;

}
.color-picker input[type="radio"]#pink {
  --radio-color: pink;

}
.color-picker input[type="radio"]#blue {
  --radio-color: blue;

}
.color-picker input[type="radio"]#green {
  --radio-color: green;

}
.color-picker input[type="radio"]#dark {
  --radio-color: #232323;
}
/* themes */
.pink {
  --clr-body-bg: hsl(310 50% 90%);
  --clr-card-bg: hsl(310 50% 100%);
  --clr-text: hsl(310 50% 15%);
  --clr-heading: hsl(310 50% 25%);
}

.blue {
  --clr-body-bg: hsl(209 50% 90%);
  --clr-card-bg: hsl(209 50% 100%);
  --clr-text: hsl(209 50% 15%);
  --clr-heading: hsl(209 50% 25%);
}

.green {
  --clr-body-bg: hsl(109 50% 90%);
  --clr-card-bg: hsl(109 50% 100%);
  --clr-text: hsl(109 50% 15%);
  --clr-heading: hsl(109 50% 25%);
}

.dark {
  --clr-body-bg: hsl(209 50% 10%);
  --clr-card-bg: hsl(209 50% 5%);
  --clr-text: hsl(209 50% 90%);
  --clr-heading: hsl(209 50% 80%);
}

/* pseudo selector :has  */
:root:has(#pink:checked) {
  --clr-body-bg: hsl(310 50% 90%);
  --clr-card-bg: hsl(310 50% 100%);
  --clr-text: hsl(310 50% 15%);
  --clr-heading: hsl(310 50% 25%);
}

:root:has(#blue:checked) {
  --clr-body-bg: hsl(209 50% 90%);
  --clr-card-bg: hsl(209 50% 100%);
  --clr-text: hsl(209 50% 15%);
  --clr-heading: hsl(209 50% 25%);
}

:root:has(#green:checked) {
  --clr-body-bg: hsl(109 50% 90%);
  --clr-card-bg: hsl(109 50% 100%);
  --clr-text: hsl(109 50% 15%);
  --clr-heading: hsl(109 50% 25%);
}

:root:has(#dark:checked) {
  --clr-body-bg: hsl(209 50% 10%);
  --clr-card-bg: hsl(209 50% 5%);
  --clr-text: hsl(209 50% 90%);
  --clr-heading: hsl(209 50% 80%);
}