:root {
  --clr-primary-light: #CAF4FF;
  --clr-primary-normal: #6BCCFF;
  --clr-primary-dark: #1781DD;
  --clr-secondary-light: #FFF4A8;
  --clr-secondary-normal: #F6DC5A;
  --clr-secondary-dark: #C8AA19;
  --clr-tertiary-light: #9EEAE3;
  --clr-tertiary-light: #4AD9CB;
  --clr-tertiary-light: #1B7E75;
  --clr-quaternary-light: #F27D7D;
  --clr-quaternary-normal: #EC3C3C;
  --clr-quaternary-dark: #C31313;
  --clr-light-900: #FAFAFA;
  --clr-light-700: #C6D0D9;
  --clr-light-500: #7B8288;
  --clr-light-300: #3E4F5D;
  --clr-light-100: #223444;

  --border-color: var(--clr-light-500);
  --header-background: var(--clr-secondary-normal);
  --footer-background: var(--clr-secondary-normal);
  --body-background: var(--clr-primary-light);
  --shadow-color: var(--clr-light-700);
  --card-shadow: -5px 5px 5px var(--shadow-color);
  --textbox-background-shadow: -2px 2px 3px var(--shadow-color);
  --textbox-background-hover-shadow: -2px 2px 5px var(--shadow-color);
  --textbox-foreground-shadow: 1px 1px 3px var(--shadow-color) inset;
  --textbox-foreground-hover-shadow: 1px 1px 5px var(--shadow-color) inset;
  --button-shadow: -1px 1px 4px var(--shadow-color);
  --text-primary-color: var(--clr-light-300);
  --text-secondary-color: var(--clr-light-500);
  --form-background: var(--clr-light-900);
  --form-foreground: var(--clr-secondary-normal);
  --textbox-background: var(--clr-light-900);

  --padding: 16px;
  --padding-y: 16px;
  --padding-x: 16px;
  --card-padding: 16px;
  --button-padding: 10px 16px;
  --button-padding-x: 16px;
  --button-padding-y: 10px;
  --section-padding: 64px;
  --section-padding-x: 64px;
  --section-padding-y: 64px;

  --margin: 16px;
  --margin-x: 16px;
  --margin-y: 16px;
  --section-margin: 64px;
  --section-margin-x: 64px;
  --section-margin-y: 64px;

  --gap: 16px;
  --grid-gap: 32px;

  --card-border-radius: 12px;
  --button-border-radius: 100px;
  
  --transition: all 200ms ease-in-out;

  --font-family: Arial, Helvetica, "Hanuman", sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
}

/* Card Style */
.card {
  background-color: var(--clr-primary-light);
  border-radius: var(--card-border-radius);
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  transition: var(--transition);
  box-shadow: var(--card-shadow);
}

.card.secondary {
  background-color: var(--clr-secondary-light);
}

.card:hover{
  transform: scale(1.02);
}

/* Input Style */
input, textarea {
  font-size: 1rem;
  font-weight: normal;
  padding: 8px 16px;
  font-family: var(--font-family);
  border-radius: 4px;
  border: none;
  text-align: left;
  letter-spacing: .5px;
  color: var(--text-primary-color);
  outline: none;
  box-sizing: border-box;
  box-shadow: var(--textbox-foreground-shadow);
  transition: var(--transition);
  background-color: var(--textbox-background);
}

input:focus, textarea:focus {
  box-shadow: var(--textbox-foreground-hover-shadow), var(--textbox-background-hover-shadow);
}

input.warning, textarea.warning {
  border: 1px solid var(--clr-quaternary-light);
}

/* Button Style */
button {
  padding: var(--button-padding);
  font-size: 0.875rem;
  font-family: var(--font-family);
  letter-spacing: .1px;
  border: none;
  transition: var(--transition);
  font-weight: bold;
  box-shadow: var(--button-shadow);
}

.btn {
  display: inline-block;
  padding: var(--button-padding);
  font-size: 0.875rem;
  font-family: var(--font-family);
  letter-spacing: .1px;
  border: none;
  font-weight: bold;
}

.primary {
  background-color: var(--clr-primary-normal);
}

.secondary {
  background-color: var(--clr-secondary-normal);
}

.rounded {
  border-radius: 100px;
}

button:not(:disabled):hover {
  cursor: pointer;
  transform: scale(1.1);
}

.btn-primary {
  color: var(--text-primary-color);
  background-color: var(--clr-primary-normal);
}

.btn-primary:disabled {
  color: var(--text-secondary-color);
  background-color: var(--clr-primary-light);
}

.btn-primary:not(:disabled):hover {
  color: var(--clr-light-900);
  background-color: var(--clr-primary-dark);
}

.btn-secondary {
  color: var(--text-primary-color);
  background-color: var(--clr-secondary-normal);
}

.btn-secondary:disabled {
  color: var(--text-secondary-color);
  background-color: var(--clr-secondary-light);
}

.btn-secondary:not(:disabled):hover {
  color: var(--clr-light-900);
  background-color: var(--clr-secondary-dark);
}