:root {
    /* ———————————————————————————————————————————————————————————— */
    /* -- vars -- */
    /* ———————————————————————————————————————————————————————————— */
    /* font */
    --fontSize-s: 14px;
    --fontSize-m: 16px;
    --fontSize-l: 20px;
    --fontSize-xl: 24px;
    --fontSize-xxl: 28px;
    --fontSize-xxxl: 36px;

    --fontWeight-normal: 400;
    --fontWeight-bold: 700;

    --lineHeight-normal: 150%;
    --lineHeight-narrow: 110%;
    --lineHeight-minimal: 100%;


    /* icon */
    --iconSize-s: 16px;
    --iconSize-m: 24px;
    --iconSize-l: 32px;
    --iconSize-xl: 48px;
    --iconSize-xxl: 64px;

    /* -- space --*/
    --space-label: 4px;
    --space-s: 24px;
    --space-m: 32px;
    --space-l: 48px;

    /* -- size -- */
    --size-xs: 2px;
    --size-s: 4px;
    --size-m: 8px;
    --size-l: 16px;
    --size-xl: 24px;
    --size-xxl: 32px;
    --size-xxxl: 48px;
    --size-xxxxl: 64px;
    --size-xxxxxl: 96px;
    --size-xxxxxxl: 160px;

    --size-six: 6px;
    --size-thirty: 30px;
    --size-fortyFour: 44px;
    --size-fortySix: 46px;
    --size-hundredTwenty: 120px;
    --size-threeHundred: 300px;
    --size-auto: auto;


    /* color */
    /* palette */
    /* grey */
    --color-grey-50: #f9f9f9;
    --color-grey-100: #f0f0f0;
    --color-grey-200: #e1e1e1;
    --color-grey-300: #cecece;
    --color-grey-400: #bababa;
    --color-grey-500: #9c9c9c;
    --color-grey-600: #8d8d8d;
    --color-grey-700: #7e7e7e;
    --color-grey-800: #6d6d6d;
    --color-grey-900: #565656;
    --color-grey-1000: #404040;
    --color-grey-1100: #2b2b2b;
    --color-grey-1200: #1a1a1a;
    --color-grey-1300: #0a0a0a;
    /* sand */
    --color-sand-50: #faf9f8;
    --color-sand-100: #f3efed;
    --color-sand-200: #e6dfda;
    --color-sand-300: #d8cdc6;
    --color-sand-400: #c6b7ac;
    --color-sand-500: #ac9686;
    --color-sand-600: #a28977;
    --color-sand-700: #947965;
    --color-sand-800: #816958;
    --color-sand-900: #645245;
    --color-sand-1000: #4b3d33;
    --color-sand-1100: #332923;
    --color-sand-1200: #1f1915;
    --color-sand-1300: #0b0908;
    /* purple */
    --color-purple-50: #f9f9fc;
    --color-purple-100: #f0eff6;
    --color-purple-200: #e1e0ee;
    --color-purple-300: #cdcce4;
    --color-purple-400: #b9b7d8;
    --color-purple-500: #9b98c8;
    --color-purple-600: #8c88bf;
    --color-purple-700: #7b77b6;
    --color-purple-800: #6a65ac;
    --color-purple-900: #524e91;
    --color-purple-1000: #3d3a6c;
    --color-purple-1100: #292749;
    --color-purple-1200: #19182c;
    --color-purple-1300: #0a0911;
    /* green */
    --color-green-50: #f8fbf8;
    --color-green-100: #e9f2e7;
    --color-green-200: #d4e6d1;
    --color-green-300: #bad7b6;
    --color-green-400: #9bc595;
    --color-green-500: #6dab65;
    --color-green-600: #5d9c55;
    --color-green-700: #538b4c;
    --color-green-800: #487942;
    --color-green-900: #395f34;
    --color-green-1000: #2b4727;
    --color-green-1100: #1d301a;
    --color-green-1200: #111d10;
    --color-green-1300: #070b06;
    /* blue */
    --color-blue-50: #f8fafc;
    --color-blue-100: #eaf1f8;
    --color-blue-200: #d5e2f0;
    --color-blue-300: #bbd0e7;
    --color-blue-400: #9fbddd;
    --color-blue-500: #75a0ce;
    --color-blue-600: #5f91c6;
    --color-blue-700: #4881be;
    --color-blue-800: #3c70a8;
    --color-blue-900: #2e5783;
    --color-blue-1000: #234263;
    --color-blue-1100: #182d43;
    --color-blue-1200: #0e1b28;
    --color-blue-1300: #050a0f;
    /* darkOrange */
    --color-darkOrange-50: #fef8f6;
    --color-darkOrange-100: #fdede9;
    --color-darkOrange-200: #fbdad1;
    --color-darkOrange-300: #f8c2b3;
    --color-darkOrange-400: #f5a791;
    --color-darkOrange-500: #f07b5b;
    --color-darkOrange-600: #ed613a;
    --color-darkOrange-700: #e64415;
    --color-darkOrange-800: #c83a12;
    --color-darkOrange-900: #9e2d0e;
    --color-darkOrange-1000: #77220b;
    --color-darkOrange-1100: #521807;
    --color-darkOrange-1200: #330f05;
    --color-darkOrange-1300: #150602;
    /* mediumOrange */
    --color-mediumOrange-50: #fef8f4;
    --color-mediumOrange-100: #fdede2;
    --color-mediumOrange-200: #fcdac4;
    --color-mediumOrange-300: #fac39f;
    --color-mediumOrange-400: #f7a873;
    --color-mediumOrange-500: #f37b2b;
    --color-mediumOrange-600: #ea650d;
    --color-mediumOrange-700: #d15b0c;
    --color-mediumOrange-800: #b54e0a;
    --color-mediumOrange-900: #8e3e08;
    --color-mediumOrange-1000: #6b2e06;
    --color-mediumOrange-1100: #492004;
    --color-mediumOrange-1200: #2d1302;
    --color-mediumOrange-1300: #120801;
    /* lightOrange */
    --color-lightOrange-50: #fff9f2;
    --color-lightOrange-100: #ffedd9;
    --color-lightOrange-200: #ffdbb2;
    --color-lightOrange-300: #ffc37e;
    --color-lightOrange-400: #ffa742;
    --color-lightOrange-500: #ee7f00;
    --color-lightOrange-600: #d87300;
    --color-lightOrange-700: #c16700;
    --color-lightOrange-800: #a75900;
    --color-lightOrange-900: #834600;
    --color-lightOrange-1000: #623400;
    --color-lightOrange-1100: #432400;
    --color-lightOrange-1200: #291600;
    --color-lightOrange-1300: #0f0800;

    /* color */
    /* alias */
    /* brand */
    --color-brand-lightOrange: #ee7f00;
    --color-brand-mediumOrange: #ea650d;
    --color-brand-darkOrange: #f07b5b;
    --color-brand-white: #ffffff;
    /* text */
    --color-text-default: #404040;
    --color-text-subtle: #6d6d6d;
    --color-text-attentional: #1a1a1a;

    /* backdrop */
    --color-backdrop-default: rgba(10, 10, 10, 0.7);
}