:root {

  /* ---------- COLORS -------------*/
  --nd-color-primary: #3a58e8;
  --nd-color-primary-variant: #2A4064;
  --nd-color-secondary: #0496FF;
  --nd-color-secondary-variant: #59F8E8;
  --nd-color-emphasis: #FFD046;
  --nd-color-emphasis-variant: #F45B69;
  --nd-color-white: #FFFFFF;
  --nd-gradient-primary: linear-gradient(95deg, #0496FF 0%, #3A58E8 100%);


  /* ---------- SURFACES -------------*/
  --nd-surface-primary: #fff;
  --nd-surface-secondary: #F9F9F9;


  /* ---------- TEXT COLORS --------*/
  --nd-text-muted: #717F97;
  /* ---------- FONTS -------------*/
  --nd-font-family: 'Poppins', sans-serif;

  /*
  xs - 8px
  sm - 10px
  md - 16px
  lg - 18px
  xl - 24px
  2xl - 32px
  3xl - 40px
  4xl - 56px
  5xl - 64px
  6xl - 80px
 */
  --nd-font-xs: 0.5rem;
  --nd-font-sm: 0.625rem;
  --nd-font-md: 1rem;
  --nd-font-lg: 1.125rem;
  --nd-font-xl: 1.5rem;
  --nd-font-2xl: 2rem;
  --nd-font-3xl: 2.5rem;
  --nd-font-4xl: 3.5rem;
  --nd-font-5xl: 4rem;
  --nd-font-6xl: 5rem;

  /* ---------- SHADOWS -------------*/

  --nd-shadow-1: 0px 8px 16px #2A406429;

  /* ---------- RADIUS -------------*/
  --nd-radius-1: 8px
}


/** ################################## COLORS */

.nd_color--primary {
  color: var(--nd-color-primary);
}

.nd_color--secondary {
  color: var(--nd-color-secondary);
}

.nd_color--primary-variant {
  color: var(--nd-color-primary-variant);
}

.nd_color--secondary-variant {
  color: var(--nd-color-secondary-variant);
}

.nd_color--emphasis {
  color: var(--nd-color-emphasis);
}

.nd_color--emphasis-variant {
  color: var(--nd-color-emphasis-variant);
}

/** ################################## SURFACES */

.nd_surface--primary {
  background-color: var(--nd-surface-primary);
}

.nd_surface--secondary {
  background-color: var(--nd-surface-secondary);
}

/** ################################## FONTS */

.nd_font--xs {
  font-size: var(--nd-font-xs);
}

.nd_font--sm {
  font-size: var(--nd-font-sm);
}

.nd_font--md {
  font-size: var(--nd-font-md);
}

.nd_font--lg {
  font-size: var(--nd-font-lg);
}

.nd_font--xl {
  font-size: var(--nd-font-xl);
}

.nd_font--2xl {
  font-size: var(--nd-font-2xl);
}

.nd_font--3xl {
  font-size: var(--nd-font-3xl);
}

.nd_font--4xl {
  font-size: var(--nd-font-4xl);
}

.nd_button--emphasis {
  font-size: var(--nd-font-lg);
  font-family: var(--nd-font-family);
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;

  width: 100%;

  border-radius: var(--nd-radius-1);
  border: none;
  white-space: normal;
  word-wrap: break-word;
  display: block;
}

.nd_button--emphasis:not(.small) {
  padding: 15px 30px;
}

.nd_button--emphasis.small {
  padding: 10px 20px;
}

.nd_button--emphasis:not(:hover) {
  background-color: var(--nd-color-emphasis);
  color: var(--nd-color-primary-variant);
}

.nd_button--emphasis:hover {
  background-color: var(--nd-color-emphasis-variant);
  color: var(--nd-color-white);
}

.nd_button--primary-outlined {
  font-size: var(--nd-font-lg);
  font-family: var(--nd-font-family);
  text-align: center;
  font-weight: bold;

  width: 100%;
  padding: 15px 30px;
  border-radius: var(--nd-radius-1);
  border: 2px solid var(--nd-color-primary);
}

.nd_button--primary-outlined:not(:hover) {
  background-color: transparent;
  color: var(--nd-color-primary);
}

.nd_button--primary-outlined:hover {
  background-color: var(--nd-color-primary);
  color: var(--nd-color-white);
}

.nd_button--secondary-outlined {
  font-size: var(--nd-font-xl);
  font-family: var(--nd-font-family);
  text-align: center;
  font-weight: bold;

  width: 100%;
  padding: 15px 30px;
  border-radius: var(--nd-radius-1);
  border: 2px solid var(--nd-color-secondary);
  display: block;
}

.nd_button--secondary-outlined:not(:hover) {
  background-color: transparent;
  color: var(--nd-color-secondary);
}

.nd_button--secondary-outlined:hover {
  background-color: var(--nd-color-secondary);
  color: var(--nd-color-white);
}

.nd_input__container {
  display: flex;
  width: 100%;
  padding: 0 16px;
  gap: 15px;
  place-content: center;
  place-items: center;

  border-radius: var(--nd-radius-1);
  background-color: var(--nd-color-white);
}

.nd_input__container[aria-emphasis="emphasis"]:has(input:focus),
.nd_input__container[aria-emphasis="emphasis"]:has(select:focus) {
  outline: 4px solid var(--nd-color-emphasis);
}

.nd_input__container[aria-emphasis="primary"]:has(input:focus),
.nd_input__container[aria-emphasis="primary"]:has(select:focus) {
  outline: 4px solid var(--nd-color-primary);
}

.nd_input__container input,
.nd_input__container select {
  font-family: var(--nd-font-family);
  appearance: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;

  width: 100%;
  margin: 16px 0;
}

.nd_input__container input:not(:focus),
.nd_input__container select:not(:focus) {
  color: var(--nd-text-muted);
}

.nd_input__container input:focus,
.nd_input__container select:focus {
  appearance: none;
  border: none;
  outline: none;
  color: #222;
}

.nd_input__container i {
  height: 100%;
  width: 100%;
  font-size: 20px;
  display: flex;
}

.nd_input__container span.nd_input__icon--secondary i {
  color: var(--nd-color-secondary);
}

.nd_input__container span.nd_input__icon--primary i {
  color: var(--nd-color-primary);
}

.nd_input__container select option {
  padding: 2px;
  margin: 0 10px;
  font-family: var(--nd-font-family);
  font-size: var(--nd-font-xl);
}