/*****************************************************************/
/* MX Design Tokens — ported from MemberExperience.UI theme.ts    */
/* Loaded ONLY by ExternalLogin.aspx (via its own                 */
/* headerContentPlaceHolder content) — never affects other pages. */
/*****************************************************************/

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/Fonts/Rubik/rubik-v28-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/Fonts/Rubik/rubik-v28-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/Fonts/Rubik/rubik-v28-700.woff2') format('woff2');
}

:root {
    --mx-font-family: 'Rubik', system-ui, -apple-system, sans-serif;

    --mx-color-primary: #000000;
    --mx-color-primary-dark: #262626;
    --mx-color-primary-light: #414141;
    --mx-color-primary-contrast: #FFFFFF;
    --mx-color-secondary: #1770ED;
    --mx-color-secondary-extralight: #E7F1FF;
    --mx-color-text-primary: #000000;
    --mx-color-text-secondary: #262626;
    --mx-color-text-disabled: #ADADAD;
    --mx-color-background-paper: #FFFFFF;
    --mx-color-background-brand-panel: #FFF4E9;
    --mx-color-divider: #DFDFDF;
    --mx-color-error: #C6211B;

    --mx-grey-50: #EEEEEE;
    --mx-grey-100: #EBEBEB;
    --mx-grey-200: #DFDFDF;
    --mx-grey-300: #CDCECF;
    --mx-grey-400: #ADADAD;
    --mx-grey-500: #8B8B8B;
    --mx-grey-600: #797979;
    --mx-grey-700: #5F5F5F;
    --mx-grey-800: #414141;
    --mx-grey-900: #262626;

    /* 8px base spacing scale (MUI theme.spacing(n) = 8n px) */
    --mx-space-1: 8px;
    --mx-space-2: 16px;
    --mx-space-3: 24px;
    --mx-space-4: 32px;
    --mx-space-6: 48px;
    --mx-space-8: 64px;
    --mx-space-10: 80px;

    --mx-h1-size: 36px;
    --mx-h1-line: 40px;
    --mx-h1-weight: 700;
    --mx-h1-spacing: 0.18px;

    --mx-h2-size: 24px;
    --mx-h2-line: 32px;
    --mx-h2-weight: 700;
    --mx-h2-spacing: 0;

    --mx-body1-size: 16px;
    --mx-body1-line: 20px;
    --mx-body1-weight: 400;

    --mx-subtitle1-size: 16px;
    --mx-subtitle1-line: 20px;
    --mx-subtitle1-weight: 500;
    --mx-subtitle1-spacing: 0.5px;

    --mx-subtitle2-size: 12px;
    --mx-subtitle2-line: 14px;
    --mx-subtitle2-weight: 500;
    --mx-subtitle2-spacing: 0.5px;

    --mx-breakpoint-lg: 1024px;
}