/**
* Design Tokens
* -----------------------------------------------------------------------------
* Prefix: --mh--
* Responsiveness: PC values are default, Mobile values are set via media query.
*/
:root {
/* --- Colors: Primary --- */
--mh--color-primary-900: #153849;
--mh--color-primary-600: #1088c8;
--mh--color-primary-400: #49aae3;

/* --- Colors: Secondary --- */
--mh--color-secondary-800: #00a8a2;
--mh--color-secondary-700: #0c9da2;
--mh--color-secondary-600: #13a39b;
--mh--color-secondary-300: #4fdbc9;

/* --- Colors: Accent --- */
--mh--color-accent-600: #e27541;
--mh--color-accent-500: #f87046;

/* --- Colors: Grayscale --- */
--mh--color-gray-900: #333333;
--mh--color-gray-700: #7a868e;
--mh--color-gray-600: #809097;
--mh--color-gray-500: #999999;
--mh--color-gray-300: #dce1e4;
--mh--color-gray-200: #dbe6ec;
--mh--color-gray-100: #edf3f6;
--mh--color-gray-50: #ffffff;

/* --- Colors: Special --- */
--mh--grad-primary: linear-gradient(34deg, #00609d 0%, #2480ba 100%);

/* --- Font Sizes (Default: PC) --- */
--mh--font-size--x3s: 11px;
--mh--font-size--x2s: 12px;
--mh--font-size--xs: 13px;
--mh--font-size--sm: 14px;
--mh--font-size--md: 16px;
--mh--font-size--lg: 18px;
--mh--font-size--xl: 20px;
--mh--font-size--x2l: 23px;
--mh--font-size--x3l: 26px;
--mh--font-size--x4l: 29px;
--mh--font-size--x5l: 32px;
--mh--font-size--x6l: 36px;
--mh--font-size--x7l: 41px;
--mh--font-size--x8l: 46px;
--mh--font-size--x9l: 52px;
--mh--font-size--x10l: 58px;
--mh--font-size--x11l: 66px;
--mh--font-size--x12l: 74px;

/* --- Spacing (Default: PC) --- */
--mh--space--10-10: 10px;
--mh--space--10-15: 15px;
--mh--space--10-30: 30px;
--mh--space--10-40: 40px;
--mh--space--10-60: 60px;
--mh--space--15-15: 15px;
--mh--space--15-20: 20px;
--mh--space--20-15: 15px;
--mh--space--20-20: 20px;
--mh--space--20-30: 30px;
--mh--space--20-50: 50px;
--mh--space--20-60: 60px;
--mh--space--20-80: 80px;
--mh--space--20-120: 120px;
--mh--space--25-25: 25px;
--mh--space--25-30: 30px;
--mh--space--25-60: 60px;
--mh--space--25-70: 70px;
--mh--space--25-80: 80px;
--mh--space--30-30: 30px;
--mh--space--30-40: 40px;
--mh--space--30-50: 50px;
--mh--space--30-80: 80px;
--mh--space--40-60: 60px;
--mh--space--40-100: 100px;
--mh--space--40-120: 120px;
--mh--space--60-100: 100px;
--mh--space--60-160: 160px;

--mh--space--x5s: 4px;
--mh--space--x4s: 10px;
--mh--space--x3s: 20px;
--mh--space--x2s: 30px;
--mh--space--xs: 40px;
--mh--space--sm: 60px;
--mh--space--md: 80px;
--mh--space--lg: 100px;
--mh--space--xl: 120px;
--mh--space--x2l: 140px;
--mh--space--x3l: 160px;
--mh--space--x4l: 180px;
--mh--space--x5l: 200px;
}

/* --- Mobile Overrides (Screen width <= 768px) --- */
@media screen and (max-width: 768px) {
:root {
/* Font Sizes (Mobile) */
--mh--font-size--md: 15px;
--mh--font-size--lg: 16px;
--mh--font-size--xl: 17px;
--mh--font-size--x2l: 18px;
--mh--font-size--x3l: 20px;
--mh--font-size--x4l: 21px;
--mh--font-size--x5l: 23px;
--mh--font-size--x6l: 24px;
--mh--font-size--x7l: 26px;
--mh--font-size--x8l: 28px;
--mh--font-size--x9l: 30px;
--mh--font-size--x10l: 32px;
--mh--font-size--x11l: 34px;
--mh--font-size--x12l: 36px;

/* Spacing (Mobile) */
--mh--space--10-15: 10px;
--mh--space--10-30: 10px;
--mh--space--10-40: 10px;
--mh--space--10-60: 10px;
--mh--space--15-20: 15px;
--mh--space--20-15: 20px;
--mh--space--20-30: 20px;
--mh--space--20-50: 20px;
--mh--space--20-60: 20px;
--mh--space--20-80: 20px;
--mh--space--20-120: 20px;
--mh--space--25-30: 25px;
--mh--space--25-60: 25px;
--mh--space--25-70: 25px;
--mh--space--25-80: 25px;
--mh--space--30-40: 30px;
--mh--space--30-50: 30px;
--mh--space--30-80: 30px;
--mh--space--40-60: 40px;
--mh--space--40-100: 40px;
--mh--space--40-120: 40px;
--mh--space--60-100: 60px;
--mh--space--60-160: 60px;

--mh--space--x5s: 2px;
--mh--space--x4s: 5px;
--mh--space--x3s: 10px;
--mh--space--x2s: 15px;
--mh--space--xs: 20px;
--mh--space--sm: 30px;
--mh--space--md: 40px;
--mh--space--lg: 50px;
--mh--space--xl: 60px;
--mh--space--x2l: 70px;
--mh--space--x3l: 80px;
--mh--space--x4l: 90px;
--mh--space--x5l: 100px;
}
}