/* Primitive: Color */
:root {
    /* Mode 1 */
    /* color */
    --blue-100: #f2e0ec;
    --blue-200: #e0b3d3;
    --blue-300: #cc80b8;
    --blue-400: #b84d9d;
    --blue-500: #a33a7f;
    --blue-600: #8e1466;
    --blue-700: #7C0055;
    --blue-800: #7C0055;
    --blue-900: #4d0035;
    --brand-100: #f2e0ec;
    --brand-200: #e0b3d3;
    --brand-300: #cc80b8;
    --brand-400: #b84d9d;
    --brand-500: #a33a7f;
    --brand-600: #8e1466;
    --brand-700: #7C0055;
    --brand-800: #7C0055;
    --brand-900: #4d0035;
    --cyan-100: #f2e0ec;
    --cyan-200: #e0b3d3;
    --cyan-300: #cc80b8;
    --cyan-400: #b84d9d;
    --cyan-500: #a33a7f;
    --cyan-600: #8e1466;
    --cyan-700: #7C0055;
    --cyan-800: #7C0055;
    --cyan-900: #4d0035;
    --green-100: #cce3d8;
    --green-200: #9ac7b2;
    --green-300: #358e65;
    --green-400: #358e65;
    --green-500: #02723e;
    --green-600: #025b32;
    --green-700: #014425;
    --green-800: #012e19;
    --green-900: #00170c;
    --neutral-10: #fbfbfb;
    --neutral-100: #e5e5e5;
    --neutral-150: #d9d9d9;
    --neutral-200: #cccccc;
    --neutral-250: #bfbfbf;
    --neutral-300: #b2b2b2;
    --neutral-350: #a6a6a6;
    --neutral-400: #999999;
    --neutral-450: #8c8c8c;
    --neutral-50: #f2f2f2;
    --neutral-500: #808080;
    --neutral-550: #737373;
    --neutral-600: #666666;
    --neutral-650: #595959;
    --neutral-700: #4d4d4d;
    --neutral-750: #404040;
    --neutral-800: #333333;
    --neutral-850: #262626;
    --neutral-900: #1a1a1a;
    --neutral-950: #0d0d0d;
    --orange-100: #ffe5d0;
    --orange-200: #fecba1;
    --orange-300: #feb272;
    --orange-400: #fd9843;
    --orange-500: #fd7e14;
    --orange-600: #ca6510;
    --orange-700: #984c0c;
    --orange-800: #653208;
    --orange-900: #331904;
    --pink-100: #f8d7da;
    --pink-200: #f1aeb5;
    --pink-300: #ea868f;
    --pink-400: #e35d6a;
    --pink-500: #dc3545;
    --pink-600: #b02a37;
    --pink-700: #842029;
    --pink-800: #58151c;
    --pink-900: #2c0b0e;
    --primary-black: #000000;
    --primary-black-50: #00000080;
    --primary-white: #ffffff;
    --primary-white-50: #ffffff80;
    --purple-100: #e2d9f3;
    --purple-200: #c5b3e6;
    --purple-300: #a98eda;
    --purple-400: #8c68cd;
    --purple-500: #6f42c1;
    --purple-600: #59359a;
    --purple-700: #432874;
    --purple-800: #2c1a4d;
    --purple-900: #160d27;
    --red-100: #f8d7da;
    --red-200: #f1aeb5;
    --red-300: #ea868f;
    --red-400: #e35d6a;
    --red-500: #dc3545;
    --red-600: #b02a37;
    --red-700: #842029;
    --red-800: #58151c;
    --red-900: #2c0b0e;
    --teal-100: #ccf5f5;
    --teal-200: #99ebeb;
    --teal-300: #66e0e0;
    --teal-400: #33d6d6;
    --teal-500: #00cccc;
    --teal-600: #00a3a3;
    --teal-700: #007a7a;
    --teal-800: #005252;
    --teal-900: #002929;
    --violet-100: #f1d6ff;
    --violet-200: #e4adff;
    --violet-300: #d685ff;
    --violet-400: #c95cff;
    --violet-500: #bb33ff;
    --violet-600: #9629cc;
    --violet-700: #701f99;
    --violet-800: #4b1466;
    --violet-900: #250a33;
    --yellow-100: #fff3cd;
    --yellow-200: #ffe69c;
    --yellow-300: #ffda6a;
    --yellow-400: #ffcd39;
    --yellow-500: #ffc107;
    --yellow-600: #cc9a06;
    --yellow-700: #997404;
    --yellow-800: #664d03;
    --yellow-900: #332701;
}
/* Semantic: Color */
:root {
    /* Light */
    /* color */
    --background-brand: var(--brand-500);
    --background-brand-disabled: var(--blue-200);
    --background-brand-focus: var(--yellow-500);
    --background-brand-hover: var(--brand-600);
    --background-brand-pressed: var(--brand-700);
    --background-brand-secondary: var(--brand-800);
    --background-disabled: var(--neutral-50);
    --background-hover: var(--neutral-50);
    --background-info: var(--blue-500);
    --background-info-subtle: var(--blue-100);
    --background-inverse: var(--neutral-900);
    --background-negative: var(--red-500);
    --background-negative-subtle: var(--red-100);
    --background-notice: var(--orange-500);
    --background-notice-subtle: var(--orange-100);
    --background-positive: var(--green-500);
    --background-positive-subtle: var(--green-100);
    --background-pressed: var(--neutral-100);
    --background-primary: var(--primary-white);
    --background-secondary: var(--neutral-150);
    --background-selected: var(--brand-100);
    --background-tertiary: var(--neutral-50);
    --background-tertiary-light: var(--neutral-10);
    --border-brand: var(--brand-500);
    --border-brand-disabled: var(--brand-200);
    --border-brand-focus: var(--yellow-500);
    --border-disabled: var(--neutral-200);
    --border-info: var(--blue-500);
    --border-inverse: var(--primary-white);
    --border-negative: var(--red-500);
    --border-notice: var(--orange-500);
    --border-positive: var(--green-500);
    --border-primary: var(--neutral-600);
    --border-primary-dark: var(--neutral-850);
    --border-secondary: var(--neutral-400);
    --border-tertiary: var(--neutral-200);
    --content-brand: var(--brand-500);
    --content-brand-disabled: var(--brand-200);
    --content-disabled: var(--neutral-300);
    --content-info: var(--blue-500);
    --content-info-bold: var(--blue-600);
    --content-link: var(--blue-500);
    --content-link-hover: var(--blue-700);
    --content-link-pressed: var(--blue-700);
    --content-negative: var(--red-500);
    --content-negative-bold: var(--red-600);
    --content-notice: var(--orange-500);
    --content-notice-bold: var(--orange-700);
    --content-positive: var(--green-500);
    --content-positive-bold: var(--green-600);
    --content-primary: var(--neutral-900);
    --content-primary-inverse: var(--primary-white);
    --content-secondary: var(--neutral-800);
    --content-secondary-inverse: var(--neutral-100);
    --content-tertiary: var(--neutral-600);
    --content-tertiary-inverse: var(--neutral-300);
    --overlay-50: var(--primary-black-50);
    --overlay-50-inverse: var(--primary-white-50);
    --surface-l0: var(--primary-white);
    --surface-l1: var(--primary-white);
    --surface-l2: var(--primary-white);
    --surface-l3: var(--primary-white);
    --surface-l4: var(--primary-white);
    --surface-l5: var(--primary-white);
    --surface-l6: var(--primary-white);
}
/* Spacing */
:root {
    /* Mode 1 */
    /* number */
    --grid-margin: 240px;
    --space-0: 0px;
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 12px;
    --space-l: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 40px;
    --space-4xl: 48px;
    --space-5xl: 56px;
    --space-6xl: 64px;
    --space-7xl: 72px;
    --space-8xl: 80px;
    --space-9xl: 88px;
    --space-10xl: 96px;
    --space-11xl: 104px;
    --space-12xl: 112px;
}
/* Layout */
:root {
    /* Mode 1 */
    /* number */
    --breakpoint-s: 393px;
    --breakpoint-m: 768px;
    --breakpoint-l: 1024px;
    --breakpoint-xl: 1440px;
}
/* Semantic: Type */
:root {
    /* Desktop */
    /* number */
    --breakpoint: var(--breakpoint-xl);
    --heading-2xl-semibold-letter-spacing: var(--letter-spacing-xs);
    --heading-2xl-semibold-size: var(--size-7xl);
    --heading-2xl-semibold-line-height: var(--line-height-7xl);
    --heading-2xs-semibold-letter-spacing: var(--letter-spacing-none);
    --heading-2xs-semibold-size: var(--size-m);
    --heading-2xs-semibold-line-height: var(--line-height-m);
    --heading-3xl-semibold-letter-spacing: var(--letter-spacing-xs);
    --heading-3xl-semibold-size: var(--size-8xl);
    --heading-3xl-semibold-line-height: var(--line-height-8xl);
    --heading-4xl-semibold-letter-spacing: var(--letter-spacing-xs);
    --heading-4xl-semibold-size: var(--size-9xl);
    --heading-4xl-semibold-line-height: var(--line-height-9xl);
    --heading-5xl-semibold-letter-spacing: var(--letter-spacing-xs);
    --heading-5xl-semibold-size: var(--size-10xl);
    --heading-5xl-semibold-line-height: var(--line-height-10xl);
    --heading-l-semibold-letter-spacing: var(--letter-spacing-xs);
    --heading-l-semibold-size: var(--size-5xl);
    --heading-l-semibold-line-height: var(--line-height-5xl);
    --heading-m-semibold-letter-spacing: var(--letter-spacing-s);
    --heading-m-semibold-size: var(--size-3xl);
    --heading-m-semibold-line-height: var(--line-height-3xl);
    --heading-s-semibold-letter-spacing: var(--letter-spacing-s);
    --heading-s-semibold-size: var(--size-2xl);
    --heading-s-semibold-line-height: var(--line-height-2xl);
    --heading-xl-semibold-letter-spacing: var(--letter-spacing-xs);
    --heading-xl-semibold-size: var(--size-6xl);
    --heading-xl-semibold-line-height: var(--line-height-6xl);
    --heading-xs-semibold-letter-spacing: var(--letter-spacing-s);
    --heading-xs-semibold-size: var(--size-l);
    --heading-xs-semibold-line-height: var(--line-height-l);
    --text-l-regular-letter-spacing: var(--letter-spacing-none);
    --text-l-regular-size: var(--size-l);
    --text-l-regular-line-height: var(--line-height-l);
    --text-l-semibold-letter-spacing: var(--letter-spacing-none);
    --text-l-semibold-size: var(--size-l);
    --text-l-semibold-line-height: var(--line-height-l);
    --text-m-regular-letter-spacing: var(--letter-spacing-none);
    --text-m-regular-size: var(--size-m);
    --text-m-regular-line-height: var(--line-height-m);
    --text-m-semibold-letter-spacing: var(--letter-spacing-none);
    --text-m-semibold-size: var(--size-m);
    --text-m-semibold-line-height: var(--line-height-m);
    --text-s-regular-letter-spacing: var(--letter-spacing-none);
    --text-s-regular-size: var(--size-s);
    --text-s-regular-line-height: var(--line-height-s);
    --text-s-semibold-letter-spacing: var(--letter-spacing-none);
    --text-s-semibold-size: var(--size-s);
    --text-s-semibold-line-height: var(--line-height-s);
    --text-xl-regular-letter-spacing: var(--letter-spacing-none);
    --text-xl-regular-size: var(--size-2xl);
    --text-xl-regular-line-height: var(--line-height-2xl);
    --text-xl-semibold-letter-spacing: var(--letter-spacing-none);
    --text-xl-semibold-size: var(--size-2xl);
    --text-xl-semibold-line-height: var(--line-height-2xl);
    --text-xs-regular-letter-spacing: var(--letter-spacing-none);
    --text-xs-regular-size: var(--size-xs);
    --text-xs-regular-line-height: var(--line-height-xs);
    --text-xs-semibold-letter-spacing: var(--letter-spacing-none);
    --text-xs-semibold-size: var(--size-xs);
    --text-xs-semibold-line-height: var(--line-height-xs);
    /* string */
    --family: var(--family-inter);
    --heading-2xl-semibold-weight: var(--weight-semi-bold);
    --heading-2xs-semibold-weight: var(--weight-semi-bold);
    --heading-3xl-semibold-weight: var(--weight-semi-bold);
    --heading-4xl-semibold-weight: var(--weight-semi-bold);
    --heading-5xl-semibold-weight: var(--weight-semi-bold);
    --heading-l-semibold-weight: var(--weight-semi-bold);
    --heading-m-semibold-weight: var(--weight-semi-bold);
    --heading-s-semibold-weight: var(--weight-semi-bold);
    --heading-xl-semibold-weight: var(--weight-semi-bold);
    --heading-xs-semibold-weight: var(--weight-semi-bold);
    --text-l-regular-weight: var(--weight-regular);
    --text-l-semibold-weight: var(--weight-semi-bold);
    --text-m-regular-weight: var(--weight-regular);
    --text-m-semibold-weight: var(--weight-semi-bold);
    --text-s-regular-weight: var(--weight-regular);
    --text-s-semibold-weight: var(--weight-semi-bold);
    --text-xl-regular-weight: var(--weight-regular);
    --text-xl-semibold-weight: var(--weight-semi-bold);
    --text-xs-regular-weight: var(--weight-regular);
    --text-xs-semibold-weight: var(--weight-semi-bold);
}
/* Border */
:root {
    /* Mode 1 */
    /* number */
    --radius-xs: 4px;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-circle: 50px;
    --radius-pill: 999px;
    --width-xs: 1px;
    --width-s: 1.5px;
    --width-m: 2px;
    --width-l: 4px;
    --width-xl: 8px;
}
/* Primitive: Type */
:root {
    /* Value */
    /* number */
    --letter-spacing-xs: -1px;
    --letter-spacing-s: -0.5px;
    --letter-spacing-none: 0px;
    --line-height-xs: var(--unit-14);
    --line-height-s: var(--unit-16);
    --line-height-m: var(--unit-20);
    --line-height-l: var(--unit-24);
    --line-height-xl: var(--unit-26);
    --line-height-2xl: var(--unit-28);
    --line-height-3xl: var(--unit-32);
    --line-height-4xl: var(--unit-36);
    --line-height-5xl: var(--unit-40);
    --line-height-6xl: var(--unit-48);
    --line-height-7xl: var(--unit-56);
    --line-height-8xl: var(--unit-64);
    --line-height-9xl: var(--unit-72);
    --line-height-10xl: var(--unit-80);
    --size-xs: var(--unit-10);
    --size-s: var(--unit-12);
    --size-m: var(--unit-14);
    --size-l: var(--unit-16);
    --size-xl: var(--unit-18);
    --size-2xl: var(--unit-20);
    --size-3xl: var(--unit-24);
    --size-4xl: var(--unit-28);
    --size-5xl: var(--unit-32);
    --size-6xl: var(--unit-40);
    --size-7xl: var(--unit-48);
    --size-8xl: var(--unit-56);
    --size-9xl: var(--unit-64);
    --size-10xl: var(--unit-72);
    /* string */
    --family-inter: Roboto;
    --family-roboto: Roboto;
    --family-sf-pro-text: SF Pro Text;
    --weight-regular: 400;
    --weight-semi-bold: 600;
    --max-content-width: 1320px;
}
/* Unit */
:root {
    /* Mode 1 */
    /* number */
    --unit-2: 2px;
    --unit-4: 4px;
    --unit-8: 8px;
    --unit-10: 10px;
    --unit-12: 12px;
    --unit-14: 14px;
    --unit-16: 16px;
    --unit-18: 18px;
    --unit-20: 20px;
    --unit-24: 24px;
    --unit-26: 26px;
    --unit-28: 28px;
    --unit-32: 32px;
    --unit-36: 36px;
    --unit-40: 40px;
    --unit-48: 48px;
    --unit-56: 56px;
    --unit-64: 64px;
    --unit-72: 72px;
    --unit-80: 80px;
    --unit-88: 88px;
    --unit-96: 96px;
    --unit-104: 104px;
    --unit-112: 112px;
    --unit-120: 120px;
}