/*****************************************************************/
/* MX Design Tokens — ported from MemberExperience.UI theme.ts    */
/* and theme/layeredPaper.ts (the "Layered Paper" design system). */
/* 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');
}

/* 600 is the design system's button, link and field-label weight. Without
   this face the browser synthesizes it from 500 or rounds to 700. */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/Fonts/Rubik/rubik-v28-600.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;

    /* Ink — every primary action is black. */
    --mx-color-primary: #000000;
    --mx-color-primary-dark: #262626;
    --mx-color-primary-contrast: #FFFFFF;

    /* Accent. The deep shade carries text (links, 5.13:1 on white); the
       light one is for non-text cues (the focused field edge). */
    --mx-color-accent-deep: #1768E0;
    --mx-color-accent-hover: #0058D4;
    --mx-color-accent: #3E8EFF;

    /* FBG lockup — the logo mark and the wordmark. */
    --mx-color-brand-logo: #003366;

    --mx-color-text-primary: #000000;
    --mx-color-text-body: #1C1C1C;
    --mx-color-text-secondary: #414141;
    --mx-color-text-disabled: #ADADAD;

    --mx-color-background-paper: #FFFFFF;
    /* Ground — the light support bar, and an outlined button's hover. */
    --mx-color-background-default: #F6F7F9;
    /* Inset — the neutral notice (the code timer). */
    --mx-color-background-subtle: #F3F4F6;
    /* Login canvas — the cream behind the login art. */
    --mx-color-background-brand-panel: #FCF4EA;

    --mx-color-border-field: #767676;
    --mx-color-border-strong: #1C1C1C;
    --mx-color-border-hairline: #DFDFDF;
    --mx-color-border-panel: #EFEFEF;
    --mx-color-border-hover: #ADADAD;

    --mx-color-error: #D92D20;
    --mx-color-error-extralight: #FDECEC;
    --mx-color-success-edge: #12A150;
    --mx-color-success-extralight: #E9F7EF;

    /* The disabled button's fill and text. */
    --mx-grey-100: #EBEBEB;
    --mx-grey-500: #8B8B8B;
    /* The carousel's resting dots. */
    --mx-grey-300: #CDCECF;

    /* Radius decreases inward. */
    --mx-radius-pill: 999px;
    --mx-radius-card: 22px;
    --mx-radius-notice: 12px;
    --mx-radius-control: 8px;
    --mx-radius-field: 6px;

    /* Depth. */
    --mx-elevation-primary: 0 6px 14px rgba(0, 0, 0, .3);
    --mx-elevation-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 14px 28px -12px rgba(16, 24, 40, .28);
    --mx-elevation-auth-card: 0 2px 4px rgba(16, 24, 40, .04), 0 24px 60px -20px rgba(120, 80, 30, .22);

    /* Motion — lift is transform + shadow, state is color/border/background. */
    --mx-motion-lift: 180ms cubic-bezier(.2, .7, .3, 1);
    --mx-motion-state: 160ms ease;

    /* 8px base spacing scale (MUI theme.spacing(n) = 8n px) */
    --mx-space-1: 8px;
    --mx-space-2: 16px;
    --mx-space-3: 24px;

    /* The row MX's desktop form panel opens with: the EN/ES LanguageSwitcher,
       its 30px buttons inside a 3px inset and a 1px edge (30 + 2×3 + 2×1).
       The card centers under it, so CMS reserves the same row. Follow
       MemberExperience.UI's LanguageSwitcher.styled.ts if it changes. */
    --mx-auth-header-row: 38px;

    /* The login screens' title — 36/44, −0.8px (MxLoginPage.css adds MX's
       28/36 step under 360px and 38/46 from 768px). */
    --mx-title-size: 36px;
    --mx-title-line: 44px;
    --mx-title-weight: 700;
    --mx-title-spacing: -0.8px;

    /* Body — 400 · 16/24. */
    --mx-body1-size: 16px;
    --mx-body1-line: 24px;

    /* Supporting copy — 400 · 15/22. */
    --mx-body2-size: 15px;
    --mx-body2-line: 22px;

    /* The white wave the mobile login's cream band ends in (402 frame). */
    --mx-auth-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 78' preserveAspectRatio='none'%3E%3Cpath d='M0 20C96 -6 196 30 300 52c40 8 74 14 102 16v10H0Z' fill='%23FFFFFF'/%3E%3C/svg%3E");

    /* Material glyphs drawn as CSS masks, so they take the text color:
       Cancel (outlined), CheckCircle (outlined), Visibility, VisibilityOff. */
    --mx-glyph-cancel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z'/%3E%3C/svg%3E");
    --mx-glyph-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 7.58 10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8'/%3E%3C/svg%3E");
    --mx-glyph-visibility: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3'/%3E%3C/svg%3E");
    --mx-glyph-visibility-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7M2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2m4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3z'/%3E%3C/svg%3E");
}