/* Awokado_color_base */
:root {
  --color-base-accent-20: #ffffff;
  --color-base-neutral-100: #d5cbba;
  --color-base-neutral-20: #f7f3e5;
  --color-base-neutral-200: #c1b3a2;
  --color-base-neutral-30: #f4efdd;
  --color-base-neutral-300: #ab9a89;
  --color-base-neutral-400: #978272;
  --color-base-neutral-50: #e3dcca;
  --color-base-neutral-500: #816959;
  --color-base-neutral-600: #6d5141;
  --color-base-neutral-700: #5b3c2c;
  --color-base-neutral-800: #503324;
  --color-base-neutral-900: #452a1c;
  --color-base-primary-100: #c1de84;
  --color-base-primary-20: #dff8ac;
  --color-base-primary-200: #b2d170;
  --color-base-primary-300: #a3c55e;
  --color-base-primary-35: #d5f09f;
  --color-base-primary-400: #96ba4c;
  --color-base-primary-50: #cce893;
  --color-base-primary-500: #84a442;
  --color-base-primary-600: #738f39;
  --color-base-primary-700: #60782e;
  --color-base-primary-800: #506425;
  --color-base-primary-900: #3d4e1b;
  /* number */
}

/* Project_03_color_styles */
/* Awokado_color_styles */
:root {
  /* light */
  /* color */
  --color-badge-bg-primary: var(--color-base-primary-400);
  --color-bg-neutral-md: var(--color-base-neutral-50);
  --color-bg-neutral-sm: var(--color-base-neutral-20);
  --color-bg-primary-primary: #ffffff;
  --color-bg-primary-sm: var(--color-base-primary-400);
  --color-button-color: #ffffff;
  --color-button-border-neutral-focus: var(--color-base-neutral-700);
  --color-button-border-primary-focus: var(--color-base-primary-20);
  --color-button-border-text-primary-focus: var(--color-base-neutral-200);
  --color-button-border-text-secondary-focus: var(--color-base-neutral-100);
  --color-button-filled-neutral-bg-primary: var(--color-base-neutral-20);
  --color-button-filled-neutral-bg-secondary: var(--color-base-neutral-100);
  --color-button-filled-neutral-bg-light-active: var(--color-base-neutral-100);
  --color-button-filled-neutral-bg-light-default: var(--color-base-neutral-30);
  --color-button-filled-neutral-bg-light-disabled: var(--color-base-neutral-20);
  --color-button-filled-neutral-bg-light-hover: var(--color-base-neutral-50);
  --color-button-filled-neutral-bg-md-active: var(--color-base-neutral-300);
  --color-button-filled-neutral-bg-md-default: var(--color-base-neutral-50);
  --color-button-filled-neutral-bg-md-disabled: var(--color-base-neutral-30);
  --color-button-filled-neutral-bg-md-hover: var(--color-base-neutral-100);
  --color-button-filled-primary-active: var(--color-base-primary-600);
  --color-button-filled-primary-default: var(--color-base-primary-400);
  --color-button-filled-primary-disabled: var(--color-base-neutral-20);
  --color-button-filled-primary-focus: var(--color-base-primary-400);
  --color-button-filled-primary-hover: var(--color-base-primary-500);
  --color-button-filled-secondary-active: var(--color-base-neutral-200);
  --color-button-filled-secondary-default: var(--color-base-neutral-20);
  --color-button-filled-secondary-disabled: var(--color-base-neutral-20);
  --color-button-filled-secondary-focus: var(--color-base-neutral-20);
  --color-button-filled-secondary-hover: var(--color-base-neutral-100);
  --color-button-outline-neutral-border-active: var(--color-base-neutral-300);
  --color-button-outline-neutral-border-default: var(--color-base-neutral-100);
  --color-button-outline-neutral-border-disabled: var(--color-base-neutral-50);
  --color-button-outline-neutral-border-focus: var(--color-base-neutral-400);
  --color-button-outline-neutral-border-hover: var(--color-base-neutral-200);
  --color-button-outline-primary-active: var(--color-button-filled-primary-active);
  --color-button-outline-primary-default: var(--color-button-filled-primary-default);
  --color-button-outline-primary-disabled: var(--color-button-filled-primary-disabled);
  --color-button-outline-primary-focus: var(--color-button-filled-primary-focus);
  --color-button-outline-primary-hover: var(--color-button-filled-primary-hover);
  --color-button-outline-secondary-active: var(--color-button-text-neutral-content-primary-active);
  --color-button-outline-secondary-default: var(--color-button-text-neutral-content-primary-default);
  --color-button-outline-secondary-disabled: var(--color-button-text-neutral-content-primary-disabled);
  --color-button-outline-secondary-focus: var(--color-button-outline-primary-focus);
  --color-button-outline-secondary-hover: var(--color-button-text-neutral-content-primary-hover);
  --color-button-text-neutral-content-primary-active: var(--color-base-neutral-300);
  --color-button-text-neutral-content-primary-default: var(--color-base-neutral-500);
  --color-button-text-neutral-content-primary-disabled: var(--color-base-neutral-200);
  --color-button-text-neutral-content-primary-focus: var(--color-base-neutral-500);
  --color-button-text-neutral-content-primary-hover: var(--color-base-neutral-400);
  --color-button-text-neutral-content-secondary-active: var(--color-base-neutral-50);
  --color-button-text-neutral-content-secondary-default: var(--color-base-neutral-20);
  --color-button-text-neutral-content-secondary-disabled: var(--color-base-neutral-300);
  --color-button-text-neutral-content-secondary-focus: var(--color-base-neutral-20);
  --color-button-text-neutral-content-secondary-hover: var(--color-base-neutral-200);
  --color-content-neutral-primary: var(--color-base-neutral-700);
  --color-content-neutral-secondary: var(--color-base-neutral-500);
  --color-content-neutral-tertiary: var(--color-base-neutral-300);
  --color-content-neutral-inversion-primary: var(--color-base-neutral-20);
  --color-content-neutral-inversion-secondary: var(--color-base-neutral-50);
  --color-content-neutral-inversion-tertiary: var(--color-base-neutral-200);
  --color-content-primary-primary: var(--color-base-primary-400);
  --color-content-primary-secondary: var(--color-base-primary-20);
  --color-textfield-outline-content-default: var(--color-content-neutral-secondary);
  --color-textfield-outline-content-input: var(--color-content-neutral-primary);
  --color-button-filled-neutral-bg-sm-default: var(--color-button-filled-secondary-default);
}

.light,
.color-theme-light {
  --color-badge-bg-primary: var(--color-base-primary-400);
  --color-bg-neutral-md: var(--color-base-neutral-50);
  --color-bg-neutral-sm: var(--color-base-neutral-20);
  --color-bg-primary-primary: #ffffff;
  --color-bg-primary-sm: var(--color-base-primary-400);
  --color-button-color: #ffffff;
  --color-button-border-neutral-focus: var(--color-base-neutral-700);
  --color-button-border-primary-focus: var(--color-base-primary-20);
  --color-button-border-text-primary-focus: var(--color-base-neutral-200);
  --color-button-border-text-secondary-focus: var(--color-base-neutral-100);
  --color-button-filled-neutral-bg-primary: var(--color-base-neutral-20);
  --color-button-filled-neutral-bg-secondary: var(--color-base-neutral-100);
  --color-button-filled-neutral-bg-light-active: var(--color-base-neutral-100);
  --color-button-filled-neutral-bg-light-default: var(--color-base-neutral-30);
  --color-button-filled-neutral-bg-light-disabled: var(--color-base-neutral-20);
  --color-button-filled-neutral-bg-light-hover: var(--color-base-neutral-50);
  --color-button-filled-neutral-bg-md-active: var(--color-base-neutral-300);
  --color-button-filled-neutral-bg-md-default: var(--color-base-neutral-50);
  --color-button-filled-neutral-bg-md-disabled: var(--color-base-neutral-30);
  --color-button-filled-neutral-bg-md-hover: var(--color-base-neutral-100);
  --color-button-filled-primary-active: var(--color-base-primary-600);
  --color-button-filled-primary-default: var(--color-base-primary-400);
  --color-button-filled-primary-disabled: var(--color-base-neutral-20);
  --color-button-filled-primary-focus: var(--color-base-primary-400);
  --color-button-filled-primary-hover: var(--color-base-primary-500);
  --color-button-filled-secondary-active: var(--color-base-neutral-200);
  --color-button-filled-secondary-default: var(--color-base-neutral-20);
  --color-button-filled-secondary-disabled: var(--color-base-neutral-20);
  --color-button-filled-secondary-focus: var(--color-base-neutral-20);
  --color-button-filled-secondary-hover: var(--color-base-neutral-100);
  --color-button-outline-neutral-border-active: var(--color-base-neutral-300);
  --color-button-outline-neutral-border-default: var(--color-base-neutral-100);
  --color-button-outline-neutral-border-disabled: var(--color-base-neutral-50);
  --color-button-outline-neutral-border-focus: var(--color-base-neutral-400);
  --color-button-outline-neutral-border-hover: var(--color-base-neutral-200);
  --color-button-outline-primary-active: var(--color-button-filled-primary-active);
  --color-button-outline-primary-default: var(--color-button-filled-primary-default);
  --color-button-outline-primary-disabled: var(--color-button-filled-primary-disabled);
  --color-button-outline-primary-focus: var(--color-button-filled-primary-focus);
  --color-button-outline-primary-hover: var(--color-button-filled-primary-hover);
  --color-button-outline-secondary-active: var(--color-button-text-neutral-content-primary-active);
  --color-button-outline-secondary-default: var(--color-button-text-neutral-content-primary-default);
  --color-button-outline-secondary-disabled: var(--color-button-text-neutral-content-primary-disabled);
  --color-button-outline-secondary-focus: var(--color-button-outline-primary-focus);
  --color-button-outline-secondary-hover: var(--color-button-text-neutral-content-primary-hover);
  --color-button-text-neutral-content-primary-active: var(--color-base-neutral-300);
  --color-button-text-neutral-content-primary-default: var(--color-base-neutral-500);
  --color-button-text-neutral-content-primary-disabled: var(--color-base-neutral-200);
  --color-button-text-neutral-content-primary-focus: var(--color-base-neutral-500);
  --color-button-text-neutral-content-primary-hover: var(--color-base-neutral-400);
  --color-button-text-neutral-content-secondary-active: var(--color-base-neutral-50);
  --color-button-text-neutral-content-secondary-default: var(--color-base-neutral-20);
  --color-button-text-neutral-content-secondary-disabled: var(--color-base-neutral-300);
  --color-button-text-neutral-content-secondary-focus: var(--color-base-neutral-20);
  --color-button-text-neutral-content-secondary-hover: var(--color-base-neutral-200);
  --color-content-neutral-primary: var(--color-base-neutral-700);
  --color-content-neutral-secondary: var(--color-base-neutral-500);
  --color-content-neutral-tertiary: var(--color-base-neutral-300);
  --color-content-neutral-inversion-primary: var(--color-base-neutral-20);
  --color-content-neutral-inversion-secondary: var(--color-base-neutral-50);
  --color-content-neutral-inversion-tertiary: var(--color-base-neutral-200);
  --color-content-primary-primary: var(--color-base-primary-400);
  --color-content-primary-secondary: var(--color-base-primary-20);
  --color-textfield-outline-content-default: var(--color-content-neutral-secondary);
  --color-textfield-outline-content-input: var(--color-content-neutral-primary);
  --color-button-filled-neutral-bg-sm-default: var(--color-button-filled-secondary-default);
}

/* Project_02_size */
/* Lg */
/* Awokado_size */
/* Lg */
@media (min-width: 1180px) {
  :root {
    /* number */
    --button: 0px;
    --size-fonts-1xl-letter-spacing: 0px;
    --size-fonts-1xl-size: var(--size-base-5x-20);
    --size-fonts-1xl-line: 22px;
    --size-fonts-2xl-letter-spacing: 0px;
    --size-fonts-2xl-size: var(--size-base-6x-24);
    --size-fonts-2xl-line: 26.399999618530273px;
    --size-fonts-3xl-letter-spacing: 0px;
    --size-fonts-3xl-size: var(--size-base-7x-28);
    --size-fonts-3xl-line: 30.799999237060547px;
    --size-fonts-4xl-letter-spacing: 0px;
    --size-fonts-4xl-size: var(--size-base-9x-36);
    --size-fonts-4xl-line: 39.599998474121094px;
    --size-fonts-5xl-letter-spacing: -1.5px;
    --size-fonts-5xl-size: var(--size-base-12x-48);
    --size-fonts-5xl-line: 52.79999923706055px;
    --size-fonts-6xl-letter-spacing: -1.5px;
    --size-fonts-6xl-size: var(--size-base-14x-56);
    --size-fonts-6xl-line: 61.599998474121094px;
    --size-fonts-button-lg-letter-spacing: 0.20000000298023224px;
    --size-fonts-button-lg-size: var(--size-base-4x-16);
    --size-fonts-button-lg-line: 20.799999237060547px;
    --size-fonts-button-md-letter-spacing: 0px;
    --size-fonts-button-md-size: var(--size-base-3-5x-14);
    --size-fonts-button-md-line: 15.399999618530273px;
    --size-fonts-button-sm-letter-spacing: 0px;
    --size-fonts-button-sm-size: var(--size-base-3x-12);
    --size-fonts-button-sm-line: 13.199999809265137px;
    --size-fonts-lg-letter-spacing: 0.10000000149011612px;
    --size-fonts-lg-size: var(--size-base-4x-16);
    --size-fonts-lg-line: 24px;
    --size-fonts-md-letter-spacing: 0px;
    --size-fonts-md-size: var(--size-base-3-5x-14);
    --size-fonts-md-line: 15.399999618530273px;
    --size-fonts-sm-letter-spacing: 0.10000000149011612px;
    --size-fonts-sm-size: var(--size-base-3x-12);
    --size-fonts-sm-line: 15.600000381469727px;
    /* string */
    --size-fonts-1xl-line-percent: 130%;
    --size-fonts-2xl-line-percent: 130%;
    --size-fonts-3xl-line-percent: 110%;
    --size-fonts-4xl-line-percent: 110%;
    --size-fonts-5xl-line-percent: 110%;
    --size-fonts-6xl-line-percent: 110%;
    --size-fonts-button-lg-line-percent: 130%;
    --size-fonts-button-md-line-percent: 120%;
    --size-fonts-button-sm-line-percent: 100%;
    --size-fonts-lg-line-percent: 150%;
    --size-fonts-md-line-percent: 130%;
    --size-fonts-sm-line-percent: 130%;
  }
}
/* Md */
@media (min-width: 894px) and (max-width: 1179px) {
  :root {
    /* number */
    --button: 0px;
    --size-fonts-1xl-letter-spacing: 0px;
    --size-fonts-1xl-size: var(--size-base-5x-20);
    --size-fonts-1xl-line: 22px;
    --size-fonts-2xl-letter-spacing: 0px;
    --size-fonts-2xl-size: var(--size-base-6x-24);
    --size-fonts-2xl-line: 26.399999618530273px;
    --size-fonts-3xl-letter-spacing: 0px;
    --size-fonts-3xl-size: var(--size-base-7x-28);
    --size-fonts-3xl-line: 30.799999237060547px;
    --size-fonts-4xl-letter-spacing: 0px;
    --size-fonts-4xl-size: var(--size-base-9x-36);
    --size-fonts-4xl-line: 39.599998474121094px;
    --size-fonts-5xl-letter-spacing: -1.5px;
    --size-fonts-5xl-size: var(--size-base-12x-48);
    --size-fonts-5xl-line: 52.79999923706055px;
    --size-fonts-6xl-letter-spacing: -1.5px;
    --size-fonts-6xl-size: var(--size-base-14x-56);
    --size-fonts-6xl-line: 61.599998474121094px;
    --size-fonts-button-lg-letter-spacing: 0.20000000298023224px;
    --size-fonts-button-lg-size: var(--size-base-4x-16);
    --size-fonts-button-lg-line: 20.799999237060547px;
    --size-fonts-button-md-letter-spacing: 0px;
    --size-fonts-button-md-size: var(--size-base-3-5x-14);
    --size-fonts-button-md-line: 15.399999618530273px;
    --size-fonts-button-sm-letter-spacing: 0px;
    --size-fonts-button-sm-size: var(--size-base-3x-12);
    --size-fonts-button-sm-line: 13.199999809265137px;
    --size-fonts-lg-letter-spacing: 0.10000000149011612px;
    --size-fonts-lg-size: var(--size-base-4x-16);
    --size-fonts-lg-line: 24px;
    --size-fonts-md-letter-spacing: 0px;
    --size-fonts-md-size: var(--size-base-3-5x-14);
    --size-fonts-md-line: 15.399999618530273px;
    --size-fonts-sm-letter-spacing: 0.10000000149011612px;
    --size-fonts-sm-size: var(--size-base-3x-12);
    --size-fonts-sm-line: 15.600000381469727px;
    /* string */
    --size-fonts-1xl-line-percent: 130%;
    --size-fonts-2xl-line-percent: 130%;
    --size-fonts-3xl-line-percent: 110%;
    --size-fonts-4xl-line-percent: 110%;
    --size-fonts-5xl-line-percent: 110%;
    --size-fonts-6xl-line-percent: 110%;
    --size-fonts-button-lg-line-percent: 130%;
    --size-fonts-button-md-line-percent: 120%;
    --size-fonts-button-sm-line-percent: 100%;
    --size-fonts-lg-line-percent: 150%;
    --size-fonts-md-line-percent: 120%;
    --size-fonts-sm-line-percent: 130%;
  }
}
/* Sm */
@media (min-width: 604px) and (max-width: 893px) {
  :root {
    /* number */
    --button: 0px;
    --size-fonts-1xl-letter-spacing: 0px;
    --size-fonts-1xl-size: var(--size-base-4x-16);
    --size-fonts-1xl-line: 17.600000381469727px;
    --size-fonts-2xl-letter-spacing: 0px;
    --size-fonts-2xl-size: var(--size-base-5x-20);
    --size-fonts-2xl-line: 22px;
    --size-fonts-3xl-letter-spacing: 0px;
    --size-fonts-3xl-size: var(--size-base-6x-24);
    --size-fonts-3xl-line: 26.399999618530273px;
    --size-fonts-4xl-letter-spacing: 0px;
    --size-fonts-4xl-size: var(--size-base-7x-28);
    --size-fonts-4xl-line: 30.799999237060547px;
    --size-fonts-5xl-letter-spacing: -1.5px;
    --size-fonts-5xl-size: var(--size-base-11x-44);
    --size-fonts-5xl-line: 48.400001525878906px;
    --size-fonts-6xl-letter-spacing: -1.5px;
    --size-fonts-6xl-size: var(--size-base-13x-52);
    --size-fonts-6xl-line: 57.20000076293945px;
    --size-fonts-button-lg-letter-spacing: 0.20000000298023224px;
    --size-fonts-button-lg-size: var(--size-base-4x-16);
    --size-fonts-button-lg-line: 20.799999237060547px;
    --size-fonts-button-md-letter-spacing: 0px;
    --size-fonts-button-md-size: var(--size-base-3-5x-14);
    --size-fonts-button-md-line: 15.399999618530273px;
    --size-fonts-button-sm-letter-spacing: 0px;
    --size-fonts-button-sm-size: var(--size-base-3x-12);
    --size-fonts-button-sm-line: 13.199999809265137px;
    --size-fonts-lg-letter-spacing: 0.10000000149011612px;
    --size-fonts-lg-size: var(--size-base-4x-16);
    --size-fonts-lg-line: 24px;
    --size-fonts-md-letter-spacing: 0px;
    --size-fonts-md-size: var(--size-base-3-5x-14);
    --size-fonts-md-line: 15.399999618530273px;
    --size-fonts-sm-letter-spacing: 0.10000000149011612px;
    --size-fonts-sm-size: var(--size-base-3x-12);
    --size-fonts-sm-line: 15.600000381469727px;
    /* string */
    --size-fonts-1xl-line-percent: 130%;
    --size-fonts-2xl-line-percent: 130%;
    --size-fonts-3xl-line-percent: 110%;
    --size-fonts-4xl-line-percent: 110%;
    --size-fonts-5xl-line-percent: 110%;
    --size-fonts-6xl-line-percent: 110%;
    --size-fonts-button-lg-line-percent: 130%;
    --size-fonts-button-md-line-percent: 120%;
    --size-fonts-button-sm-line-percent: 100%;
    --size-fonts-lg-line-percent: 150%;
    --size-fonts-md-line-percent: 120%;
    --size-fonts-sm-line-percent: 130%;
  }
}
/* Xs */
@media (max-width: 603px) {
  :root {
    /* number */
    --button: 0px;
    --size-fonts-1xl-letter-spacing: 0px;
    --size-fonts-1xl-size: var(--size-base-4x-16);
    --size-fonts-1xl-line: 17.600000381469727px;
    --size-fonts-2xl-letter-spacing: -1.5px;
    --size-fonts-2xl-size: var(--size-base-4x-16);
    --size-fonts-2xl-line: 17.600000381469727px;
    --size-fonts-3xl-letter-spacing: 0px;
    --size-fonts-3xl-size: var(--size-base-6x-24);
    --size-fonts-3xl-line: 26.399999618530273px;
    --size-fonts-4xl-letter-spacing: 0px;
    --size-fonts-4xl-size: var(--size-base-7x-28);
    --size-fonts-4xl-line: 30.799999237060547px;
    --size-fonts-5xl-letter-spacing: -1.5px;
    --size-fonts-5xl-size: var(--size-base-10x-40);
    --size-fonts-5xl-line: 44px;
    --size-fonts-6xl-letter-spacing: -1.5px;
    --size-fonts-6xl-size: var(--size-base-12x-48);
    --size-fonts-6xl-line: 52.79999923706055px;
    --size-fonts-button-lg-letter-spacing: 0.20000000298023224px;
    --size-fonts-button-lg-size: var(--size-base-4x-16);
    --size-fonts-button-lg-line: 20.799999237060547px;
    --size-fonts-button-md-letter-spacing: 0.20000000298023224px;
    --size-fonts-button-md-size: var(--size-base-3-5x-14);
    --size-fonts-button-md-line: 17.600000381469727px;
    --size-fonts-button-sm-letter-spacing: 0px;
    --size-fonts-button-sm-size: var(--size-base-3x-12);
    --size-fonts-button-sm-line: 13.199999809265137px;
    --size-fonts-lg-letter-spacing: 0.10000000149011612px;
    --size-fonts-lg-size: var(--size-base-4x-16);
    --size-fonts-lg-line: 24px;
    --size-fonts-md-letter-spacing: 0px;
    --size-fonts-md-size: var(--size-base-3-5x-14);
    --size-fonts-md-line: 15.399999618530273px;
    --size-fonts-sm-letter-spacing: 0.10000000149011612px;
    --size-fonts-sm-size: var(--size-base-3x-12);
    --size-fonts-sm-line: 15.600000381469727px;
    /* string */
    --size-fonts-1xl-line-percent: 110%;
    --size-fonts-2xl-line-percent: 130%;
    --size-fonts-3xl-line-percent: 110%;
    --size-fonts-4xl-line-percent: 110%;
    --size-fonts-5xl-line-percent: 110%;
    --size-fonts-6xl-line-percent: 110%;
    --size-fonts-button-lg-line-percent: 130%;
    --size-fonts-button-md-line-percent: 120%;
    --size-fonts-button-sm-line-percent: 100%;
    --size-fonts-lg-line-percent: 150%;
    --size-fonts-md-line-percent: 120%;
    --size-fonts-sm-line-percent: 130%;
  }
}/*# sourceMappingURL=vars.css.map */