Common Variables

--color-warm-grey-1: #fbfbfc;
--color-warm-grey-2: #ededf2;
--color-warm-grey-3: #dcdde5;
--color-warm-grey-4: #c4c6d1;
--color-warm-grey-5: #9b9ca8;
--color-warm-grey-6: #6e6f7a;
--color-warm-grey-7: #555761;
--color-warm-grey-8: #3b3c45;
--color-warm-grey-9: #2a2b33;
--color-warm-grey-10: #22242b;
--color-warm-grey-11: #1a1c21;

--color-purple-1: #f3f1fe;
--color-purple-2: #e6e1fe;
--color-purple-3: #cec4fd;
--color-purple-4: #b3a6f9;
--color-purple-5: #9c8ef4;
--color-purple-6: #7a69ee;
--color-purple-7: #5b4ccc;
--color-purple-8: #4034ab;
--color-purple-9: #291f99;
--color-purple-10: #2b2480;
--color-purple-11: #2c2770;

--color-blueberry-1: #F0F4FF;
--color-blueberry-2: #dfe8ff;
--color-blueberry-3: #bfd0ff;
--color-blueberry-4: #9fb7ff;
--color-blueberry-5: #87a3ff;
--color-blueberry-6: #5f81ff;
--color-blueberry-7: #4561db;
--color-blueberry-8: #2f46b7;
--color-blueberry-9: #1e2f93;
--color-blueberry-10: #222d7a;
--color-blueberry-11: #232a61;

--color-blue-1: #edf5fc;
--color-blue-2: #d9ebfc;
--color-blue-3: #b3d7fc;
--color-blue-4: #90c2fc;
--color-blue-5: #6eabfa;
--color-blue-6: #1f7cff;
--color-blue-7: #3072db;
--color-blue-8: #2558b8;
--color-blue-9: #1f4399;
--color-blue-10: #223d7a;
--color-blue-11: #233061;

--color-sky-1: #eafefe;
--color-sky-2: #cefdfe;
--color-sky-3: #9df4fe;
--color-sky-4: #6ce5fe;
--color-sky-5: #47d2fe;
--color-sky-6: #0bb4fe;
--color-sky-7: #088cda;
--color-sky-8: #0569b6;
--color-sky-9: #155393;
--color-sky-10: #1d4479;
--color-sky-11: #1f3757;

--color-turquoise-1: #ebfdf9;
--color-turquoise-2: #ccfdf3;
--color-turquoise-3: #9afbef;
--color-turquoise-4: #67f5ef;
--color-turquoise-5: #41e6ec;
--color-turquoise-6: #08c7e0;
--color-turquoise-7: #059cc0;
--color-turquoise-8: #0475a1;
--color-turquoise-9: #125a81;
--color-turquoise-10: #1c496b;
--color-turquoise-11: #1c394f;

--color-persian-green-1: #ebfaf3;
--color-persian-green-2: #cafae4;
--color-persian-green-3: #97f5d2;
--color-persian-green-4: #5fe2be;
--color-persian-green-5: #37c6ab;
--color-persian-green-6: #06a192;
--color-persian-green-7: #048a89;
--color-persian-green-8: #036a73;
--color-persian-green-9: #0f4f5d;
--color-persian-green-10: #143d4d;
--color-persian-green-11: #193b47;

--color-green-1: #edfbec;
--color-green-2: #d2fbd0;
--color-green-3: #a3f7a9;
--color-green-4: #72e985;
--color-green-5: #4dd470;
--color-green-6: #1cb854;
--color-green-7: #149e53;
--color-green-8: #0e8450;
--color-green-9: #195848;
--color-green-10: #1a4d40;

--color-grass-1: #f0faeb;
--color-grass-2: #e3fad6;
--color-grass-3: #c2f6ae;
--color-grass-4: #93e380;
--color-grass-5: #66c95b;
--color-grass-6: #2fa52d;
--color-grass-7: #208d28;
--color-grass-8: #167625;
--color-grass-9: #135f25;
--color-grass-10: #164f29;
--color-grass-11: #1f4d2d;

--color-carrot-1: #fff8e8;
--color-carrot-2: #fff0cc;
--color-carrot-3: #FFE4AB;
--color-carrot-4: #FFD181;
--color-carrot-5: #ffbe62;
--color-carrot-6: #ffa02e;
--color-carrot-7: #db7e21;
--color-carrot-8: #b75f17;
--color-carrot-9: #934c1a;
--color-carrot-10: #7a4222;
--color-carrot-11: #5c3721;

--color-orange-1: #fff4e8;
--color-orange-2: #ffead2;
--color-orange-3: #ffcea6;
--color-orange-4: #ffad7a;
--color-orange-5: #ff8c59;
--color-orange-6: #ff5722;
--color-orange-7: #db3918;
--color-orange-8: #b72111;
--color-orange-9: #931e1a;
--color-orange-10: #7a2024;
--color-orange-11: #612729;

--color-red-1: #fef1ea;
--color-red-2: #fee3d4;
--color-red-3: #fdc0ab;
--color-red-4: #fb9580;
--color-red-5: #f86d60;
--color-red-6: #f42d2d;
--color-red-7: #d12030;
--color-red-8: #af1631;
--color-red-9: #8d1c37;
--color-red-10: #752137;
--color-red-11: #612235;

--color-raspberry-1: #fef0ef;
--color-raspberry-2: #fed9d5;
--color-raspberry-3: #feacad;
--color-raspberry-4: #fd838f;
--color-raspberry-5: #fb6382;
--color-raspberry-6: #f9316d;
--color-raspberry-7: #d6236a;
--color-raspberry-8: #b3185e;
--color-raspberry-9: #901d56;
--color-raspberry-10: #77214c;
--color-raspberry-11: #612241;

--color-magenta-1: #feeff5;
--color-magenta-2: #fecce0;
--color-magenta-3: #fe99c3;
--color-magenta-4: #fe66aa;
--color-magenta-5: #fe409c;
--color-magenta-6: #fe0184;
--color-magenta-7: #da0078;
--color-magenta-8: #b6006a;
--color-magenta-9: #931a65;
--color-magenta-10: #791f5a;
--color-magenta-11: #5e1a48;

--color-black: #000000;
--color-white: #ffffff;

--color-primary-bg: var(--color-blueberry-1);
--color-primary-bg-hover: var(--color-blueberry-2);
--color-primary-border: var(--color-blueberry-3);
--color-primary-border-hover: var(--color-blueberry-4);
--color-primary-hover: var(--color-blueberry-5);
--color-primary-base: var(--color-blueberry-6);
--color-primary-active: var(--color-blueberry-7);
--color-primary-text-hover: var(--color-blueberry-8);
--color-primary-text: var(--color-blueberry-9);
--color-primary-text-active: var(--color-blueberry-10);

--color-success-bg: var(--color-green-1);
--color-success-bg-hover: var(--color-green-2);
--color-success-border: var(--color-green-3);
--color-success-border-hover: var(--color-green-4);
--color-success-hover: var(--color-green-5);
--color-success-base: var(--color-green-6);
--color-success-active: var(--color-green-7);
--color-success-text-hover: var(--color-green-8);
--color-success-text: var(--color-green-9);
--color-success-text-active: var(--color-green-10);

--color-info-bg: var(--color-blue-1);
--color-info-bg-hover: var(--color-blue-2);
--color-info-border: var(--color-blue-3);
--color-info-border-hover: var(--color-blue-4);
--color-info-hover: var(--color-blue-5);
--color-info-base: var(--color-blue-6);
--color-info-active: var(--color-blue-7);
--color-info-text-hover: var(--color-blue-8);
--color-info-text: var(--color-blue-9);
--color-info-text-active: var(--color-blue-10);

--color-warning-bg: var(--color-carrot-1);
--color-warning-bg-hover: var(--color-carrot-2);
--color-warning-border: var(--color-carrot-3);
--color-warning-border-hover: var(--color-carrot-4);
--color-warning-hover: var(--color-carrot-5);
--color-warning-base: var(--color-carrot-6);
--color-warning-active: var(--color-carrot-7);
--color-warning-text-hover: var(--color-carrot-8);
--color-warning-text: var(--color-carrot-9);
--color-warning-text-active: var(--color-carrot-10);

--color-error-bg: var(--color-raspberry-1);
--color-error-bg-hover: var(--color-raspberry-2);
--color-error-border: var(--color-raspberry-3);
--color-error-border-hover: var(--color-raspberry-4);
--color-error-hover: var(--color-raspberry-5);
--color-error-base: var(--color-raspberry-6);
--color-error-active: var(--color-raspberry-7);
--color-error-text-hover: var(--color-raspberry-8);
--color-error-text: var(--color-raspberry-9);
--color-error-text-active: var(--color-raspberry-10);

--layer-color: var(--color-warm-grey-1);
--layer-color-hover: var(--color-warm-grey-2);
--layer-color-active: var(--color-warm-grey-3);
--layer-color-ontonal: var(--color-white);
--layer-color-ontonal-hover: var(--color-hover-base);
--layer-color-ontonal-active: var(--color-warm-grey-3);
--layer-color-accent: var(--color-warm-grey-10);
--layer-accent-hover: var(--color-warm-grey-9);
--layer-color-onraised: var(--color-warm-grey-2);
--layer-color-raised:  var(--color-white);

--text-color-primary: var(--color-warm-grey-11);
--text-color-secondary: var(--color-warm-grey-8);
--text-color-description: var(--color-warm-grey-7);
--text-color-helper: var(--color-warm-grey-6);
--text-color-disabled: var(--color-warm-grey-5);
--text-color-on-color: var(--color-warm-grey-1);
--text-color-inverse: var(--color-white);

--font-size-base: 14px;
--font-size-sm: 12px;
--font-size-lg: 16px;
--font-size-xl: 20px;

--line-height-base: 22px;
--line-height-sm: 20px;
--line-height-md: var(--line-height-base);
--line-height-lg: 24px;
--line-height-xl: 28px;
--line-height-xxl: 30px;

--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-italic: 'Regular Italic';

--font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
--font-family-monospaced: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Mono', 'Fira Mono',
'Droid Sans Mono', 'Courier New', monospace;

--text-smoothing: antialiased;
--text-rendering: optimizeSpeed;

--heading-font-family: var(--font-family-base);
--heading-font-weight: var(--font-weight-semibold);
--heading-text-color: var(--text-color-primary);

--heading-anchor-offset-right: 4px;
--heading-anchor-color: var(--button-content-color-primary);
--heading-anchor-icon: none;

--h1-font-family: var(--heading-font-family);
--h1-font-weight: var(--heading-font-weight);
--h1-font-size: 36px;
--h1-line-height: 44px;
--h1-margin-top: var(--spacing-xl);
--h1-margin-bottom: var(--spacing-base);
--h1-text-color: var(--heading-text-color);
--h1-code-line-height: 60px;

--h2-font-family: var(--heading-font-family);
--h2-font-weight: var(--heading-font-weight);
--h2-font-size: 28px;
--h2-line-height: 36px;
--h2-margin-top: var(--spacing-xl);
--h2-margin-bottom: var(--spacing-base);
--h2-text-color: var(--heading-text-color);
--h2-code-line-height: 48px;

--h3-font-family: var(--heading-font-family);
--h3-font-weight: var(--heading-font-weight);
--h3-font-size: 24px;
--h3-line-height: 32px;
--h3-margin-top: var(--spacing-lg);
--h3-margin-bottom: var(--spacing-base);
--h3-text-color: var(--heading-text-color);
--h3-code-line-height: var(--line-height-xxl);

--h4-font-family: var(--heading-font-family);
--h4-font-weight: var(--font-weight-semibold);
--h4-font-size: 20px;
--h4-line-height: 28px;
--h4-margin-top: var(--spacing-base);
--h4-margin-bottom: var(--spacing-base);
--h4-text-color: var(--heading-text-color);
--h4-code-line-height: var(--line-height-xl);

--h5-font-family: var(--heading-font-family);
--h5-font-weight: var(--heading-font-weight);
--h5-font-size: 14px;
--h5-line-height: 14px;
--h5-margin-top: var(--spacing-xs);
--h5-margin-bottom: var(--spacing-sm);
--h5-text-color: var(--heading-text-color);
--h5-code-line-height: var(--line-height-lg);

--h6-font-family: var(--heading-font-family);
--h6-font-weight: var(--heading-font-weight);
--h6-font-size: 12px;
--h6-line-height: 12px;
--h6-margin-top: var(--spacing-xxs);
--h6-margin-bottom: var(--spacing-xs);
--h6-text-color: var(--heading-text-color);
--h6-code-line-height: var(--line-height-md);

--border-width: 1px;
--border-style: solid;

--border-radius: 4px;
--border-radius-md: calc(var(--border-radius) * 1.5);
--border-radius-lg: calc(var(--border-radius) * 2);
--border-radius-xl: calc(var(--border-radius) * 3);
--border-radius-xxl: calc(var(--border-radius) * 4);

--border-color-primary: var(--color-warm-grey-3);
--border-color-secondary: var(--color-warm-grey-2);
--border-color-invers: var(--color-warm-grey-10);

--spacing-unit: 4px;

--spacing-base: calc(var(--spacing-unit) * 4);
--spacing-xxs: var(--spacing-unit);
--spacing-xs: calc(var(--spacing-unit) * 2);
--spacing-sm: calc(var(--spacing-unit) * 3);
--spacing-md: calc(var(--spacing-unit) * 5);
--spacing-lg: calc(var(--spacing-unit) * 6);
--spacing-xl: calc(var(--spacing-unit) * 8);
--spacing-xxl: calc(var(--spacing-unit) * 12);

--spacing-horizontal: var(--spacing-xl);
--spacing-vertical: var(--spacing-base);

--container-width: 1200px;

--control-height-base: 32px;
--control-height-xs: 16px;
--control-height-sm: 24px;
--control-height-lg: 40px;

--color-hover-base: #F3F3F6;

--bg-color: var(--color-white);
--bg-color-hover: var(--color-hover-base);
--bg-color-active: var(--color-warm-grey-2);
--bg-color-tonal: var(--color-warm-grey-1);
--bg-color-tonal-hover: var(--color-white);
--bg-color-tonal-active: var(--color-white);

--bg-color-raised: var(--color-white); //Dropdown, popup, tooltip
--bg-color-modal-overlay: rgba(0, 0, 0, 0.2);


--bg-raised-shadow: 0px 8px 24px 8px #0000000A, 0px 4px 12px 0px #00000014; // Hovers for base. Menu