/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --10: 0; /* @kind other */
  --12-2: 12; /* @kind other */
  --12-3: 0; /* @kind other */
  --12: 12; /* @kind other */
  --14: 0; /* @kind other */
  --16-2: 16; /* @kind other */
  --16-3: 16; /* @kind other */
  --16: 16; /* @kind other */
  --1: 8; /* @kind other */
  --20: 20; /* @kind other */
  --24-2: 24; /* @kind other */
  --24: 24; /* @kind other */
  --28-2: 28; /* @kind other */
  --28-3: 28; /* @kind other */
  --28: 28; /* @kind other */
  --2: 16; /* @kind other */
  --32: 32; /* @kind other */
  --3: 24; /* @kind other */
  --4-2: 4; /* @kind other */
  --4-3: 32; /* @kind other */
  --40: 40; /* @kind other */
  --48: 48; /* @kind other */
  --4: 4; /* @kind other */
  --5: 40; /* @kind other */
  --6: 48; /* @kind other */
  --7: 56; /* @kind other */
  --8-2: 8; /* @kind other */
  --8-3: 0; /* @kind other */
  --8-4: 64; /* @kind other */
  --80-2: 80; /* @kind other */
  --80: 80; /* @kind other */
  --8: 8; /* @kind other */
  --action-active: var(--grey-600); /* @kind color */
  --action-disabled-bg: var(--grey-20); /* @kind color */
  --action-disabled: rgba(145,158,171,0.8); /* @kind color */
  --action-hover: var(--grey-8); /* @kind color */
  --action-selected: var(--grey-16); /* @kind color */
  --avatar-rounded-radius: var(--radius-1-5); /* @kind radius */
  --background-bg5: var(--white-80); /* @kind color */
  --background-default: var(--white-main); /* @kind color */
  --background-neutral: var(--grey-200); /* @kind color */
  --background-paper: var(--white-main); /* @kind color */
  --badge-status-large-size: 12; /* @kind spacing */
  --badge-status-medium-size: 10; /* @kind spacing */
  --badge-status-small-size: 8; /* @kind spacing */
  --bgcolor-light: var(--neutral-nr01); /* @kind color */
  --bgcolor-primary: var(--primary-pr10); /* @kind color */
  --bgcolor-primarydark: var(--primary-pr15); /* @kind color */
  --bgcolor-secondary: var(--secondary-sc10); /* @kind color */
  --bgcolor-secondarydark: var(--secondary-sc15); /* @kind color */
  --black-100: rgb(0,0,0); /* @kind color */
  --black-10: rgba(0,0,0,0.1); /* @kind color */
  --black-20: rgba(0,0,0,0.2); /* @kind color */
  --black-40: rgba(0,0,0,0.4); /* @kind color */
  --black-4: rgba(0,0,0,0.04); /* @kind color */
  --black-80: rgba(0,0,0,0.8); /* @kind color */
  --black-main: rgb(0,0,0); /* @kind color */
  --button-large-height: 48; /* @kind spacing */
  --button-large-icon: 24; /* @kind other */
  --button-large-px: 16; /* @kind other */
  --button-medium-height: 36; /* @kind spacing */
  --button-medium-icon: 20; /* @kind other */
  --button-medium-px: 12; /* @kind other */
  --button-min-width: 64; /* @kind spacing */
  --button-neutral-default: var(--neutral-nr03); /* @kind color */
  --button-neutral-hover: var(--neutral-nr03); /* @kind color */
  --button-neutraloutline-default: var(--neutral-nr01-2); /* @kind color */
  --button-neutraloutline-disabled: var(--neutral-nr04); /* @kind color */
  --button-neutraloutline-focused: var(--button-neutral-hover); /* @kind color */
  --button-neutraloutline-hover: var(--neutral-nr02); /* @kind color */
  --button-neutraloutline-selected: var(--button-neutral-default); /* @kind color */
  --button-neutraloutline-stroke: var(--neutral-nr04); /* @kind color */
  --button-primary-disabled: var(--neutral-nr04); /* @kind color */
  --button-primaryoutline-default-2: var(--neutral-nr01); /* @kind color */
  --button-primaryoutline-default: var(--neutral-nr01-2); /* @kind color */
  --button-primaryoutline-focused: var(--button-primaryoutline-hover); /* @kind color */
  --button-primaryoutline-hover: var(--primary-pr02); /* @kind color */
  --button-primaryoutline-selected: var(--primary-pr03); /* @kind color */
  --button-primaryoutline-stroke-2: var(--primary-pr10-2); /* @kind color */
  --button-primaryoutline-stroke: var(--primary-pr10); /* @kind color */
  --button-radius: var(--radius-1); /* @kind radius */
  --button-secondaryoutline-default: var(--neutral-nr01-2); /* @kind color */
  --button-secondaryoutline-focused: var(--button-secondaryoutline-hover); /* @kind color */
  --button-secondaryoutline-hover: var(--secondary-sc02); /* @kind color */
  --button-secondaryoutline-selected: var(--secondary-sc03); /* @kind color */
  --button-secondaryoutline-stroke: var(--secondary-sc10); /* @kind color */
  --button-small-height: 30; /* @kind spacing */
  --button-small-icon: 18; /* @kind other */
  --button-small-px: 8; /* @kind other */
  --button-spacing: var(--spacing-1); /* @kind spacing */
  --button-text-large-px: 10; /* @kind color */
  --button-text-medium-px: 8; /* @kind color */
  --button-text-small-px: 4; /* @kind color */
  --card-radius: var(--radius-2); /* @kind radius */
  --checkbox-medium-icon: 24; /* @kind other */
  --checkbox-p: 8; /* @kind other */
  --checkbox-small-icon: 20; /* @kind other */
  --colors-green: rgb(52,199,89); /* @kind color */
  --components-button-outlined: var(--grey-32); /* @kind color */
  --components-divider: rgba(145,158,171,0.2); /* @kind color */
  --components-paper-bg-blur: rgba(255,255,255,0.9); /* @kind color */
  --components-textfield-outline-2: var(--grey-20-2); /* @kind color */
  --components-textfield-outline: var(--grey-20); /* @kind color */
  --components-textfield-underline: var(--grey-32); /* @kind color */
  --dark-light-error: var(--error-dark); /* @kind color */
  --dark-light-info: var(--info-dark); /* @kind color */
  --dark-light-primary: var(--primary-dark); /* @kind color */
  --dark-light-secondary: var(--secondary-dark); /* @kind color */
  --dark-light-success: var(--success-dark); /* @kind color */
  --dark-light-warning: var(--warning-dark); /* @kind color */
  --dialog-action-px: var(--spacing-3); /* @kind other */
  --dialog-action-py: var(--spacing-3); /* @kind other */
  --dialog-action-spacing: var(--spacing-1-5); /* @kind spacing */
  --dialog-content-px: var(--spacing-3); /* @kind other */
  --dialog-header-pl: 24; /* @kind other */
  --dialog-header-pr: 12; /* @kind other */
  --dialog-header-py: 24; /* @kind other */
  --dialog-header-spacing: var(--spacing-2); /* @kind spacing */
  --docs-components-color-2: rgb(123,97,255); /* @kind color */
  --docs-components-color: rgb(123,97,255); /* @kind color */
  --docs-components-radius-2: var(--radius-3-2); /* @kind radius */
  --docs-components-radius: var(--radius-3); /* @kind radius */
  --error-12: rgba(255,86,48,0.12); /* @kind color */
  --error-16: rgba(255,86,48,0.16); /* @kind color */
  --error-48: rgba(255,86,48,0.48); /* @kind color */
  --error-8: rgba(255,86,48,0.08); /* @kind color */
  --error-contrast-text: var(--white-main); /* @kind color */
  --error-dark: rgb(183,29,24); /* @kind color */
  --error-light: rgb(255,172,130); /* @kind color */
  --error-main-2: rgb(255,86,48); /* @kind color */
  --error-main: rgb(255,86,48); /* @kind color */
  --field-global-spacing: 0; /* @kind spacing */
  --fills-secondary: rgba(120,120,128,0.16); /* @kind color */
  --font-family: "Inter"; /* @kind font */
  --fontfamilies-secondary: "Inter"; /* @kind font */
  --fontsize-md: 16; /* @kind font */
  --fontsize-sm: 14; /* @kind font */
  --fontsize-xsm: 12; /* @kind font */
  --fontweights-regular: "Regular"; /* @kind other */
  --fontweights-semibold: "Semi Bold"; /* @kind other */
  --form-helper-text-icon-2: 16; /* @kind color */
  --form-helper-text-icon: 16; /* @kind color */
  --form-helper-text-pl-2: 12; /* @kind color */
  --form-helper-text-pl: 12; /* @kind color */
  --form-helper-text-pt-2: 8; /* @kind color */
  --form-helper-text-pt: 8; /* @kind color */
  --form-helper-text-spacing-2: var(--spacing-0-5-2); /* @kind spacing */
  --form-helper-text-spacing: var(--spacing-0-5); /* @kind spacing */
  --global-default-bg: var(--grey-300); /* @kind color */
  --global-inherit-bg-hovered: var(--grey-700); /* @kind color */
  --global-inherit-bg: var(--grey-800); /* @kind color */
  --global-inherit-color: var(--white-main); /* @kind color */
  --grey-12: rgba(145,158,171,0.12); /* @kind color */
  --grey-16: rgba(145,158,171,0.16); /* @kind color */
  --grey-20-2: rgba(145,158,171,0.2); /* @kind color */
  --grey-200: rgb(244,246,248); /* @kind color */
  --grey-20: rgba(145,158,171,0.2); /* @kind color */
  --grey-24: rgba(145,158,171,0.24); /* @kind color */
  --grey-300: rgb(223,227,232); /* @kind color */
  --grey-32: rgba(145,158,171,0.32); /* @kind color */
  --grey-400: rgb(196,205,213); /* @kind color */
  --grey-500-2: rgb(145,158,171); /* @kind color */
  --grey-500: rgb(145,158,171); /* @kind color */
  --grey-600-2: rgb(99,115,129); /* @kind color */
  --grey-600: rgb(99,115,129); /* @kind color */
  --grey-700: rgb(69,79,91); /* @kind color */
  --grey-800-2: rgb(33,43,54); /* @kind color */
  --grey-800: rgb(33,43,54); /* @kind color */
  --grey-8: rgba(145,158,171,0.08); /* @kind color */
  --grey-900: rgb(22,28,36); /* @kind color */
  --icon-button-extra-small-icon: 18; /* @kind other */
  --icon-button-extra-small-size: 28; /* @kind spacing */
  --icon-button-large-icon: 32; /* @kind other */
  --icon-button-large-size: 48; /* @kind spacing */
  --icon-button-medium-icon: 24; /* @kind other */
  --icon-button-medium-p: 8; /* @kind other */
  --icon-button-medium-size-2: 40; /* @kind spacing */
  --icon-button-medium-size: 40; /* @kind spacing */
  --icon-button-radius-2: var(--radius-50-2); /* @kind radius */
  --icon-button-radius: var(--radius-50); /* @kind radius */
  --icon-button-small-icon: 20; /* @kind other */
  --icon-button-small-size: 36; /* @kind spacing */
  --iconcolor-disabled: var(--neutral-nr06); /* @kind color */
  --iconcolor-grey: var(--neutral-nr06); /* @kind color */
  --iconcolor-neutraldark: var(--neutral-nr20); /* @kind color */
  --iconcolor-primary: var(--bgcolor-primary); /* @kind color */
  --iconcolor-primarydark: var(--bgcolor-primarydark); /* @kind color */
  --iconcolor-red: var(--sem-rd10); /* @kind color */
  --iconcolor-secondary: var(--bgcolor-secondary); /* @kind color */
  --iconcolor-secondarydark: var(--bgcolor-secondarydark); /* @kind color */
  --info-12: rgba(0,184,217,0.12); /* @kind color */
  --info-16: rgba(0,184,217,0.16); /* @kind color */
  --info-48: rgba(0,184,217,0.48); /* @kind color */
  --info-8: rgba(0,184,217,0.08); /* @kind color */
  --info-contrast-text: var(--white-main); /* @kind color */
  --info-dark: rgb(0,108,156); /* @kind color */
  --info-light: rgb(97,243,243); /* @kind color */
  --info-main: rgb(0,184,217); /* @kind color */
  --label-height: 24; /* @kind spacing */
  --label-icon: 16; /* @kind other */
  --label-min-width: 24; /* @kind spacing */
  --label-px: 6; /* @kind other */
  --label-radius: var(--radius-0-75); /* @kind radius */
  --label-spacing: var(--spacing-0-75); /* @kind spacing */
  --layout-header-main-height: 80; /* @kind spacing */
  --layout-nav-horizontal-item-spacing: var(--spacing-1); /* @kind spacing */
  --layout-nav-mini-item-root-height: 54; /* @kind spacing */
  --layout-nav-mini-item-sub-height: 36; /* @kind spacing */
  --letter-spacing: 0; /* @kind font */
  --letterspacing-md: 0; /* @kind font */
  --lineheights-md: 20; /* @kind font */
  --lineheights-sm: 18; /* @kind font */
  --main-background: rgb(3,32,72); /* @kind color */
  --main-light-error: var(--error-main); /* @kind color */
  --main-light-primary: var(--primary-main); /* @kind color */
  --miscellaneous-kit-section-fill: rgb(245,245,245); /* @kind color */
  --miscellaneous-tab-unselected: rgb(153,153,153); /* @kind color */
  --miscellaneous-text-field-outline: rgba(60,60,67,0.29); /* @kind color */
  --neutral-100: rgb(16,16,16); /* @kind color */
  --neutral-nr01-2: rgb(255,255,255); /* @kind color */
  --neutral-nr01: rgb(255,255,255); /* @kind color */
  --neutral-nr02: rgb(250,250,250); /* @kind color */
  --neutral-nr03-2: rgb(231,231,231); /* @kind color */
  --neutral-nr03: rgb(239,239,239); /* @kind color */
  --neutral-nr04: rgb(221,221,221); /* @kind color */
  --neutral-nr05: rgb(198,198,198); /* @kind color */
  --neutral-nr06: rgb(187,187,187); /* @kind color */
  --neutral-nr07-2: rgb(175,175,175); /* @kind color */
  --neutral-nr07: rgb(109,109,109); /* @kind color */
  --neutral-nr08: rgb(164,164,164); /* @kind color */
  --neutral-nr09-2: rgb(48,48,48); /* @kind color */
  --neutral-nr09: rgb(142,142,142); /* @kind color */
  --neutral-nr10-2: rgb(73,73,73); /* @kind color */
  --neutral-nr10: rgb(35,35,35); /* @kind color */
  --neutral-nr11: rgb(11,11,11); /* @kind color */
  --neutral-nr15: rgb(51,51,51); /* @kind color */
  --neutral-nr20: rgb(28,28,28); /* @kind color */
  --other-facebook-2: rgb(24,119,242); /* @kind color */
  --other-facebook: rgb(24,119,242); /* @kind color */
  --overlays-default: rgba(0,0,0,0.2); /* @kind color */
  --primary-16: rgba(0,167,111,0.16); /* @kind color */
  --primary-48: rgba(0,167,111,0.48); /* @kind color */
  --primary-8: rgba(0,167,111,0.08); /* @kind color */
  --primary-brand: var(--black-100); /* @kind color */
  --primary-contrast-text: var(--white-main); /* @kind color */
  --primary-dark: rgb(0,120,103); /* @kind color */
  --primary-light: rgb(91,228,155); /* @kind color */
  --primary-main: rgb(0,167,111); /* @kind color */
  --primary-pr02: rgb(206,217,249); /* @kind color */
  --primary-pr03: rgb(182,198,247); /* @kind color */
  --primary-pr06: rgb(108,141,239); /* @kind color */
  --primary-pr08: rgb(59,103,233); /* @kind color */
  --primary-pr09: rgb(35,84,230); /* @kind color */
  --primary-pr10-2: rgb(24,73,214); /* @kind color */
  --primary-pr10: rgb(24,73,214); /* @kind color */
  --primary-pr12: rgb(22,64,193); /* @kind color */
  --primary-pr15: rgb(18,54,160); /* @kind color */
  --primary-pr17: rgb(16,46,139); /* @kind color */
  --primary-pr20: rgb(11,32,96); /* @kind color */
  --progress-circular-size: 44; /* @kind spacing */
  --radi-lg: 12; /* @kind other */
  --radi-md: 4; /* @kind other */
  --radi-mlg: 8; /* @kind other */
  --radius-0-75: 6; /* @kind radius */
  --radius-1-2: 8; /* @kind radius */
  --radius-1-5: 12; /* @kind radius */
  --radius-1: 8; /* @kind radius */
  --radius-2: 16; /* @kind radius */
  --radius-3-2: 24; /* @kind radius */
  --radius-3: 24; /* @kind radius */
  --radius-4: 4; /* @kind radius */
  --radius-50-2: 500; /* @kind radius */
  --radius-50: 500; /* @kind radius */
  --radius-8: 8; /* @kind radius */
  --regular: 400; /* @kind other */
  --secondary-16: rgba(142,51,255,0.16); /* @kind color */
  --secondary-48: rgba(142,51,255,0.48); /* @kind color */
  --secondary-8: rgba(142,51,255,0.08); /* @kind color */
  --secondary-blue: rgb(146,191,255); /* @kind color */
  --secondary-contrast-text: var(--white-main); /* @kind color */
  --secondary-cyan: rgb(174,199,237); /* @kind color */
  --secondary-dark: rgb(81,25,183); /* @kind color */
  --secondary-green: rgb(148,233,184); /* @kind color */
  --secondary-indigo: rgb(159,159,248); /* @kind color */
  --secondary-light: rgb(198,132,255); /* @kind color */
  --secondary-main: rgb(142,51,255); /* @kind color */
  --secondary-mint: rgb(150,226,214); /* @kind color */
  --secondary-sc02: rgb(196,248,250); /* @kind color */
  --secondary-sc03: rgb(167,244,248); /* @kind color */
  --secondary-sc06: rgb(79,233,241); /* @kind color */
  --secondary-sc09: rgb(16,200,209); /* @kind color */
  --secondary-sc10: rgb(14,172,180); /* @kind color */
  --secondary-sc12: rgb(13,154,162); /* @kind color */
  --secondary-sc15: rgb(10,129,135); /* @kind color */
  --secondary-sc17: rgb(9,112,117); /* @kind color */
  --secondary-sc20: rgb(6,77,81); /* @kind color */
  --sem-rd10: rgb(255,54,54); /* @kind color */
  --semi-bold: 600; /* @kind other */
  --shadow-op8: var(--transparentdark-op20); /* @kind color */
  --size-16: 16; /* @kind spacing */
  --size-20: 20; /* @kind spacing */
  --size-24: 24; /* @kind spacing */
  --size-28: 28; /* @kind spacing */
  --spacing-0-5-2: 4; /* @kind spacing */
  --spacing-0-5: 4; /* @kind spacing */
  --spacing-0-75: 6; /* @kind spacing */
  --spacing-1-5: 12; /* @kind spacing */
  --spacing-1: 8; /* @kind spacing */
  --spacing-2: 16; /* @kind spacing */
  --spacing-3: 24; /* @kind spacing */
  --spacing-5: 40; /* @kind spacing */
  --spacing-lg: 24; /* @kind spacing */
  --spacing-md: 16; /* @kind spacing */
  --spacing-sm: 8; /* @kind spacing */
  --spacing-smd: 12; /* @kind spacing */
  --spacing-xs: 6; /* @kind spacing */
  --spacing-xxs: 4; /* @kind spacing */
  --strokecolor-lightgrey-2: var(--neutral-nr03-2); /* @kind color */
  --strokecolor-lightgrey: var(--neutral-nr03); /* @kind color */
  --success-16: rgba(34,197,94,0.16); /* @kind color */
  --success-48: rgba(34,197,94,0.48); /* @kind color */
  --success-8: rgba(34,197,94,0.08); /* @kind color */
  --success-contrast-text: var(--white-main); /* @kind color */
  --success-dark: rgb(17,141,87); /* @kind color */
  --success-light: rgb(119,237,139); /* @kind color */
  --success-main-2: rgb(34,197,94); /* @kind color */
  --success-main: rgb(34,197,94); /* @kind color */
  --tab-icon: 24; /* @kind other */
  --tabs-item-min-height: 48; /* @kind spacing */
  --tabs-item-min-width: 48; /* @kind spacing */
  --tabs-item-px: 16; /* @kind other */
  --tabs-item-spacing: var(--spacing-1); /* @kind spacing */
  --tabs-list-spacing: var(--spacing-5); /* @kind spacing */
  --text-disabled-2: var(--grey-500-2); /* @kind color */
  --text-disabled: var(--grey-500); /* @kind color */
  --text-primary-2: var(--grey-800-2); /* @kind color */
  --text-primary-3: rgba(0,0,0,0.87); /* @kind color */
  --text-primary: var(--grey-800); /* @kind color */
  --text-secondary-2: var(--grey-600-2); /* @kind color */
  --text-secondary: var(--grey-600); /* @kind color */
  --textarea-outlined-px: 14; /* @kind color */
  --textcolor-default-2: var(--neutral-nr11); /* @kind color */
  --textcolor-default: var(--neutral-nr20); /* @kind color */
  --textcolor-disabled: var(--neutral-nr05); /* @kind color */
  --textcolor-primary-2: var(--primary-pr10-2); /* @kind color */
  --textcolor-primary: var(--primary-pr10); /* @kind color */
  --textcolor-primaryselected: var(--primary-pr12); /* @kind color */
  --textcolor-secdefault-2: var(--neutral-nr07-2); /* @kind color */
  --textcolor-secdefault: var(--neutral-nr07); /* @kind color */
  --textcolor-secondary: var(--secondary-sc10); /* @kind color */
  --textcolor-secondaryselected: var(--secondary-sc12); /* @kind color */
  --textfield-filled-pl: 12; /* @kind color */
  --textfield-filled-pr: 10; /* @kind color */
  --textfield-filled-radius: var(--radius-1); /* @kind radius */
  --textfield-medium-height: 53; /* @kind spacing */
  --textfield-outlined-medium-height: 54; /* @kind spacing */
  --textfield-outlined-px-2: 14; /* @kind color */
  --textfield-outlined-px: 14; /* @kind color */
  --textfield-outlined-radius-2: var(--radius-1-2); /* @kind radius */
  --textfield-outlined-radius: var(--radius-1); /* @kind radius */
  --textfield-outlined-small-height-2: 40; /* @kind spacing */
  --textfield-outlined-small-height: 40; /* @kind spacing */
  --textfield-select-arrow-mr-2: 10; /* @kind color */
  --textfield-select-arrow-mr: 10; /* @kind color */
  --textfield-select-arrow-size-2: 20; /* @kind spacing */
  --textfield-select-arrow-size: 20; /* @kind spacing */
  --textfield-small-height: 45; /* @kind spacing */
  --textfield-standard-input-medium-pt: 3; /* @kind color */
  --textfield-standard-input-pb: 4; /* @kind color */
  --textfield-standard-input-small-pt: 1; /* @kind color */
  --textfield-standard-medium-height: 45; /* @kind spacing */
  --textfield-standard-small-height: 42; /* @kind spacing */
  --textfield-start-adornment-mr-2: 8; /* @kind color */
  --textfield-start-adornment-mr: 8; /* @kind color */
  --textfield-start-adornment-size: 24; /* @kind spacing */
  --transparentdark-op20: rgba(33,33,33,0.2); /* @kind color */
  --transparentdark-op68: rgba(33,33,33,0.68); /* @kind color */
  --warning-16: rgba(255,171,0,0.16); /* @kind color */
  --warning-48: rgba(255,171,0,0.48); /* @kind color */
  --warning-8: rgba(255,171,0,0.08); /* @kind color */
  --warning-contrast-text: var(--grey-800); /* @kind color */
  --warning-dark: rgb(183,110,0); /* @kind color */
  --warning-light: rgb(255,214,102); /* @kind color */
  --warning-main: rgb(255,171,0); /* @kind color */
  --white-100: rgb(255,255,255); /* @kind color */
  --white-10: rgba(255,255,255,0.1); /* @kind color */
  --white-20: rgba(255,255,255,0.2); /* @kind color */
  --white-40: rgba(255,255,255,0.4); /* @kind color */
  --white-80: rgba(255,255,255,0.8); /* @kind color */
  --white-main-2: rgb(255,255,255); /* @kind color */
  --white-main: rgb(255,255,255); /* @kind color */
}

:root[data-mode="expanded-4"] {
  --12-2: 16; /* @kind other */
  --12: 16; /* @kind other */
  --16-2: 20; /* @kind other */
  --16-3: 20; /* @kind other */
  --16: 20; /* @kind other */
  --20: 24; /* @kind other */
  --24-2: 28; /* @kind other */
  --24: 28; /* @kind other */
  --28-2: 32; /* @kind other */
  --28-3: 32; /* @kind other */
  --28: 32; /* @kind other */
  --32: 36; /* @kind other */
  --4-2: 8; /* @kind other */
  --40: 44; /* @kind other */
  --48: 52; /* @kind other */
  --4: 8; /* @kind other */
  --8-2: 12; /* @kind other */
  --80-2: 84; /* @kind other */
  --80: 84; /* @kind other */
  --8: 12; /* @kind other */
  --radius-4: 4; /* @kind radius */
  --radius-8: 8; /* @kind radius */
  --size-16: 20; /* @kind spacing */
  --size-20: 24; /* @kind spacing */
  --size-24: 28; /* @kind spacing */
  --size-28: 32; /* @kind spacing */
}

:root[data-mode="expanded-8"] {
  --12-2: 20; /* @kind other */
  --12: 20; /* @kind other */
  --16-2: 24; /* @kind other */
  --16-3: 24; /* @kind other */
  --16: 24; /* @kind other */
  --20: 28; /* @kind other */
  --24-2: 32; /* @kind other */
  --24: 32; /* @kind other */
  --28-2: 36; /* @kind other */
  --28-3: 36; /* @kind other */
  --28: 36; /* @kind other */
  --32: 40; /* @kind other */
  --4-2: 12; /* @kind other */
  --40: 48; /* @kind other */
  --48: 56; /* @kind other */
  --4: 12; /* @kind other */
  --8-2: 16; /* @kind other */
  --80-2: 88; /* @kind other */
  --80: 88; /* @kind other */
  --8: 16; /* @kind other */
  --radius-4: 4; /* @kind radius */
  --radius-8: 8; /* @kind radius */
  --size-16: 12; /* @kind spacing */
  --size-20: 16; /* @kind spacing */
  --size-24: 20; /* @kind spacing */
  --size-28: 24; /* @kind spacing */
}

:root[data-mode="condensed-4"] {
  --12-2: 8; /* @kind other */
  --12: 8; /* @kind other */
  --16-2: 12; /* @kind other */
  --16-3: 12; /* @kind other */
  --16: 12; /* @kind other */
  --20: 16; /* @kind other */
  --24-2: 20; /* @kind other */
  --24: 20; /* @kind other */
  --28-2: 24; /* @kind other */
  --28-3: 24; /* @kind other */
  --28: 24; /* @kind other */
  --32: 28; /* @kind other */
  --4-2: 0; /* @kind other */
  --40: 36; /* @kind other */
  --48: 44; /* @kind other */
  --4: 0; /* @kind other */
  --8-2: 4; /* @kind other */
  --80-2: 76; /* @kind other */
  --80: 76; /* @kind other */
  --8: 4; /* @kind other */
  --radius-4: 4; /* @kind radius */
  --radius-8: 8; /* @kind radius */
  --size-16: 16; /* @kind spacing */
  --size-20: 20; /* @kind spacing */
  --size-24: 24; /* @kind spacing */
  --size-28: 28; /* @kind spacing */
}

:root[data-theme="dark"], .dark {
  --action-active: var(--grey-500); /* @kind color */
  --action-disabled-bg: var(--grey-20); /* @kind color */
  --action-disabled: rgba(145,158,171,0.8); /* @kind color */
  --action-hover: var(--grey-8); /* @kind color */
  --action-selected: var(--grey-16); /* @kind color */
  --background-bg5: rgba(0,0,0,0.1); /* @kind color */
  --background-bg5: rgba(0,0,0,0.15); /* @kind color */
  --background-default: var(--grey-900); /* @kind color */
  --background-neutral: var(--grey-12); /* @kind color */
  --background-paper: var(--grey-800); /* @kind color */
  --bgcolor-light: var(--neutral-nr10); /* @kind color */
  --bgcolor-primary: var(--primary-pr10); /* @kind color */
  --bgcolor-primarydark: var(--primary-pr20); /* @kind color */
  --bgcolor-secondary: var(--secondary-sc10); /* @kind color */
  --bgcolor-secondarydark: var(--secondary-sc20); /* @kind color */
  --black-100: rgb(255,255,255); /* @kind color */
  --black-100: rgb(255,255,255); /* @kind color */
  --black-10: rgba(255,255,255,0.15); /* @kind color */
  --black-10: rgba(255,255,255,0.15); /* @kind color */
  --black-20: rgba(255,255,255,0.2); /* @kind color */
  --black-20: rgba(255,255,255,0.2); /* @kind color */
  --black-40: rgba(255,255,255,0.4); /* @kind color */
  --black-40: rgba(255,255,255,0.4); /* @kind color */
  --black-4: rgba(255,255,255,0.1); /* @kind color */
  --black-4: rgba(255,255,255,0.1); /* @kind color */
  --black-80: rgba(255,255,255,0.8); /* @kind color */
  --black-80: rgba(255,255,255,0.8); /* @kind color */
  --button-neutral-default: var(--neutral-nr08); /* @kind color */
  --button-neutral-hover: var(--neutral-nr09); /* @kind color */
  --button-neutraloutline-default: var(--neutral-nr20); /* @kind color */
  --button-neutraloutline-disabled: var(--neutral-nr10-2); /* @kind color */
  --button-neutraloutline-focused: var(--button-neutraloutline-hover); /* @kind color */
  --button-neutraloutline-hover: var(--neutral-nr09); /* @kind color */
  --button-neutraloutline-selected: var(--neutral-nr10-2); /* @kind color */
  --button-neutraloutline-stroke: var(--neutral-nr08); /* @kind color */
  --button-primary-disabled: var(--neutral-nr09); /* @kind color */
  --button-primaryoutline-default-2: var(--neutral-nr11); /* @kind color */
  --button-primaryoutline-default: var(--neutral-nr20); /* @kind color */
  --button-primaryoutline-focused: var(--button-primaryoutline-hover); /* @kind color */
  --button-primaryoutline-hover: var(--primary-pr15); /* @kind color */
  --button-primaryoutline-selected: var(--primary-pr17); /* @kind color */
  --button-primaryoutline-stroke-2: var(--primary-pr10-2); /* @kind color */
  --button-primaryoutline-stroke: var(--primary-pr10); /* @kind color */
  --button-secondaryoutline-default: var(--neutral-nr20); /* @kind color */
  --button-secondaryoutline-focused: var(--button-secondaryoutline-hover); /* @kind color */
  --button-secondaryoutline-hover: var(--secondary-sc15); /* @kind color */
  --button-secondaryoutline-selected: var(--secondary-sc17); /* @kind color */
  --button-secondaryoutline-stroke: var(--secondary-sc10); /* @kind color */
  --colors-green: rgb(48,209,88); /* @kind color */
  --colors-green: rgb(48,209,88); /* @kind color */
  --colors-green: rgb(48,219,91); /* @kind color */
  --colors-green: rgb(48,219,91); /* @kind color */
  --components-button-outlined: var(--grey-32); /* @kind color */
  --components-divider: rgba(145,158,171,0.2); /* @kind color */
  --components-paper-bg-blur: rgba(33,43,54,0.9); /* @kind color */
  --components-textfield-outline-2: var(--grey-20-2); /* @kind color */
  --components-textfield-outline: var(--grey-20); /* @kind color */
  --components-textfield-underline: var(--grey-32); /* @kind color */
  --dark-light-error: var(--error-light); /* @kind color */
  --dark-light-info: var(--info-light); /* @kind color */
  --dark-light-primary: var(--primary-light); /* @kind color */
  --dark-light-secondary: var(--secondary-light); /* @kind color */
  --dark-light-success: var(--success-light); /* @kind color */
  --dark-light-warning: var(--warning-light); /* @kind color */
  --docs-components-color-2: rgb(123,97,255); /* @kind color */
  --docs-components-color: rgb(123,97,255); /* @kind color */
  --docs-components-radius-2: var(--radius-3-2); /* @kind radius */
  --docs-components-radius: var(--radius-3); /* @kind radius */
  --fills-secondary: rgba(120,120,128,0.32); /* @kind color */
  --fills-secondary: rgba(120,120,128,0.32); /* @kind color */
  --fills-secondary: rgba(120,120,128,0.4); /* @kind color */
  --fills-secondary: rgba(120,120,128,0.4); /* @kind color */
  --global-default-bg: var(--grey-300); /* @kind color */
  --global-inherit-bg-hovered: var(--grey-400); /* @kind color */
  --global-inherit-bg: var(--white-main); /* @kind color */
  --global-inherit-color: var(--grey-800); /* @kind color */
  --iconcolor-disabled: var(--textcolor-disabled); /* @kind color */
  --iconcolor-grey: var(--neutral-nr15); /* @kind color */
  --iconcolor-neutraldark: var(--neutral-nr20); /* @kind color */
  --iconcolor-primary: var(--textcolor-primary); /* @kind color */
  --iconcolor-primarydark: var(--bgcolor-primarydark); /* @kind color */
  --iconcolor-red: var(--sem-rd10); /* @kind color */
  --iconcolor-secondary: var(--secondary-sc06); /* @kind color */
  --iconcolor-secondarydark: var(--secondary-sc09); /* @kind color */
  --main-light-error: var(--error-light); /* @kind color */
  --main-light-primary: var(--primary-light); /* @kind color */
  --miscellaneous-kit-section-fill: rgb(245,245,245); /* @kind color */
  --miscellaneous-kit-section-fill: rgb(245,245,245); /* @kind color */
  --miscellaneous-kit-section-fill: rgb(245,245,245); /* @kind color */
  --miscellaneous-kit-section-fill: rgb(245,245,245); /* @kind color */
  --miscellaneous-tab-unselected: rgb(126,126,126); /* @kind color */
  --miscellaneous-tab-unselected: rgb(126,126,126); /* @kind color */
  --miscellaneous-tab-unselected: rgb(126,126,126); /* @kind color */
  --miscellaneous-tab-unselected: rgb(126,126,126); /* @kind color */
  --miscellaneous-text-field-outline: rgba(235,235,245,0.3); /* @kind color */
  --miscellaneous-text-field-outline: rgba(235,235,245,0.3); /* @kind color */
  --miscellaneous-text-field-outline: rgba(235,235,245,0.3); /* @kind color */
  --miscellaneous-text-field-outline: rgba(235,235,245,0.3); /* @kind color */
  --neutral-100: rgb(255,255,255); /* @kind color */
  --overlays-default: rgba(0,0,0,0.49); /* @kind color */
  --overlays-default: rgba(0,0,0,0.49); /* @kind color */
  --overlays-default: rgba(0,0,0,0.49); /* @kind color */
  --overlays-default: rgba(0,0,0,0.49); /* @kind color */
  --primary-brand: var(--secondary-blue); /* @kind color */
  --primary-brand: var(--secondary-indigo); /* @kind color */
  --secondary-blue: rgb(10,132,255); /* @kind color */
  --secondary-blue: rgb(146,191,255); /* @kind color */
  --secondary-cyan: rgb(100,210,255); /* @kind color */
  --secondary-cyan: rgb(174,199,237); /* @kind color */
  --secondary-green: rgb(148,233,184); /* @kind color */
  --secondary-green: rgb(48,209,88); /* @kind color */
  --secondary-indigo: rgb(159,159,248); /* @kind color */
  --secondary-indigo: rgb(94,92,230); /* @kind color */
  --secondary-mint: rgb(150,226,214); /* @kind color */
  --secondary-mint: rgb(99,230,226); /* @kind color */
  --shadow-op8: var(--transparentdark-op68); /* @kind color */
  --strokecolor-lightgrey-2: var(--neutral-nr09-2); /* @kind color */
  --strokecolor-lightgrey: var(--neutral-nr15); /* @kind color */
  --text-disabled-2: var(--grey-600-2); /* @kind color */
  --text-disabled: var(--grey-600); /* @kind color */
  --text-primary-2: var(--white-main-2); /* @kind color */
  --text-primary-3: rgb(255,255,255); /* @kind color */
  --text-primary: var(--white-main); /* @kind color */
  --text-secondary-2: var(--grey-500-2); /* @kind color */
  --text-secondary: var(--grey-500); /* @kind color */
  --textcolor-default-2: var(--neutral-nr01); /* @kind color */
  --textcolor-default: var(--neutral-nr01-2); /* @kind color */
  --textcolor-disabled: var(--neutral-nr15); /* @kind color */
  --textcolor-primary-2: var(--primary-pr08); /* @kind color */
  --textcolor-primary: var(--primary-pr06); /* @kind color */
  --textcolor-primaryselected: var(--primary-pr09); /* @kind color */
  --textcolor-secdefault-2: var(--neutral-nr09); /* @kind color */
  --textcolor-secdefault: var(--neutral-nr07); /* @kind color */
  --textcolor-secondary: var(--secondary-sc06); /* @kind color */
  --textcolor-secondaryselected: var(--secondary-sc09); /* @kind color */
  --white-100: rgb(0,0,0); /* @kind color */
  --white-100: rgb(0,0,0); /* @kind color */
  --white-10: rgba(0,0,0,0.1); /* @kind color */
  --white-10: rgba(0,0,0,0.1); /* @kind color */
  --white-20: rgba(0,0,0,0.2); /* @kind color */
  --white-20: rgba(0,0,0,0.2); /* @kind color */
  --white-40: rgba(0,0,0,0.4); /* @kind color */
  --white-40: rgba(0,0,0,0.4); /* @kind color */
  --white-80: rgba(0,0,0,0.8); /* @kind color */
  --white-80: rgba(0,0,0,0.8); /* @kind color */
}

:root[data-theme="light"], .light {
  --background-bg5: rgba(0,0,0,0.03); /* @kind color */
  --black-100: rgb(0,0,0); /* @kind color */
  --black-10: rgba(0,0,0,0.1); /* @kind color */
  --black-20: rgba(0,0,0,0.2); /* @kind color */
  --black-40: rgba(0,0,0,0.4); /* @kind color */
  --black-4: rgba(0,0,0,0.04); /* @kind color */
  --black-80: rgba(0,0,0,0.8); /* @kind color */
  --colors-green: rgb(36,138,61); /* @kind color */
  --fills-secondary: rgba(120,120,128,0.24); /* @kind color */
  --miscellaneous-kit-section-fill: rgb(245,245,245); /* @kind color */
  --miscellaneous-tab-unselected: rgb(126,126,126); /* @kind color */
  --miscellaneous-text-field-outline: rgba(60,60,67,0.29); /* @kind color */
  --overlays-default: rgba(0,0,0,0.49); /* @kind color */
  --primary-brand: var(--secondary-blue); /* @kind color */
  --secondary-blue: rgb(0,122,255); /* @kind color */
  --secondary-cyan: rgb(50,173,230); /* @kind color */
  --secondary-green: rgb(52,199,89); /* @kind color */
  --secondary-indigo: rgb(88,86,214); /* @kind color */
  --secondary-mint: rgb(0,199,190); /* @kind color */
  --white-100: rgb(255,255,255); /* @kind color */
  --white-10: rgba(255,255,255,0.1); /* @kind color */
  --white-20: rgba(255,255,255,0.2); /* @kind color */
  --white-40: rgba(255,255,255,0.4); /* @kind color */
  --white-80: rgba(255,255,255,0.8); /* @kind color */
}

:root[data-mode="paragraph"] {
  --10: 10; /* @kind other */
  --12-3: 12; /* @kind other */
  --14: 14; /* @kind other */
  --8-3: 8; /* @kind other */
}

:root[data-mode="sf-pro"] {
  --font-family: "SF Pro"; /* @kind font */
  --letter-spacing: 0; /* @kind font */
}

:root[data-mode="bai-jamjuree"] {
  --font-family: "Bai Jamjuree"; /* @kind font */
  --letter-spacing: 0; /* @kind font */
}

:root[data-mode="space-grotesk"] {
  --font-family: "Space Grotesk"; /* @kind font */
  --letter-spacing: 0; /* @kind font */
}

:root[data-mode="semi-bold-regular"] {
  --regular: 600; /* @kind other */
  --semi-bold: 400; /* @kind other */
}

:root[data-mode="brand-1"] {
  --neutral-nr01-2: rgb(255,255,255); /* @kind color */
  --neutral-nr01: rgb(255,255,255); /* @kind color */
  --neutral-nr02: rgb(251,251,251); /* @kind color */
  --neutral-nr03-2: rgb(231,231,231); /* @kind color */
  --neutral-nr03: rgb(241,241,241); /* @kind color */
  --neutral-nr04: rgb(224,224,224); /* @kind color */
  --neutral-nr05: rgb(204,204,204); /* @kind color */
  --neutral-nr06: rgb(194,194,194); /* @kind color */
  --neutral-nr07-2: rgb(184,184,184); /* @kind color */
  --neutral-nr07: rgb(109,109,109); /* @kind color */
  --neutral-nr08: rgb(173,173,173); /* @kind color */
  --neutral-nr09-2: rgb(48,48,48); /* @kind color */
  --neutral-nr09: rgb(153,153,153); /* @kind color */
  --neutral-nr10-2: rgb(92,92,92); /* @kind color */
  --neutral-nr10: rgb(35,35,35); /* @kind color */
  --neutral-nr11: rgb(11,11,11); /* @kind color */
  --neutral-nr15: rgb(71,71,71); /* @kind color */
  --neutral-nr20: rgb(51,51,51); /* @kind color */
  --primary-pr02: rgb(214,206,249); /* @kind color */
  --primary-pr03: rgb(194,182,247); /* @kind color */
  --primary-pr06: rgb(132,108,239); /* @kind color */
  --primary-pr08: rgb(62,132,237); /* @kind color */
  --primary-pr09: rgb(71,35,230); /* @kind color */
  --primary-pr10-2: rgb(21,104,226); /* @kind color */
  --primary-pr10: rgb(58,24,214); /* @kind color */
  --primary-pr12: rgb(53,22,193); /* @kind color */
  --primary-pr15: rgb(44,18,160); /* @kind color */
  --primary-pr17: rgb(38,16,139); /* @kind color */
  --primary-pr20: rgb(26,11,96); /* @kind color */
  --secondary-sc02: rgb(226,196,251); /* @kind color */
  --secondary-sc03: rgb(212,166,250); /* @kind color */
  --secondary-sc06: rgb(169,78,244); /* @kind color */
  --secondary-sc09: rgb(124,13,216); /* @kind color */
  --secondary-sc10: rgb(107,11,186); /* @kind color */
  --secondary-sc12: rgb(97,10,168); /* @kind color */
  --secondary-sc15: rgb(81,8,140); /* @kind color */
  --secondary-sc17: rgb(70,7,121); /* @kind color */
  --secondary-sc20: rgb(48,5,84); /* @kind color */
  --sem-rd10: rgb(255,54,54); /* @kind color */
  --transparentdark-op20: rgba(55,55,55,0.2); /* @kind color */
  --transparentdark-op68: rgba(55,55,55,0.68); /* @kind color */
}

:root[data-mode="brand-2"] {
  --neutral-nr01-2: rgb(255,255,255); /* @kind color */
  --neutral-nr01: rgb(255,255,255); /* @kind color */
  --neutral-nr02: rgb(251,251,251); /* @kind color */
  --neutral-nr03-2: rgb(231,231,231); /* @kind color */
  --neutral-nr03: rgb(240,240,240); /* @kind color */
  --neutral-nr04: rgb(223,223,223); /* @kind color */
  --neutral-nr05: rgb(201,201,201); /* @kind color */
  --neutral-nr06: rgb(190,190,190); /* @kind color */
  --neutral-nr07-2: rgb(180,180,180); /* @kind color */
  --neutral-nr07: rgb(109,109,109); /* @kind color */
  --neutral-nr08: rgb(169,169,169); /* @kind color */
  --neutral-nr09-2: rgb(48,48,48); /* @kind color */
  --neutral-nr09: rgb(147,147,147); /* @kind color */
  --neutral-nr10-2: rgb(83,83,83); /* @kind color */
  --neutral-nr10: rgb(35,35,35); /* @kind color */
  --neutral-nr11: rgb(11,11,11); /* @kind color */
  --neutral-nr15: rgb(61,61,61); /* @kind color */
  --neutral-nr20: rgb(40,40,40); /* @kind color */
  --primary-pr02: rgb(224,222,255); /* @kind color */
  --primary-pr03: rgb(208,206,255); /* @kind color */
  --primary-pr06: rgb(161,157,255); /* @kind color */
  --primary-pr08: rgb(130,124,255); /* @kind color */
  --primary-pr09: rgb(115,108,255); /* @kind color */
  --primary-pr10-2: rgb(99,91,255); /* @kind color */
  --primary-pr10: rgb(99,91,255); /* @kind color */
  --primary-pr12: rgb(67,57,255); /* @kind color */
  --primary-pr15: rgb(17,5,255); /* @kind color */
  --primary-pr17: rgb(11,0,225); /* @kind color */
  --primary-pr20: rgb(8,0,156); /* @kind color */
  --secondary-sc02: rgb(204,247,255); /* @kind color */
  --secondary-sc03: rgb(179,242,255); /* @kind color */
  --secondary-sc06: rgb(102,230,255); /* @kind color */
  --secondary-sc09: rgb(26,217,255); /* @kind color */
  --secondary-sc10: rgb(0,212,255); /* @kind color */
  --secondary-sc12: rgb(0,191,230); /* @kind color */
  --secondary-sc15: rgb(0,159,191); /* @kind color */
  --secondary-sc17: rgb(0,138,166); /* @kind color */
  --secondary-sc20: rgb(0,96,115); /* @kind color */
  --sem-rd10: rgb(255,54,54); /* @kind color */
  --transparentdark-op20: rgba(44,44,44,0.2); /* @kind color */
  --transparentdark-op68: rgba(44,44,44,0.68); /* @kind color */
}

:root[data-mode="brand-3"] {
  --neutral-nr01-2: rgb(255,255,255); /* @kind color */
  --neutral-nr01: rgb(255,255,255); /* @kind color */
  --neutral-nr02: rgb(250,250,250); /* @kind color */
  --neutral-nr03-2: rgb(231,231,231); /* @kind color */
  --neutral-nr03: rgb(239,238,238); /* @kind color */
  --neutral-nr04: rgb(220,218,218); /* @kind color */
  --neutral-nr05: rgb(197,194,194); /* @kind color */
  --neutral-nr06: rgb(186,182,182); /* @kind color */
  --neutral-nr07-2: rgb(174,169,169); /* @kind color */
  --neutral-nr07: rgb(109,109,109); /* @kind color */
  --neutral-nr08: rgb(163,157,157); /* @kind color */
  --neutral-nr09-2: rgb(48,48,48); /* @kind color */
  --neutral-nr09: rgb(140,133,133); /* @kind color */
  --neutral-nr10-2: rgb(67,63,63); /* @kind color */
  --neutral-nr10: rgb(35,35,35); /* @kind color */
  --neutral-nr11: rgb(11,11,11); /* @kind color */
  --neutral-nr15: rgb(42,40,40); /* @kind color */
  --neutral-nr20: rgb(18,17,17); /* @kind color */
  --primary-pr02: rgb(250,210,224); /* @kind color */
  --primary-pr03: rgb(248,187,208); /* @kind color */
  --primary-pr06: rgb(241,120,160); /* @kind color */
  --primary-pr08: rgb(89,209,249); /* @kind color */
  --primary-pr09: rgb(234,52,113); /* @kind color */
  --primary-pr10-2: rgb(48,197,247); /* @kind color */
  --primary-pr10: rgb(232,30,97); /* @kind color */
  --primary-pr12: rgb(214,22,86); /* @kind color */
  --primary-pr15: rgb(178,18,72); /* @kind color */
  --primary-pr17: rgb(155,16,62); /* @kind color */
  --primary-pr20: rgb(107,11,43); /* @kind color */
  --secondary-sc02: rgb(194,215,255); /* @kind color */
  --secondary-sc03: rgb(164,194,255); /* @kind color */
  --secondary-sc06: rgb(72,133,255); /* @kind color */
  --secondary-sc09: rgb(0,79,237); /* @kind color */
  --secondary-sc10: rgb(0,70,206); /* @kind color */
  --secondary-sc12: rgb(0,62,186); /* @kind color */
  --secondary-sc15: rgb(0,52,155); /* @kind color */
  --secondary-sc17: rgb(0,45,134); /* @kind color */
  --secondary-sc20: rgb(0,31,93); /* @kind color */
  --sem-rd10: rgb(255,54,54); /* @kind color */
  --transparentdark-op20: rgba(23,22,22,0.2); /* @kind color */
  --transparentdark-op68: rgba(23,22,22,0.68); /* @kind color */
}

:root[data-mode="medium"] {
  --fontsize-md: 18; /* @kind font */
  --fontsize-sm: 16; /* @kind font */
  --fontsize-xsm: 14; /* @kind font */
  --lineheights-md: 24; /* @kind font */
  --lineheights-sm: 22; /* @kind font */
  --radi-lg: 24; /* @kind other */
  --radi-md: 8; /* @kind other */
  --radi-mlg: 16; /* @kind other */
  --spacing-lg: 28; /* @kind spacing */
  --spacing-md: 20; /* @kind spacing */
  --spacing-sm: 12; /* @kind spacing */
  --spacing-smd: 16; /* @kind spacing */
  --spacing-xs: 10; /* @kind spacing */
  --spacing-xxs: 8; /* @kind spacing */
}

:root[data-mode="large"] {
  --fontsize-md: 20; /* @kind font */
  --fontsize-sm: 18; /* @kind font */
  --fontsize-xsm: 16; /* @kind font */
  --lineheights-md: 26; /* @kind font */
  --lineheights-sm: 24; /* @kind font */
  --radi-lg: 36; /* @kind other */
  --radi-md: 12; /* @kind other */
  --radi-mlg: 24; /* @kind other */
  --spacing-lg: 34; /* @kind spacing */
  --spacing-md: 26; /* @kind spacing */
  --spacing-sm: 18; /* @kind spacing */
  --spacing-smd: 22; /* @kind spacing */
  --spacing-xs: 16; /* @kind spacing */
  --spacing-xxs: 14; /* @kind spacing */
}

:root[data-mode="big"] {
  --fontsize-md: 22; /* @kind font */
  --fontsize-sm: 20; /* @kind font */
  --fontsize-xsm: 18; /* @kind font */
  --lineheights-md: 28; /* @kind font */
  --lineheights-sm: 26; /* @kind font */
  --radi-lg: 48; /* @kind other */
  --radi-md: 16; /* @kind other */
  --radi-mlg: 32; /* @kind other */
  --spacing-lg: 36; /* @kind spacing */
  --spacing-md: 28; /* @kind spacing */
  --spacing-sm: 20; /* @kind spacing */
  --spacing-smd: 24; /* @kind spacing */
  --spacing-xs: 18; /* @kind spacing */
  --spacing-xxs: 16; /* @kind spacing */
}

:root[data-mode="option-1"] {
  --fontfamilies-secondary: "Source Sans Pro"; /* @kind font */
  --fontweights-regular: "Regular"; /* @kind other */
  --fontweights-semibold: "SemiBold"; /* @kind other */
  --letterspacing-md: 0; /* @kind font */
}

:root[data-mode="option-2"] {
  --fontfamilies-secondary: "Lato"; /* @kind font */
  --fontweights-regular: "Regular"; /* @kind other */
  --fontweights-semibold: "SemiBold"; /* @kind other */
  --letterspacing-md: 0; /* @kind font */
}

:root[data-mode="option-3"] {
  --fontfamilies-secondary: "Lato"; /* @kind font */
  --fontweights-regular: "Regular"; /* @kind other */
  --fontweights-semibold: "SemiBold"; /* @kind other */
  --letterspacing-md: 0; /* @kind font */
}