:root { --primary: #00B6B3; --primary-l-1: #d7f4f4; --primary-l-2: #f3fcfc; --primary-d-1: #078686; --primary-d-2: #003a3f; --primary-d-3: #092426; --secondary: hsl(180, 57%, 90%); --secondary-l-1: hsl(180, 57%, 93%); --secondary-l-2: hsl(180, 57%, 97%); --secondary-d-1: hsl(180, 13%, 68%); --secondary-d-2: hsl(180, 6%, 45%); --secondary-d-3: hsl(180, 6%, 23%); --tertiary: hsl(180, 57%, 90%); --tertiary-t-1: hsla(180, 57%, 90%, 0.25); --tertiary-t-2: hsla(180, 57%, 90%, 0.5); --tertiary-t-3: hsla(180, 57%, 90%, 0.75); --accent: #FF752C; --accent-l-1: #ffa87a; --dark: hsl(345 6% 13%); --dark-l-1: hsl(345, 2%, 35%); --dark-l-2: hsl(345, 1%, 56%); --dark-l-3: hsl(345, 1%, 78%); --black: hsl(0 0% 0%); --white: hsl(100 100% 100%); --transparent: transparent; --success: hsl(92 50.42% 53.33%); --danger: hsl(12.88 86.5% 53.53%); --warning: hsl(21, 100%, 59%); --info: hsl(198.26 100% 40.59%); --neutral: hsl(43 25% 86%); --success-l-1: hsl(92, 50%, 77%); --success-d-1: hsl(92, 44%, 27%); --danger-l-1: hsl(13, 86%, 77%); --danger-d-1: hsl(13, 75%, 27%); --warning-l-1: hsl(21, 100%, 80%); --warning-d-1: hsl(21, 69%, 30%); --info-l-1: hsl(198, 68%, 70%); --info-d-1: hsl(198, 100%, 20%); --text-2xs: clamp(0.72rem, calc(0 * (100vw - 22.5rem) + 0.72rem), 0.72rem); --text-xs: clamp(0.87rem, calc(0 * (100vw - 22.5rem) + 0.87rem), 0.87rem); --text-s: clamp(1.04rem, calc(0 * (100vw - 22.5rem) + 1.04rem), 1.04rem); --text-m: clamp(1.25rem, calc(0 * (100vw - 22.5rem) + 1.25rem), 1.25rem); --text-l: clamp(1.5rem, calc(0 * (100vw - 22.5rem) + 1.5rem), 1.5rem); --text-xl: clamp(1.8rem, calc(0 * (100vw - 22.5rem) + 1.8rem), 1.8rem); --text-2xl: clamp(2.16rem, calc(0 * (100vw - 22.5rem) + 2.16rem), 2.16rem); --heading-2xs: clamp(0.87rem, calc(0 * (100vw - 22.5rem) + 0.87rem), 0.87rem); --heading-xs: clamp(1.04rem, calc(0 * (100vw - 22.5rem) + 1.04rem), 1.04rem); --heading-s: clamp(1.25rem, calc(0 * (100vw - 22.5rem) + 1.25rem), 1.25rem); --heading-m: clamp(1.5rem, calc(0 * (100vw - 22.5rem) + 1.5rem), 1.5rem); --heading-l: clamp(1.8rem, calc(0 * (100vw - 22.5rem) + 1.8rem), 1.8rem); --heading-xl: clamp(2.16rem, calc(0 * (100vw - 22.5rem) + 2.16rem), 2.16rem); --heading-2xl: clamp(2.59rem, calc(0 * (100vw - 22.5rem) + 2.59rem), 2.59rem); --space-2xs: clamp(0.13rem, calc(0 * (100vw - 22.5rem) + 0.13rem), 0.13rem); --space-xs: clamp(0.25rem, calc(0 * (100vw - 22.5rem) + 0.25rem), 0.25rem); --space-s: clamp(0.5rem, calc(0 * (100vw - 22.5rem) + 0.5rem), 0.5rem); --space-m: clamp(1rem, calc(0 * (100vw - 22.5rem) + 1rem), 1rem); --space-l: clamp(2rem, calc(0 * (100vw - 22.5rem) + 2rem), 2rem); --space-xl: clamp(4rem, calc(0 * (100vw - 22.5rem) + 4rem), 4rem); --space-2xl: clamp(8rem, calc(0 * (100vw - 22.5rem) + 8rem), 8rem); --section-space-2xs: clamp(0.25rem, calc(0.0022127659574468087 * (100vw - 22.5rem) + 0.25rem), 0.38rem); --section-space-xs: clamp(0.5rem, calc(0.00425531914893617 * (100vw - 22.5rem) + 0.5rem), 0.75rem); --section-space-s: clamp(1rem, calc(0.00851063829787234 * (100vw - 22.5rem) + 1rem), 1.5rem); --section-space-m: clamp(2rem, calc(0.01702127659574468 * (100vw - 22.5rem) + 2rem), 3rem); --section-space-l: clamp(4rem, calc(0.03404255319148936 * (100vw - 22.5rem) + 4rem), 6rem); --section-space-xl: clamp(8rem, calc(0.06808510638297872 * (100vw - 22.5rem) + 8rem), 12rem); --section-space-2xl: clamp(16rem, calc(0.13617021276595745 * (100vw - 22.5rem) + 16rem), 24rem); --radius-2xs: clamp(0.19rem, calc(0 * (100vw - 22.5rem) + 0.19rem), 0.19rem); --radius-xs: clamp(0.38rem, calc(0 * (100vw - 22.5rem) + 0.38rem), 0.38rem); --radius-s: clamp(0.75rem, calc(0 * (100vw - 22.5rem) + 0.75rem), 0.75rem); --radius-m: clamp(1.5rem, calc(0 * (100vw - 22.5rem) + 1.5rem), 1.5rem); --radius-l: clamp(3rem, calc(0 * (100vw - 22.5rem) + 3rem), 3rem); --radius-xl: clamp(6rem, calc(0 * (100vw - 22.5rem) + 6rem), 6rem); --radius-2xl: clamp(12rem, calc(0 * (100vw - 22.5rem) + 12rem), 12rem);}.text-primary { color: var(--primary); }.text-primary-l-1 { color: var(--primary-l-1); }.text-primary-l-2 { color: var(--primary-l-2); }.text-primary-d-1 { color: var(--primary-d-1); }.text-primary-d-2 { color: var(--primary-d-2); }.text-primary-d-3 { color: var(--primary-d-3); }.border-primary { border-color: var(--primary); }.border-primary-l-1 { border-color: var(--primary-l-1); }.border-primary-l-2 { border-color: var(--primary-l-2); }.border-primary-d-1 { border-color: var(--primary-d-1); }.border-primary-d-2 { border-color: var(--primary-d-2); }.border-primary-d-3 { border-color: var(--primary-d-3); }.bg-primary { background-color: var(--primary); }.bg-primary-l-1 { background-color: var(--primary-l-1); }.bg-primary-l-2 { background-color: var(--primary-l-2); }.bg-primary-d-1 { background-color: var(--primary-d-1); }.bg-primary-d-2 { background-color: var(--primary-d-2); }.bg-primary-d-3 { background-color: var(--primary-d-3); }.bg-secondary { background-color: var(--secondary); }.bg-secondary-l-1 { background-color: var(--secondary-l-1); }.bg-secondary-l-2 { background-color: var(--secondary-l-2); }.bg-secondary-d-1 { background-color: var(--secondary-d-1); }.bg-secondary-d-2 { background-color: var(--secondary-d-2); }.bg-secondary-d-3 { background-color: var(--secondary-d-3); }.text-secondary { color: var(--secondary); }.text-secondary-l-1 { color: var(--secondary-l-1); }.text-secondary-l-2 { color: var(--secondary-l-2); }.text-secondary-d-1 { color: var(--secondary-d-1); }.text-secondary-d-2 { color: var(--secondary-d-2); }.text-secondary-d-3 { color: var(--secondary-d-3); }.border-secondary { border-color: var(--secondary); }.border-secondary-l-1 { border-color: var(--secondary-l-1); }.border-secondary-l-2 { border-color: var(--secondary-l-2); }.border-secondary-d-1 { border-color: var(--secondary-d-1); }.border-secondary-d-2 { border-color: var(--secondary-d-2); }.border-secondary-d-3 { border-color: var(--secondary-d-3); }.bg-tertiary { background-color: var(--tertiary); }.bg-tertiary-t-1 { background-color: var(--tertiary-t-1); }.bg-tertiary-t-2 { background-color: var(--tertiary-t-2); }.bg-tertiary-t-3 { background-color: var(--tertiary-t-3); }.text-tertiary { color: var(--tertiary); }.text-tertiary-t-1 { color: var(--tertiary-t-1); }.text-tertiary-t-2 { color: var(--tertiary-t-2); }.text-tertiary-t-3 { color: var(--tertiary-t-3); }.border-tertiary { border-color: var(--tertiary); }.border-tertiary-t-1 { border-color: var(--tertiary-t-1); }.border-tertiary-t-2 { border-color: var(--tertiary-t-2); }.border-tertiary-t-3 { border-color: var(--tertiary-t-3); }.bg-accent { background-color: var(--accent); }.bg-accent-l-1 { background-color: var(--accent-l-1); }.text-accent { color: var(--accent); }.text-accent-l-1 { color: var(--accent-l-1); }.border-accent { border-color: var(--accent); }.border-accent-l-1 { border-color: var(--accent-l-1); }.bg-dark { background-color: var(--dark); }.bg-dark-l-1 { background-color: var(--dark-l-1); }.bg-dark-l-2 { background-color: var(--dark-l-2); }.bg-dark-l-3 { background-color: var(--dark-l-3); }.text-dark { color: var(--dark); }.text-dark-l-1 { color: var(--dark-l-1); }.text-dark-l-2 { color: var(--dark-l-2); }.text-dark-l-3 { color: var(--dark-l-3); }.border-dark { border-color: var(--dark); }.border-dark-l-1 { border-color: var(--dark-l-1); }.border-dark-l-2 { border-color: var(--dark-l-2); }.border-dark-l-3 { border-color: var(--dark-l-3); }.bg-black { background-color: var(--black); }.text-black { color: var(--black); }.border-black { border-color: var(--black); }.bg-white { background-color: var(--white); }.text-white { color: var(--white); }.border-white { border-color: var(--white); }.bg-neutral { background-color: var(--neutral); }.text-neutral { color: var(--neutral); }.border-neutral { border-color: var(--neutral); }.text--2xs { font-size: var(--text-2xs); }.text--xs { font-size: var(--text-xs); }.text--s { font-size: var(--text-s); }.text--m { font-size: var(--text-m); }.text--l { font-size: var(--text-l); }.text--xl { font-size: var(--text-xl); }.text--2xl { font-size: var(--text-2xl); }.heading--2xs { font-size: var(--heading-2xs); }.heading--xs { font-size: var(--heading-xs); }.heading--s { font-size: var(--heading-s); }.heading--m { font-size: var(--heading-m); }.heading--l { font-size: var(--heading-l); }.heading--xl { font-size: var(--heading-xl); }.heading--2xl { font-size: var(--heading-2xl); }