/*//////////////////////////////////////////////////////////
VARIABLES --------------------------------------------------
//////////////////////////////////////////////////////////*/
:root {
  --light-min: 260px;
  --light-max: 800px;
  
  --hue: 360deg;
  --saturation: 100%;
  --lightness: 100%;

  --color-1: #FF0000;
  --color-2: #FF8A00;
  --color-3: #FFE600;
  --color-4: #14FF00;
  --color-5: #00A3FF;
  --color-6: #0500FF;
  --color-7: #AD00FF;
  --color-8: #FF00C7;
  --color-9: #FF0000;
}

/*//////////////////////////////////////////////////////////
RESET ------------------------------------------------------
//////////////////////////////////////////////////////////*/
*, *:before, *:after {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*//////////////////////////////////////////////////////////
A11Y -------------------------------------------------------
//////////////////////////////////////////////////////////*/
.visuallyhidden {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset (0px 0px 99.9% 99.9%);
	clip-path: inset (0px 0px 99.9% 99.9%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	padding: 0;
	border: 0;
	white-space: nowrap;
}

:focus-visible {
  outline: 2px solid #3399FF;
  outline-offset: 4px;
}


/*//////////////////////////////////////////////////////////
GLOBAL -----------------------------------------------------
//////////////////////////////////////////////////////////*/
body {
  background: #151515;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}



#app {
  max-width: 430px;
  width: 100vw;
  height: 100%;
  margin: 0 auto;
  position: relative;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 40px 40px 80px;
}

h1 {
  color: #FAFAFA;
  margin-bottom: 40px;
  font-size: 24px;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 2rem;
}

#light {
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));
  width: clamp(var(--light-min), 60vw, var(--light-max));
  height: clamp(var(--light-min), 60vw, var(--light-max));
  top: calc((clamp(var(--light-min), 60vw, var(--light-max))/2)*-1);
  left: calc((100vw - clamp(var(--light-min), 60vw, var(--light-max))) / 2);
  border-radius: 50%;
  filter: blur(50px);

  position: absolute;
}

.input-group {
  display: grid;
  gap: 40px;
  width: 100%;
}

.input-wrapper {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

input {
  width: 100%;
}

/*//////////////////////////////////////////////////////////
INPUTS -----------------------------------------------------
//////////////////////////////////////////////////////////*/
/* ============================
ELEMENTO BASE (input range)
============================ */
#hue,
#saturation,
#lightness {
  -webkit-appearance: none; /* Remove estilo padrão WebKit */
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent; /* Deixa fundo transparente para personalizar via track */
  cursor: pointer;
}

/* ============================
BARRA NÃO PREENCHIDA (RESTANTE)
============================ */

/* Edge / IE */
input[type="range"]::-ms-fill-upper {
  background: transparent;
  border-radius: 4px;
}

/* ============================
BARRA DE FUNDO (TRACK)
============================ */

/* Chrome / Safari */
input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 4px;
}

#hue::-moz-range-track {
  background: linear-gradient(90deg, var(--color-1), var(--color-2), var(--color-3), var(--color-4), var(--color-5), var(--color-6), var(--color-7), var(--color-8), var(--color-9));
}

#saturation::-moz-range-track {
  background: linear-gradient(90deg, var(--color-1), var(--color-2), var(--color-3));
}

#lightness::-moz-range-track {
  background: linear-gradient(90deg, black, var(--color-2), white);
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
}

#hue::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--color-1), var(--color-2), var(--color-3), var(--color-4), var(--color-5), var(--color-6), var(--color-7), var(--color-8), var(--color-9));
}

#saturation::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--color-1), var(--color-2), var(--color-3));
}

#lightness::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, black, var(--color-2), white);
}

/* Edge / IE */
input[type="range"]::-ms-track {
  height: 8px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

/* ============================
BARRA PREENCHIDA (PROGRESSO)
============================ */

/* Firefox */
input[type="range"]::-moz-range-progress {
  height: 8px;
  background: transparent;
  border-radius: 4px;
}

/* Edge / IE */
input[type="range"]::-ms-fill-lower {
  background: transparent;
  border-radius: 4px;
}

/* ============================
THUMB (CÍRCULO DESLIZANTE)
============================ */

/* Chrome / Safari */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: -6px; /* Alinha verticalmente com o track */
  cursor: pointer;
  border: 1.5px solid white;
}

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

#hue::-webkit-slider-thumb {
  background: hsl(180deg, 100%, 90%);
}

#saturation::-webkit-slider-thumb {
  background: hsl(180deg, 100%, 90%);
}

#lightness::-webkit-slider-thumb {
  background: hsl(180deg, 100%, 90%);
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 1.5px solid white;
}

input[type="range"]::-moz-range-thumb:active {
  border: 2px solid white;
}

#hue::-moz-range-thumb {
  background: hsl(180deg, 100%, 90%);
}

#saturation::-moz-range-thumb {
  background: hsl(180deg, 100%, 90%);
}

#lightness::-moz-range-thumb {
  background: hsl(180deg, 100%, 90%);
}

/* Edge / IE */
input[type="range"]::-ms-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}