/* global.json */
:root {
  /* desktop */
  /* color */
  --a-accent: var(--global-a400);
  --a-accent-dark: var(--global-a800);
  --a-accent-darker: var(--global-a900);
  --a-accent-darkest: var(--global-a950);
  --a-accent-light: var(--global-a200);
  --a-accent-lighter: var(--global-a100);
  --a-accent-lightest: var(--global-a50);
  --a-state-color-active: var(--a-accent);
  --a-state-color-default: var(--deco-green);
  --a-state-color-disabled: var(--a-accent-lightest);
  --a-state-color-hover: var(--a-accent-darker);
  --a-state-color-selected: var(--a-accent-darker);
  --a-state-inputctrl-bg: var(--white);
  --a-state-inputctrl-bg-disabled: var(--neutral-lightest);
  --a-state-inputctrl-bg-hover: var(--white);
  --b-accent: var(--global-b500);
  --b-accent-dark: var(--global-b800);
  --b-accent-darker: var(--global-b900);
  --b-accent-darkest: var(--global-b950);
  --b-accent-light: var(--global-b200);
  --b-accent-lighter: var(--global-b100);
  --b-accent-lightest: var(--global-b50);
  --b-state-color-active: var(--b-accent);
  --b-state-color-default: var(--b-accent-light);
  --b-state-color-disabled: var(--b-accent-lightest);
  --b-state-color-hover: var(--b-accent-dark);
  --b-state-color-selected: var(--b-accent-darker);
  --b-state-inputctrl-bg: var(--b-accent-light);
  --b-state-inputctrl-bg-disabled: var(--b-accent-light);
  --b-state-inputctrl-bg-hover: var(--b-accent-light);
  --brand-primary: #324036;
  --brand-secondary: #004734;
  --bg-color-footer: var(--b-accent-darkest);
  --bg-color-header: var(--white);
  --bg-color-nav: var(--surface-color-subtle-b);
  --bg-color-page: var(--white);
  --bg-color-side-pannel: var(--b-accent-lightest);
  --black: #000000;
  --deco-green: #468124;
  --deco-orange-choca: #e17e3c;
  --global-a100: #eaf4e4;
  --global-a200: #d6e7cb;
  --global-a300: #b5d4a1;
  --global-a400: #8db871;
  --global-a50: #f6faf3;
  --global-a500: #6b9b4c;
  --global-a600: #557e3b;
  --global-a700: #456431;
  --global-a800: #39512a;
  --global-a900: #304324;
  --global-a950: #162310;
  --global-b100: #f0ece4;
  --global-b200: #e0d7c8;
  --global-b300: #cabaa3;
  --global-b400: #b69d81;
  --global-b50: #f8f6f4;
  --global-b500: #a78768;
  --global-b600: #9a765c;
  --global-b700: #80604e;
  --global-b800: #695043;
  --global-b900: #564238;
  --global-b950: #2d211d;
  --gray100: #e7e7e7;
  --gray200: #d1d1d1;
  --gray300: #b0b0b0;
  --gray400: #888888;
  --gray50: #f6f6f6;
  --gray500: #787878;
  --gray600: #5d5d5d;
  --gray700: #4f4f4f;
  --gray800: #454545;
  --gray900: #3d3d3d;
  --gray950: #262626;
  --neutral: var(--gray400);
  --neutral-dark: var(--gray500);
  --neutral-darker: var(--gray700);
  --neutral-darkest: var(--gray800);
  --neutral-light: var(--gray200);
  --neutral-lighter: var(--gray100);
  --neutral-lightest: var(--gray50);
  --path-color-accent-a: var(--deco-green);
  --path-color-accent-b: var(--b-accent-darker);
  --path-color-brand-primary: var(--brand-primary);
  --path-color-brand-secondary: var(--brand-secondary);
  --path-color-disabled: var(--neutral);
  --path-color-error: var(--system-error-dark);
  --path-color-info: var(--system-info-dark);
  --path-color-inverse: var(--white);
  --path-color-link: var(--system-info);
  --path-color-link-hover: var(--system-info-dark);
  --path-color-middle: var(--neutral);
  --path-color-orange-cho: var(--deco-orange-choca);
  --path-color-strong: var(--brand-primary);
  --path-color-subtle: var(--neutral-light);
  --path-color-success: var(--system-success-dark);
  --path-color-warning: var(--system-warning-dark);
  --surface-color-bold-a: var(--a-accent-dark);
  --surface-color-bold-b: var(--b-accent-dark);
  --surface-color-disabled: var(--a-accent-lightest);
  --surface-color-subtle-a: var(--a-accent-light);
  --surface-color-subtle-b: var(--b-accent-lightest);
  --surface-color-subtle-neutral: var(--neutral-lightest);
  --system-error: #ff0000;
  --system-error-dark: #cb0808;
  --system-error-darker: #8a0606;
  --system-error-darkest: #670d0d;
  --system-error-light: #fb6363;
  --system-error-lighter: #faa5a5;
  --system-error-lightest: #ffd1d1;
  --system-info: #4285f4;
  --system-info-dark: #2358c2;
  --system-info-darker: #1111b1;
  --system-info-darkest: #00008b;
  --system-info-light: #48a5ff;
  --system-info-lighter: #89c5ff;
  --system-info-lightest: #baddff;
  --system-success: #2ecc71;
  --system-success-dark: #37bb6f;
  --system-success-darker: #2d8d56;
  --system-success-darkest: #006400;
  --system-success-light: #57e192;
  --system-success-lighter: #ccffcc;
  --system-success-lightest: #e2ffe2;
  --system-warning: #ffa500;
  --system-warning-dark: #ff8c00;
  --system-warning-darker: #d47809;
  --system-warning-darkest: #713f01;
  --system-warning-light: #ffb52e;
  --system-warning-lighter: #ffcc6e;
  --system-warning-lightest: #ffe1ab;
  --white: #ffffff;
  /* number */
  --scale-l-0: 0px;
  --opacity-strong: 0.30000001192092896px;
  --opacity-medium: 0.5px;
  --opacity-subtle: 0.800000011920929px;
  --z-index-base: 1px;
  --scale-l-2: 2px;
  --scale-l-4: 4px;
  --scale-l-6: 6px;
  --corner-box-sm: var(--scale-l-8);
  --scale-l-8: 8px;
  --scale-l-10: 10px;
  --layout-colums-grid: var(--scale-l-12);
  --scale-l-12: 12px;
  --body-xs: var(--scale-l-13);
  --scale-l-13: 13px;
  --body-sm: var(--scale-l-14);
  --scale-l-14: 14px;
  --corner-box-md: var(--scale-l-16);
  --scale-l-16: 16px;
  --space-xs: var(--scale-l-16);
  --body-md: var(--scale-l-18);
  --lh-body-xs: var(--scale-l-18);
  --scale-l-18: 18px;
  --lh-body-sm: var(--scale-l-20);
  --scale-l-20: 20px;
  --scale-l-22: 22px;
  --body-lg: var(--scale-l-24);
  --corner-box-lg: var(--scale-l-24);
  --scale-l-24: 24px;
  --scale-l-26: 26px;
  --lh-body-md: var(--scale-l-28);
  --scale-l-28: 28px;
  --button-text: var(--scale-l-30);
  --scale-l-30: 30px;
  --gutter-layout: var(--scale-l-32);
  --scale-l-32: 32px;
  --scale-l-34: 34px;
  --heading-md: var(--scale-l-36);
  --lh-body-lg: var(--scale-l-36);
  --scale-l-36: 36px;
  --space-sm: var(--scale-l-36);
  --scale-l-37: 37px;
  --scale-l-38: 38px;
  --scale-l-40: 40px;
  --scale-l-42: 42px;
  --scale-l-43: 43px;
  --scale-l-44: 44px;
  --lh-heading-md: var(--scale-l-46);
  --scale-l-46: 46px;
  --space-md: var(--scale-l-46);
  --scale-l-48: 48px;
  --scale-l-50: 50px;
  --scale-l-54: 54px;
  --heading-lg: var(--scale-l-56);
  --scale-l-56: 56px;
  --scale-l-62: 62px;
  --lh-heading-lg: var(--scale-l-64);
  --scale-l-64: 64px;
  --scale-l-67: 67px;
  --scale-l-72: 72px;
  --scale-l-78: 78px;
  --heading-xl: var(--scale-l-80);
  --scale-l-80: 80px;
  --space-lg: var(--scale-l-80);
  --lh-heading-xl: var(---scale-l-80);
  --scale-l-88: 88px;
  --scale-l-96: 96px;
  --z-index-dropdown: 100px;
  --scale-l-104: 104px;
  --scale-l-112: 112px;
  --heading-xxl: var(--scale-l-120);
  --lh-heading-xxl: var(--scale-l-120);
  --margin-section: var(--scale-l-120);
  --scale-l-120: 120px;
  --scale-l-128: 120px;
  --space-xl: var(--scale-l-120);
  --scale-l-144: 144px;
  --scale-l-168: 168px;
  --padding-site: var(--scale-l-192);
  --scale-l-192: 192px;
  --z-index-modal: 1000px;
  --viewport-size: 1920px;
  --z-index-tooltip: 2000px;
  /* string */
  --global-a: 24A4B6;
  --global-b: E64FCF;
  --ui-colors: https://uicolors.app/generate/;
  --breakpoint-xs: 428px;
  --breakpoint-sm: 481px;
  --breakpoint-md: 769px;
  --breakpoint-lg: 1025px;
  --breakpoint-xl: 1440px;
  --font-family-number: Roboto Mono;
  --font-family-primary: Roboto;
  /* laptop */
  /* color */
  --a-accent: var(--global-a400);
  --a-accent-dark: var(--global-a800);
  --a-accent-darker: var(--global-a900);
  --a-accent-darkest: var(--global-a950);
  --a-accent-light: var(--global-a200);
  --a-accent-lighter: var(--global-a100);
  --a-accent-lightest: var(--global-a50);
  --a-state-color-active: var(--a-accent);
  --a-state-color-disabled: var(--a-accent-lightest);
  --a-state-color-hover: var(--a-accent-dark);
  --a-state-color-selected: var(--a-accent-darker);
  --a-state-inputctrl-bg: var(--white);
  --a-state-inputctrl-bg-disabled: var(--neutral-lightest);
  --a-state-inputctrl-bg-hover: var(--white);
  --b-accent: var(--global-b500);
  --b-accent-dark: var(--global-b800);
  --b-accent-darker: var(--global-b900);
  --b-accent-darkest: var(--global-b950);
  --b-accent-light: var(--global-b200);
  --b-accent-lighter: var(--global-b100);
  --b-accent-lightest: var(--global-b50);
  --b-state-color-active: var(--b-accent);
  --b-state-color-default: var(--b-accent-light);
  --b-state-color-disabled: var(--b-accent-lightest);
  --b-state-color-hover: var(--b-accent-dark);
  --b-state-color-selected: var(--b-accent-darker);
  --b-state-inputctrl-bg: var(--b-accent-light);
  --b-state-inputctrl-bg-disabled: var(--b-accent-light);
  --b-state-inputctrl-bg-hover: var(--b-accent-light);
  --brand-primary: #324036;
  --brand-secondary: #f8550f;
  --bg-color-footer: var(--b-accent-darkest);
  --bg-color-header: var(--white);
  --bg-color-nav: var(--surface-color-subtle-b);
  --bg-color-page: var(--white);
  --bg-color-side-pannel: var(--b-accent-lightest);
  --black: #000000;
  --deco-green: #c7f84b;
  --deco-orange-choca: #ffffff;
  --global-a100: #eaf4e4;
  --global-a200: #d6e7cb;
  --global-a300: #b5d4a1;
  --global-a400: #8db871;
  --global-a50: #f6faf3;
  --global-a500: #6b9b4c;
  --global-a600: #557e3b;
  --global-a700: #456431;
  --global-a800: #39512a;
  --global-a900: #304324;
  --global-a950: #162310;
  --global-b100: #f0ece4;
  --global-b200: #e0d7c8;
  --global-b300: #cabaa3;
  --global-b400: #b69d81;
  --global-b50: #f8f6f4;
  --global-b500: #a78768;
  --global-b600: #9a765c;
  --global-b700: #80604e;
  --global-b800: #695043;
  --global-b900: #564238;
  --global-b950: #2d211d;
  --gray100: #e7e7e7;
  --gray200: #d1d1d1;
  --gray300: #b0b0b0;
  --gray400: #888888;
  --gray50: #f6f6f6;
  --gray500: #787878;
  --gray600: #5d5d5d;
  --gray700: #4f4f4f;
  --gray800: #454545;
  --gray900: #3d3d3d;
  --gray950: #262626;
  --neutral: var(--gray400);
  --neutral-dark: var(--gray500);
  --neutral-darker: var(--gray600);
  --neutral-darkest: var(--gray700);
  --neutral-light: var(--gray200);
  --neutral-lighter: var(--gray100);
  --neutral-lightest: var(--gray50);
  --path-color-accent-a: var(--a-accent-dark);
  --path-color-accent-b: var(--b-accent-darker);
  --path-color-brand-primary: var(--brand-primary);
  --path-color-brand-secondary: var(--brand-secondary);
  --path-color-disabled: var(--neutral);
  --path-color-error: var(--system-error-dark);
  --path-color-info: var(--system-info-dark);
  --path-color-inverse: var(--white);
  --path-color-link: var(--system-info);
  --path-color-link-hover: var(--system-info-dark);
  --path-color-middle: var(--neutral);
  --path-color-orange-cho: var(--system-success-dark);
  --path-color-strong: var(--neutral-darkest);
  --path-color-subtle: var(--neutral-light);
  --path-color-success: var(--system-success-dark);
  --path-color-warning: var(--system-warning-dark);
  --surface-color-bold-a: var(--a-accent-dark);
  --surface-color-bold-b: var(--b-accent-dark);
  --surface-color-disabled: var(--a-accent-lightest);
  --surface-color-subtle-a: var(--a-accent-lightest);
  --surface-color-subtle-b: var(--b-accent-lightest);
  --surface-color-subtle-neutral: var(--neutral-lightest);
  --system-error: #ff0000;
  --system-error-dark: #cb0808;
  --system-error-darker: #8a0606;
  --system-error-darkest: #670d0d;
  --system-error-light: #fb6363;
  --system-error-lighter: #faa5a5;
  --system-error-lightest: #ffd1d1;
  --system-info: #4285f4;
  --system-info-dark: #2358c2;
  --system-info-darker: #1111b1;
  --system-info-darkest: #00008b;
  --system-info-light: #48a5ff;
  --system-info-lighter: #89c5ff;
  --system-info-lightest: #baddff;
  --system-success: #2ecc71;
  --system-success-dark: #37bb6f;
  --system-success-darker: #2d8d56;
  --system-success-darkest: #006400;
  --system-success-light: #57e192;
  --system-success-lighter: #ccffcc;
  --system-success-lightest: #e2ffe2;
  --system-warning: #ffa500;
  --system-warning-dark: #ff8c00;
  --system-warning-darker: #d47809;
  --system-warning-darkest: #713f01;
  --system-warning-light: #ffb52e;
  --system-warning-lighter: #ffcc6e;
  --system-warning-lightest: #ffe1ab;
  --white: #ffffff;
  /* number */
  --scale-l-0: 0px;
  --opacity-strong: 0.30000001192092896px;
  --opacity-medium: 0.5px;
  --opacity-subtle: 0.800000011920929px;
  --z-index-base: 1px;
  --scale-l-2: 2px;
  --scale-l-4: 4px;
  --scale-l-6: 6px;
  --corner-box-lg: var(--scale-l-8);
  --corner-box-md: var(--scale-l-8);
  --corner-box-sm: var(--scale-l-8);
  --scale-l-8: 8px;
  --scale-l-10: 10px;
  --layout-colums-grid: var(--scale-l-12);
  --scale-l-12: 12px;
  --body-xs: var(--scale-l-13);
  --scale-l-13: 13px;
  --body-sm: var(--scale-l-14);
  --scale-l-14: 14px;
  --body-md: var(--scale-l-16);
  --scale-l-16: 16px;
  --space-sm: var(--scale-l-16);
  --space-xs: var(--scale-l-16);
  --lh-body-xs: var(--scale-l-18);
  --scale-l-18: 18px;
  --button-text: var(--scale-l-20);
  --lh-body-sm: var(--scale-l-20);
  --scale-l-20: 20px;
  --scale-l-22: 22px;
  --body-lg: var(--scale-l-24);
  --gutter-layout: var(--scale-l-24);
  --lh-body-md: var(--scale-l-24);
  --scale-l-24: 24px;
  --space-md: var(--scale-l-24);
  --scale-l-26: 26px;
  --scale-l-28: 28px;
  --scale-l-30: 30px;
  --scale-l-32: 32px;
  --lh-body-lg: var(--scale-l-34);
  --scale-l-34: 34px;
  --heading-md: var(--scale-l-36);
  --scale-l-36: 36px;
  --padding-site: var(--scale-l-37);
  --scale-l-37: 37px;
  --scale-l-38: 38px;
  --scale-l-40: 40px;
  --scale-l-42: 42px;
  --scale-l-43: 43px;
  --heading-lg: var(--scale-l-44);
  --scale-l-44: 44px;
  --lh-heading-md: var(--scale-l-46);
  --scale-l-46: 46px;
  --scale-l-48: 48px;
  --space-lg: var(--scale-l-48);
  --space-xl: var(--scale-l-48);
  --scale-l-50: 50px;
  --lh-heading-lg: var(--scale-l-54);
  --scale-l-54: 54px;
  --scale-l-56: 56px;
  --scale-l-62: 62px;
  --scale-l-64: 64px;
  --scale-l-67: 67px;
  --margin-section: var(--scale-l-72);
  --scale-l-72: 72px;
  --scale-l-78: 78px;
  --heading-xl: var(--scale-l-80);
  --scale-l-80: 80px;
  --scale-l-88: 88px;
  --lh-heading-xl: var(---scale-l-80);
  --scale-l-96: 96px;
  --z-index-dropdown: 100px;
  --scale-l-104: 104px;
  --scale-l-112: 112px;
  --heading-xxl: var(--scale-l-120);
  --lh-heading-xxl: var(--scale-l-120);
  --scale-l-120: 120px;
  --scale-l-128: 128px;
  --scale-l-144: 144px;
  --scale-l-168: 168px;
  --scale-l-192: 192px;
  --z-index-modal: 1000px;
  --viewport-size: 1440px;
  --z-index-tooltip: 2000px;
  /* string */
  --global-a: 24A4B6;
  --global-b: E64FCF;
  --ui-colors: https://uicolors.app/generate/;
  --breakpoint-xs: 428px;
  --breakpoint-sm: 481px;
  --breakpoint-md: 769px;
  --breakpoint-lg: 1025px;
  --breakpoint-xl: 1441px;
  --font-family-number: Roboto Mono;
  --font-family-primary: Roboto;
  /* tablet */
  /* color */
  --a-accent: var(--global-a400);
  --a-accent-dark: var(--global-a800);
  --a-accent-darker: var(--global-a900);
  --a-accent-darkest: var(--global-a950);
  --a-accent-light: var(--global-a200);
  --a-accent-lighter: var(--global-a100);
  --a-accent-lightest: var(--global-a50);
  --a-state-color-active: var(--a-accent);
  --a-state-color-disabled: var(--a-accent-lightest);
  --a-state-color-hover: var(--a-accent-dark);
  --a-state-color-selected: var(--a-accent-darker);
  --a-state-inputctrl-bg: var(--white);
  --a-state-inputctrl-bg-disabled: var(--neutral-lightest);
  --a-state-inputctrl-bg-hover: var(--white);
  --b-accent: var(--global-b500);
  --b-accent-dark: var(--global-b800);
  --b-accent-darker: var(--global-b900);
  --b-accent-darkest: var(--global-b950);
  --b-accent-light: var(--global-b200);
  --b-accent-lighter: var(--global-b100);
  --b-accent-lightest: var(--global-b50);
  --b-state-color-active: var(--b-accent);
  --b-state-color-default: var(--b-accent-light);
  --b-state-color-disabled: var(--b-accent-lightest);
  --b-state-color-hover: var(--b-accent-dark);
  --b-state-color-selected: var(--b-accent-darker);
  --b-state-inputctrl-bg: var(--b-accent-light);
  --b-state-inputctrl-bg-disabled: var(--b-accent-light);
  --b-state-inputctrl-bg-hover: var(--b-accent-light);
  --brand-primary: #324036;
  --brand-secondary: #f8550f;
  --bg-color-footer: var(--b-accent-darkest);
  --bg-color-header: var(--white);
  --bg-color-nav: var(--surface-color-subtle-b);
  --bg-color-page: var(--white);
  --bg-color-side-pannel: var(--b-accent-lightest);
  --black: #000000;
  --deco-green: #c7f84b;
  --deco-orange-choca: #ffffff;
  --global-a100: #eaf4e4;
  --global-a200: #d6e7cb;
  --global-a300: #b5d4a1;
  --global-a400: #8db871;
  --global-a50: #f6faf3;
  --global-a500: #6b9b4c;
  --global-a600: #557e3b;
  --global-a700: #456431;
  --global-a800: #39512a;
  --global-a900: #304324;
  --global-a950: #162310;
  --global-b100: #f0ece4;
  --global-b200: #e0d7c8;
  --global-b300: #cabaa3;
  --global-b400: #b69d81;
  --global-b50: #f8f6f4;
  --global-b500: #a78768;
  --global-b600: #9a765c;
  --global-b700: #80604e;
  --global-b800: #695043;
  --global-b900: #564238;
  --global-b950: #2d211d;
  --gray100: #e7e7e7;
  --gray200: #d1d1d1;
  --gray300: #b0b0b0;
  --gray400: #888888;
  --gray50: #f6f6f6;
  --gray500: #787878;
  --gray600: #5d5d5d;
  --gray700: #4f4f4f;
  --gray800: #454545;
  --gray900: #3d3d3d;
  --gray950: #262626;
  --neutral: var(--gray400);
  --neutral-dark: var(--gray500);
  --neutral-darker: var(--gray600);
  --neutral-darkest: var(--gray700);
  --neutral-light: var(--gray200);
  --neutral-lighter: var(--gray100);
  --neutral-lightest: var(--gray50);
  --path-color-accent-a: var(--a-accent-dark);
  --path-color-accent-b: var(--b-accent-darker);
  --path-color-brand-primary: var(--brand-primary);
  --path-color-brand-secondary: var(--brand-secondary);
  --path-color-disabled: var(--neutral);
  --path-color-error: var(--system-error-dark);
  --path-color-info: var(--system-info-dark);
  --path-color-inverse: var(--white);
  --path-color-link: var(--system-info);
  --path-color-link-hover: var(--system-info-dark);
  --path-color-middle: var(--neutral);
  --path-color-orange-cho: var(--system-success-dark);
  --path-color-strong: var(--neutral-darkest);
  --path-color-subtle: var(--neutral-light);
  --path-color-success: var(--system-success-dark);
  --path-color-warning: var(--system-warning-dark);
  --surface-color-bold-a: var(--a-accent-dark);
  --surface-color-bold-b: var(--b-accent-dark);
  --surface-color-disabled: var(--a-accent-lightest);
  --surface-color-subtle-a: var(--a-accent-lightest);
  --surface-color-subtle-b: var(--b-accent-lightest);
  --surface-color-subtle-neutral: var(--neutral-lightest);
  --system-error: #ff0000;
  --system-error-dark: #cb0808;
  --system-error-darker: #8a0606;
  --system-error-darkest: #670d0d;
  --system-error-light: #fb6363;
  --system-error-lighter: #faa5a5;
  --system-error-lightest: #ffd1d1;
  --system-info: #4285f4;
  --system-info-dark: #2358c2;
  --system-info-darker: #1111b1;
  --system-info-darkest: #00008b;
  --system-info-light: #48a5ff;
  --system-info-lighter: #89c5ff;
  --system-info-lightest: #baddff;
  --system-success: #2ecc71;
  --system-success-dark: #37bb6f;
  --system-success-darker: #2d8d56;
  --system-success-darkest: #006400;
  --system-success-light: #57e192;
  --system-success-lighter: #ccffcc;
  --system-success-lightest: #e2ffe2;
  --system-warning: #ffa500;
  --system-warning-dark: #ff8c00;
  --system-warning-darker: #d47809;
  --system-warning-darkest: #713f01;
  --system-warning-light: #ffb52e;
  --system-warning-lighter: #ffcc6e;
  --system-warning-lightest: #ffe1ab;
  --white: #ffffff;
  /* number */
  --scale-l-0: 0px;
  --opacity-strong: 0.30000001192092896px;
  --opacity-medium: 0.5px;
  --opacity-subtle: 0.800000011920929px;
  --z-index-base: 1px;
  --scale-l-2: 2px;
  --scale-l-4: 4px;
  --scale-l-6: 6px;
  --corner-box-lg: var(--scale-l-8);
  --corner-box-md: var(--scale-l-8);
  --corner-box-sm: var(--scale-l-8);
  --layout-colums-grid: var(--scale-l-8);
  --scale-l-8: 8px;
  --scale-l-10: 10px;
  --scale-l-12: 12px;
  --body-xs: var(--scale-l-13);
  --scale-l-13: 13px;
  --body-sm: var(--scale-l-14);
  --scale-l-14: 14px;
  --body-md: var(--scale-l-16);
  --scale-l-16: 16px;
  --space-sm: var(--scale-l-16);
  --space-xs: var(--scale-l-16);
  --lh-body-sm: var(--scale-l-18);
  --lh-body-xs: var(--scale-l-18);
  --scale-l-18: 18px;
  --button-text: var(--scale-l-20);
  --gutter-layout: var(--scale-l-20);
  --scale-l-20: 20px;
  --body-lg: var(--scale-l-22);
  --scale-l-22: 22px;
  --lh-body-md: var(--scale-l-24);
  --scale-l-24: 24px;
  --space-md: var(--scale-l-24);
  --scale-l-26: 26px;
  --scale-l-28: 28px;
  --lh-body-lg: var(--scale-l-30);
  --scale-l-30: 30px;
  --heading-md: var(--scale-l-32);
  --scale-l-32: 32px;
  --scale-l-34: 34px;
  --heading-lg: var(--scale-l-36);
  --scale-l-36: 36px;
  --scale-l-37: 37px;
  --scale-l-38: 38px;
  --scale-l-40: 40px;
  --lh-heading-md: var(--scale-l-42);
  --scale-l-42: 42px;
  --scale-l-43: 43px;
  --lh-heading-lg: var(--scale-l-44);
  --scale-l-44: 44px;
  --scale-l-46: 46px;
  --margin-section: var(--scale-l-48);
  --padding-site: var(--scale-l-48);
  --scale-l-48: 48px;
  --space-lg: var(--scale-l-48);
  --space-xl: var(--scale-l-48);
  --scale-l-50: 50px;
  --scale-l-54: 54px;
  --scale-l-56: 56px;
  --scale-l-62: 62px;
  --scale-l-64: 64px;
  --lh-heading-xl: var(---scale-l-80);
  --scale-l-67: 67px;
  --scale-l-72: 72px;
  --scale-l-78: 78px;
  --heading-xxl: var(--scale-l-80);
  --scale-l-80: 80px;
  --lh-heading-xxl: var(--scale-l-88);
  --scale-l-88: 88px;
  --scale-l-96: 96px;
  --z-index-dropdown: 100px;
  --scale-l-104: 104px;
  --scale-l-112: 112px;
  --scale-l-120: 120px;
  --scale-l-128: 128px;
  --scale-l-144: 144px;
  --scale-l-168: 168px;
  --scale-l-192: 192px;
  --z-index-modal: 1000px;
  --viewport-size: 1024px;
  --z-index-tooltip: 2000px;
  /* string */
  --global-a: 24A4B6;
  --global-b: E64FCF;
  --ui-colors: https://uicolors.app/generate/;
  --breakpoint-xs: 428px;
  --breakpoint-sm: 481px;
  --breakpoint-md: 769px;
  --breakpoint-lg: 1025px;
  --breakpoint-xl: 1441px;
  --font-family-number: Roboto Mono;
  --font-family-primary: Roboto;
  /* mobile */
  /* color */
  --a-accent: var(--global-a400);
  --a-accent-dark: var(--global-a800);
  --a-accent-darker: var(--global-a900);
  --a-accent-darkest: var(--global-a950);
  --a-accent-light: var(--global-a200);
  --a-accent-lighter: var(--global-a100);
  --a-accent-lightest: var(--global-a50);
  --a-state-color-active: var(--a-accent);
  --a-state-color-disabled: var(--a-accent-lightest);
  --a-state-color-hover: var(--a-accent-dark);
  --a-state-color-selected: var(--a-accent-darker);
  --a-state-inputctrl-bg: var(--white);
  --a-state-inputctrl-bg-disabled: var(--neutral-lightest);
  --a-state-inputctrl-bg-hover: var(--white);
  --b-accent: var(--global-b500);
  --b-accent-dark: var(--global-b800);
  --b-accent-darker: var(--global-b900);
  --b-accent-darkest: var(--global-b950);
  --b-accent-light: var(--global-b200);
  --b-accent-lighter: var(--global-b100);
  --b-accent-lightest: var(--global-b50);
  --b-state-color-active: var(--b-accent);
  --b-state-color-default: var(--b-accent-light);
  --b-state-color-disabled: var(--b-accent-lightest);
  --b-state-color-hover: var(--b-accent-dark);
  --b-state-color-selected: var(--b-accent-darker);
  --b-state-inputctrl-bg: var(--b-accent-light);
  --b-state-inputctrl-bg-disabled: var(--b-accent-light);
  --b-state-inputctrl-bg-hover: var(--b-accent-light);
  --brand-primary: #324036;
  --brand-secondary: #f8550f;
  --bg-color-footer: var(--b-accent-darkest);
  --bg-color-header: var(--white);
  --bg-color-nav: var(--surface-color-subtle-b);
  --bg-color-page: var(--white);
  --bg-color-side-pannel: var(--b-accent-lightest);
  --black: #000000;
  --deco-green: #468124;
  --deco-orange-choca: #ffffff;
  --global-a100: #eaf4e4;
  --global-a200: #d6e7cb;
  --global-a300: #b5d4a1;
  --global-a400: #8db871;
  --global-a50: #f6faf3;
  --global-a500: #6b9b4c;
  --global-a600: #557e3b;
  --global-a700: #456431;
  --global-a800: #39512a;
  --global-a900: #304324;
  --global-a950: #162310;
  --global-b100: #f0ece4;
  --global-b200: #e0d7c8;
  --global-b300: #cabaa3;
  --global-b400: #b69d81;
  --global-b50: #f8f6f4;
  --global-b500: #a78768;
  --global-b600: #9a765c;
  --global-b700: #80604e;
  --global-b800: #695043;
  --global-b900: #564238;
  --global-b950: #2d211d;
  --gray100: #e7e7e7;
  --gray200: #d1d1d1;
  --gray300: #b0b0b0;
  --gray400: #888888;
  --gray50: #f6f6f6;
  --gray500: #787878;
  --gray600: #5d5d5d;
  --gray700: #4f4f4f;
  --gray800: #454545;
  --gray900: #3d3d3d;
  --gray950: #262626;
  --neutral: var(--gray400);
  --neutral-dark: var(--gray500);
  --neutral-darker: var(--gray600);
  --neutral-darkest: var(--gray700);
  --neutral-light: var(--gray200);
  --neutral-lighter: var(--gray100);
  --neutral-lightest: var(--gray50);
  --path-color-accent-a: var(--a-accent-dark);
  --path-color-accent-b: var(--b-accent-darker);
  --path-color-brand-primary: var(--brand-primary);
  --path-color-brand-secondary: var(--brand-secondary);
  --path-color-disabled: var(--neutral);
  --path-color-error: var(--system-error-dark);
  --path-color-info: var(--system-info-dark);
  --path-color-inverse: var(--white);
  --path-color-link: var(--system-info);
  --path-color-link-hover: var(--system-info-dark);
  --path-color-middle: var(--neutral);
  --path-color-orange-cho: var(--system-success-dark);
  --path-color-strong: var(--neutral-darkest);
  --path-color-subtle: var(--neutral-light);
  --path-color-success: var(--system-success-dark);
  --path-color-warning: var(--system-warning-dark);
  --surface-color-bold-a: var(--a-accent-dark);
  --surface-color-bold-b: var(--b-accent-dark);
  --surface-color-disabled: var(--a-accent-lightest);
  --surface-color-subtle-a: var(--a-accent-lightest);
  --surface-color-subtle-b: var(--b-accent-lightest);
  --surface-color-subtle-neutral: var(--neutral-lightest);
  --system-error: #ff0000;
  --system-error-dark: #cb0808;
  --system-error-darker: #8a0606;
  --system-error-darkest: #670d0d;
  --system-error-light: #fb6363;
  --system-error-lighter: #faa5a5;
  --system-error-lightest: #ffd1d1;
  --system-info: #4285f4;
  --system-info-dark: #2358c2;
  --system-info-darker: #1111b1;
  --system-info-darkest: #00008b;
  --system-info-light: #48a5ff;
  --system-info-lighter: #89c5ff;
  --system-info-lightest: #baddff;
  --system-success: #2ecc71;
  --system-success-dark: #37bb6f;
  --system-success-darker: #2d8d56;
  --system-success-darkest: #006400;
  --system-success-light: #57e192;
  --system-success-lighter: #ccffcc;
  --system-success-lightest: #e2ffe2;
  --system-warning: #ffa500;
  --system-warning-dark: #ff8c00;
  --system-warning-darker: #d47809;
  --system-warning-darkest: #713f01;
  --system-warning-light: #ffb52e;
  --system-warning-lighter: #ffcc6e;
  --system-warning-lightest: #ffe1ab;
  --white: #ffffff;
  /* number */
  --scale-l-0: 0px;
  --opacity-strong: 0.30000001192092896px;
  --opacity-medium: 0.5px;
  --opacity-subtle: 0.800000011920929px;
  --z-index-base: 1px;
  --scale-l-2: 2px;
  --layout-colums-grid: var(--scale-l-4);
  --scale-l-4: 4px;
  --scale-l-6: 6px;
  --corner-box-lg: var(--scale-l-8);
  --corner-box-md: var(--scale-l-8);
  --corner-box-sm: var(--scale-l-8);
  --scale-l-8: 8px;
  --scale-l-10: 10px;
  --scale-l-12: 12px;
  --body-xs: var(--scale-l-13);
  --scale-l-13: 13px;
  --body-md: var(--scale-l-14);
  --body-sm: var(--scale-l-14);
  --scale-l-14: 14px;
  --gutter-layout: var(--scale-l-16);
  --scale-l-16: 16px;
  --space-sm: var(--scale-l-16);
  --space-xs: var(--scale-l-16);
  --button-text: var(--scale-l-18);
  --lh-body-sm: var(--scale-l-18);
  --lh-body-xs: var(--scale-l-18);
  --scale-l-18: 18px;
  --body-lg: var(--scale-l-20);
  --lh-body-md: var(--scale-l-20);
  --padding-site: var(--scale-l-20);
  --scale-l-20: 20px;
  --scale-l-22: 22px;
  --scale-l-24: 24px;
  --space-md: var(--scale-l-24);
  --heading-md: var(--scale-l-26);
  --scale-l-26: 26px;
  --heading-lg: var(--scale-l-56;
  --lh-body-lg: var(--scale-l-28);
  --scale-l-28: 28px;
  --scale-l-30: 30px;
  --scale-l-32: 32px;
  --lh-heading-md: var(--scale-l-34);
  --scale-l-34: 34px;
  --heading-xl: var(--scale-l-80);
  --lh-heading-lg: var(--scale-l-36);
  --scale-l-36: 36px;
  --scale-l-37: 37px;
  --margin-section: var(--scale-l-38);
  --scale-l-38: 38px;
  --scale-l-40: 40px;
  --scale-l-42: 42px;
  --lh-heading-xl: var(---scale-l-80);
  --scale-l-43: 43px;
  --heading-xxl: var(--scale-l-44);
  --scale-l-44: 44px;
  --scale-l-46: 46px;
  --scale-l-48: 48px;
  --space-lg: var(--scale-l-48);
  --space-xl: var(--scale-l-48);
  --lh-heading-xxl: var(--scale-l-50);
  --scale-l-50: 50px;
  --scale-l-54: 54px;
  --scale-l-56: 56px;
  --scale-l-62: 62px;
  --scale-l-64: 64px;
  --scale-l-67: 67px;
  --scale-l-72: 72px;
  --scale-l-78: 78px;
  --scale-l-80: 80px;
  --scale-l-88: 88px;
  --scale-l-96: 96px;
  --z-index-dropdown: 100px;
  --scale-l-104: 104px;
  --scale-l-112: 112px;
  --scale-l-120: 120px;
  --scale-l-128: 128px;
  --scale-l-144: 144px;
  --scale-l-168: 168px;
  --scale-l-192: 192px;
  --fontweight-light: 300;
  --fontweight-regular: 400;
  --viewport-size: 414px;
  --fontweight-medium: 500;
  --fontweight-bold: 700;
  --fontweight-black: 900;
  --z-index-modal: 1000px;
  --z-index-tooltip: 2000px;
  /* string */
  --global-a: 24A4B6;
  --global-b: E64FCF;
  --ui-colors: https://uicolors.app/generate/;
  --breakpoint-xs: 428px;
  --breakpoint-sm: 481px;
  --breakpoint-md: 769px;
  --breakpoint-lg: 1025px;
  --breakpoint-xl: 1441px;
  --font-family-number: Roboto Mono;
  --font-family-primary: Roboto;
}