/* ============================================================
   Apply - campus themes
   Sparsholt Campus seed : #013946 (Pantone 548C, RAL 5020)
   Andover Campus seed   : #19315B (Pantone 648C, RAL 5003)
   Source: docs/brand-reference.md (SCG Brand Guidelines v1.0 / 2022,
   Update 25). Contrast figures for every ramp value are documented there
   and in docs/prompts/brand-typography-and-colour.md.

   Typography — self-hosted in wwwroot/fonts/, no third-party font CDNs:
     Body, both campuses : Source Sans 3 (variable wght 200-900, SIL OFL)
     Sparsholt banner    : Tomarik Brush (client-specified)
     Andover banner      : Bebas Neue (client-specified; the guidelines
                           say Bebas Kai — the client chose Bebas Neue)
   The guideline faces for Sparsholt Campus (Museo headline / Proxima
   Nova body) are commercial and unlicensed, so they are deliberately
   not used; revisit if the college buys webfont licences.

   Fluent UI v5 applies its design tokens as inline CSS custom
   properties on <body> via the JS setTheme() call. We override the
   brand ramp here with !important so these values win over the default
   theme, in both light and dark mode. The campus theme switch sets
   data-campus-theme on <html> and <body>.
   ============================================================ */

/* ---------- Self-hosted webfonts ---------- */

@font-face {
    font-family: 'Tomarik Brush';
    src: url('/fonts/tomarik-brush.woff2') format('woff2'),
         url('/fonts/tomarik-brush.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Source Sans 3 is a variable font — one file serves every weight the app
   uses (300/400/600), split into latin + latin-ext so browsers only fetch
   the ranges a page actually renders. */
@font-face {
    font-family: 'Source Sans 3';
    src: url('/fonts/source-sans-3-latin.woff2') format('woff2');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('/fonts/source-sans-3-latin-ext.woff2') format('woff2');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('/fonts/bebas-neue-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('/fonts/bebas-neue-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root,
body,
html[data-campus-theme="ucs"],
body[data-campus-theme="ucs"],
html[data-campus-theme="sparsholt"],
body[data-campus-theme="sparsholt"] {
    /* ---------- Typography ---------- */
    --applyFontBody: 'Source Sans 3', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
    --applyFontBanner: 'Tomarik Brush', 'Source Sans 3', 'Segoe UI', sans-serif;
    --applyBannerLetterSpacing: normal;
    --fontFamilyBase: var(--applyFontBody) !important;

    /* Source Sans 3 draws ~6% shorter caps and ~7% narrower than the Segoe UI
       it replaced, so at Fluent's default 14px base the app read visibly
       smaller after the font switch. Lift the base text token one step to
       restore the previous apparent size (measured via canvas metrics). */
    --fontSizeBase300: 15px !important;
    --lineHeightBase300: 21px !important;

    /* ---------- Brand ramp (seed #013946, Pantone 548C) ---------- */

    /* Primary brand surfaces (e.g. primary buttons, accent fills) */
    --colorBrandBackground: #013946 !important;
    --colorBrandBackgroundHover: #025669 !important;
    --colorBrandBackgroundPressed: #012932 !important;
    --colorBrandBackgroundSelected: #025669 !important;
    --colorBrandBackgroundStatic: #013946 !important;
    --colorBrandBackgroundInverted: #ffffff !important;

    /* Subtle brand-tinted surfaces (e.g. selected nav item, badges) */
    --colorBrandBackground2: #EBEFF0 !important;
    --colorBrandBackground2Hover: #DBE3E5 !important;
    --colorBrandBackground2Pressed: #C7D3D6 !important;

    /* Brand foreground / accent text (12.54:1 / 8.28:1 on white) */
    --colorBrandForeground1: #013946 !important;
    --colorBrandForeground2: #025669 !important;
    --colorBrandForeground2Hover: #026A82 !important;
    --colorBrandForeground2Pressed: #012932 !important;

    /* Hyperlinks */
    --colorBrandForegroundLink: #025669 !important;
    --colorBrandForegroundLinkHover: #013946 !important;
    --colorBrandForegroundLinkPressed: #012932 !important;
    --colorBrandForegroundLinkSelected: #025669 !important;

    /* Brand strokes / borders */
    --colorBrandStroke1: #013946 !important;
    --colorBrandStroke2: #A6BABE !important;
    --colorBrandStroke2Hover: #7B989F !important;
    --colorBrandStroke2Pressed: #4D747E !important;
    --colorBrandStroke2Contrast: #013946 !important;

    /* Compound brand (checkbox / radio / switch / slider fills + focus) */
    --colorCompoundBrandForeground1: #013946 !important;
    --colorCompoundBrandForeground1Hover: #025669 !important;
    --colorCompoundBrandForeground1Pressed: #012932 !important;
    --colorCompoundBrandBackground1: #013946 !important;
    --colorCompoundBrandBackground1Hover: #025669 !important;
    --colorCompoundBrandBackground1Pressed: #012932 !important;
    --colorCompoundBrandStroke1: #013946 !important;
    --colorCompoundBrandStroke1Hover: #025669 !important;
    --colorCompoundBrandStroke1Pressed: #012932 !important;

    /* Text drawn on top of a brand background - keep it readable */
    --colorNeutralForegroundOnBrand: #ffffff !important;

    /* App-specific brand values */
    --applyBrandBackground: #013946;
    --applyBrandBackgroundHover: #025669;
    --applyBrandForegroundOnBrand: #ffffff;
    --applyBrandHeroStart: #013946;
    --applyBrandHeroMid: #025A6E;
    --applyBrandHeroEnd: #027F9B;
    --applyBrandLightHover: #EDF1F2;
    /* Hero tint as a bare RGB triplet so Home.razor.css can pick any alpha
       along the wash without a var per stop. */
    --applyHeroTintRgb: 1, 57, 70;
    --applyHeroImage: url("/images/spars-bg.png");
    --applyHeroImagePosition: center;
    --applyHeroOverlayStart: rgba(1, 57, 70, .92);
    --applyHeroOverlayMid: rgba(1, 57, 70, .70);
    --applyHeroOverlayEnd: rgba(1, 57, 70, .28);
}

html[data-campus-theme="andover"],
body[data-campus-theme="andover"] {
    /* ---------- Typography ---------- */
    --applyFontBanner: 'Bebas Neue', 'Source Sans 3', 'Segoe UI', sans-serif;
    /* Bebas Neue sets tight; open it up slightly at banner sizes. */
    --applyBannerLetterSpacing: .02em;

    /* ---------- Brand ramp (seed #19315B, Pantone 648C) ---------- */

    --colorBrandBackground: #19315B !important;
    --colorBrandBackgroundHover: #214077 !important;
    --colorBrandBackgroundPressed: #15284B !important;
    --colorBrandBackgroundSelected: #214077 !important;
    --colorBrandBackgroundStatic: #19315B !important;
    --colorBrandBackgroundInverted: #ffffff !important;

    --colorBrandBackground2: #EDEFF2 !important;
    --colorBrandBackground2Hover: #DFE2E8 !important;
    --colorBrandBackground2Pressed: #CCD2DB !important;

    /* Brand foreground / accent text (12.87:1 / 10.17:1 on white) */
    --colorBrandForeground1: #19315B !important;
    --colorBrandForeground2: #214077 !important;
    --colorBrandForeground2Hover: #264B8B !important;
    --colorBrandForeground2Pressed: #15284B !important;

    --colorBrandForegroundLink: #214077 !important;
    --colorBrandForegroundLinkHover: #19315B !important;
    --colorBrandForegroundLinkPressed: #15284B !important;
    --colorBrandForegroundLinkSelected: #214077 !important;

    --colorBrandStroke1: #19315B !important;
    --colorBrandStroke2: #AEB7C6 !important;
    --colorBrandStroke2Hover: #8794AA !important;
    --colorBrandStroke2Pressed: #5E6F8C !important;
    --colorBrandStroke2Contrast: #19315B !important;

    --colorCompoundBrandForeground1: #19315B !important;
    --colorCompoundBrandForeground1Hover: #214077 !important;
    --colorCompoundBrandForeground1Pressed: #15284B !important;
    --colorCompoundBrandBackground1: #19315B !important;
    --colorCompoundBrandBackground1Hover: #214077 !important;
    --colorCompoundBrandBackground1Pressed: #15284B !important;
    --colorCompoundBrandStroke1: #19315B !important;
    --colorCompoundBrandStroke1Hover: #214077 !important;
    --colorCompoundBrandStroke1Pressed: #15284B !important;

    --colorNeutralForegroundOnBrand: #ffffff !important;

    --applyBrandBackground: #19315B;
    --applyBrandBackgroundHover: #214077;
    --applyBrandForegroundOnBrand: #ffffff;
    --applyBrandHeroStart: #19315B;
    --applyBrandHeroMid: #22427B;
    --applyBrandHeroEnd: #2C569F;
    --applyBrandLightHover: #EFF1F4;
    --applyHeroTintRgb: 25, 49, 91;
    --applyHeroImage: url("/images/ando-bg.png");
    --applyHeroImagePosition: center;
    --applyHeroOverlayStart: rgba(25, 49, 91, .92);
    --applyHeroOverlayMid: rgba(25, 49, 91, .70);
    --applyHeroOverlayEnd: rgba(25, 49, 91, .26);
}

/* ============================================================
   Dark mode brand tints
   Our !important brand overrides above apply in both light and dark,
   which leaves the deep brand foreground (#013946 / #19315B) unreadable
   on dark neutral surfaces. In dark mode we lift the brand FOREGROUND to
   a light tint and drop the subtle brand BACKGROUND to a dark tint, so
   brand text stays legible and brand-tinted chips keep their contrast.
   All foregrounds are >=4.5:1 on Fluent's #292929 dark surface.
   ============================================================ */
body[data-campus-theme="ucs"][data-theme="dark"],
body[data-campus-theme="sparsholt"][data-theme="dark"] {
    --colorBrandForeground1: #41AFC8 !important;
    --colorBrandForeground2: #65B9CD !important;

    --colorBrandForegroundLink: #41AFC8 !important;
    --colorBrandForegroundLinkHover: #65B9CD !important;
    --colorBrandForegroundLinkPressed: #359EB6 !important;
    --colorBrandForegroundLinkSelected: #41AFC8 !important;

    --colorBrandBackground2: #102023 !important;
    --colorBrandBackground2Hover: #162C31 !important;
    --colorBrandBackground2Pressed: #1C3940 !important;

    --colorCompoundBrandForeground1: #41AFC8 !important;
    --colorCompoundBrandForeground1Hover: #65B9CD !important;
}

body[data-campus-theme="andover"][data-theme="dark"] {
    --colorBrandForeground1: #84A4DB !important;
    --colorBrandForeground2: #A7BCE2 !important;

    --colorBrandForegroundLink: #84A4DB !important;
    --colorBrandForegroundLinkHover: #A7BCE2 !important;
    --colorBrandForegroundLinkPressed: #6D92D5 !important;
    --colorBrandForegroundLinkSelected: #84A4DB !important;

    --colorBrandBackground2: #101723 !important;
    --colorBrandBackground2Hover: #162031 !important;
    --colorBrandBackground2Pressed: #1C2940 !important;

    --colorCompoundBrandForeground1: #84A4DB !important;
    --colorCompoundBrandForeground1Hover: #A7BCE2 !important;
}

/* Apply the college UI typeface to plain markup outside Fluent components too. */
html,
body {
    font-family: var(--applyFontBody);
}

/* ============================================================
   Campus banner face — OPT-IN ONLY.
   Tomarik Brush / Bebas Neue are display faces with poor small-size
   legibility (WCAG 2.2 AA applies — public-sector service). This class
   belongs on hero/banner headlines only, rendered at >=28px; page
   titles, form labels, buttons, navigation and all body copy stay on
   --applyFontBody. Lives here (not scoped CSS) because the face and
   letter-spacing switch with data-campus-theme on <body>.
   ============================================================ */
.banner-heading {
    font-family: var(--applyFontBanner);
    /* Both banner faces ship a single 400 weight — a heavier value would
       synthesise an ugly faux-bold, especially on the brush script. */
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: var(--applyBannerLetterSpacing, normal);
}