/* True Guardian portal theme assets. Phase 2 of the UI refresh, issue #33.
 *
 * Three jobs:
 *   1. Declare the self-hosted Space Grotesk faces so no page load reaches a
 *      third-party font host. The K-12 and government base is the reason.
 *   2. Publish the brand accent once as a custom property.
 *   3. Carry the two rules MudTheme cannot express: the document font-family,
 *      which app.css otherwise wins, and the nav link weight.
 *
 * Everything else about the palette lives in Theme/PortalTheme.cs. Rebranding
 * app.css and removing Bootstrap are Phase 3 and are not touched here.
 *
 * Space Grotesk 400, 500 and 700, latin subset, from @fontsource/space-grotesk
 * 5.3.0. Licensed under the SIL Open Font License 1.1, which permits
 * redistribution; the licence text ships beside the files at
 * wwwroot/fonts/SpaceGrotesk-LICENSE.txt.
 */

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
}

/* Brand accent, published once.
 *
 * #0C74ED is TG Blue. It is a non-text accent only: icons, active bars and
 * borders, which WCAG 1.4.11 governs at 3:1. It is deliberately NOT the
 * Primary palette slot, because at body text size it fails 1.4.3. Action Blue
 * #0B66D0 carries text and filled buttons and lives in PortalTheme.Primary.
 * See issue #33 acceptance criterion 3.
 *
 * The remaining tokens are the accessibility overlay from the component spec.
 * No component reads them yet: the consumers land in Phase 3 (CSS baseline),
 * Phase 4 (shell and the incident banner) and Phase 7 (component sweep). They
 * are declared now so a Phase 4 author reaches for a token instead of pasting a
 * hex, and each one carries its computed ratio so the value is not re-derived
 * from memory later.
 *
 * --tg-lockdown-fill is half of a pair by design: white on #D50000 is 5.484:1,
 * so the banner's text colour is plain white and needs no token. Anything
 * consuming this fill must use white, not --mud-palette-error-text.
 */
:root {
    --tg-accent: #0C74ED;
    --tg-link-dark: #60A5FA;
    --tg-lockdown-fill: #D50000;
    --tg-banner-amber-text: #111111;
    --tg-chip-text-amber: #92400E;

    /* Deliberately a literal, not var(--mud-palette-primary), even though the
     * two values match today. They encode different constraints: Primary is
     * #0B66D0 because it must clear 4.5:1 as text on Surface, and this token is
     * #0B66D0 because it must clear 4.5:1 against a light chip tint. Aliasing
     * couples two unrelated requirements, and Phase 8 repoints
     * --mud-palette-primary at a dark-mode value the spec says has not been
     * re-derived, which would silently retarget chip text. A literal is also
     * greppable against the spec, which names this value directly. Reverted
     * after Tier 3 round 2.
     *
     * The number is a ceiling, not a verified pair. #0B66D0 is 5.489:1 on pure
     * white and any tint lowers it. The spec calls the background tg-blue-soft
     * and gives no hex, and no --tg-blue-soft exists yet, so the real ratio
     * cannot be computed until the phase that builds chips defines the tint.
     * Whoever does that owes the check. Flagged by Tier 3 round 3. */
    --tg-chip-text-blue: #0B66D0;
}

/* Reclaim the document font.
 *
 * MudBlazor sets `body { font-family: var(--mud-typography-default-family) }`,
 * and that is the only route by which a nav link, an input or any raw markup
 * gets the theme font: .mud-nav-link declares no family, and inputs inherit.
 * App.razor loads MudBlazor.min.css first, then bootstrap.min.css, then
 * app.css, whose line 2 sets a Helvetica stack on html and body. Equal
 * specificity, later sheet wins, so without this rule Space Grotesk would
 * reach only elements carrying a .mud-typography-* class and everything else
 * would stay on Helvetica. This file loads after app.css, so it wins that pair.
 *
 * The fallback stack inside var() is load-bearing, not decoration.
 * --mud-typography-default-family is emitted at runtime by MudThemeProvider,
 * which is a component, so the property does not exist until that component
 * renders. A var() with no fallback referencing an undefined property is
 * invalid at computed value time, and because font-family inherits and html has
 * no parent, it would resolve to the browser default serif rather than falling
 * back to app.css, and html would land on the initial value, which is serif.
 * That is worse than the Helvetica this rule replaces.
 *
 * Scope of the risk, corrected after Tier 3 round 3. It is narrower than an
 * earlier draft of this comment claimed. MudThemeProvider emits its variables
 * with PseudoCss.Scope defaulting to :root, so the property is document-global
 * rather than scoped to the provider's subtree, and the provider prerenders, so
 * the style block is in the initial HTML. The error UI and the reconnect overlay
 * sit in that same document and do reach the variable. The fallback covers the
 * genuinely undefined case, not those two surfaces. It stays because MudBlazor's
 * own body rule has no fallback either, and a var() that resolves to nothing
 * fails to serif rather than to the previous stack.
 *
 * Caught by Tier 3 round 1 (the cascade) and round 2 (the missing fallback).
 * Note this file is not the last stylesheet App.razor links: the scoped bundle
 * TrueGuardianWeb.Portal.styles.css loads after it and wins on specificity as
 * well as order, so a component-scoped html or body rule would still beat this.
 * Phase 3 removes Bootstrap and rebrands app.css, after which this rule is
 * belt-and-braces rather than load-bearing. Keep it either way. */
html,
body {
    font-family: var(--mud-typography-default-family, "Space Grotesk", system-ui, "Segoe UI", Roboto, Arial, sans-serif);
}

/* Nav links at weight 500, per the spec's "UI and nav 500".
 *
 * Not reachable from MudTheme.Typography: there is no nav typo, and MudBlazor
 * hardcodes .mud-nav-link { font-weight: 400 } as a bare class selector, so this
 * wins on later-sheet order at equal specificity.
 *
 * Two things this does not do, both surfaced by Tier 3 round 2 and both left for
 * Phase 4, which owns the rail. MudBlazor already ships
 * .mud-nav-link.active { font-weight: 500 !important }, so this is a no-op on
 * active links and it removes the weight difference that used to distinguish
 * active from resting; the !important also means Phase 4 needs its own to raise
 * active weight further. And Sidenav renders search-result records (user, site,
 * building and pendant names) as MudNavLink, so those data rows move to 500 too. */
.mud-nav-link {
    font-weight: 500;
}