@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

.brutal-theme-root *,
.brutal-theme-root *::before,
.brutal-theme-root *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.brutal-theme-root ::selection {
    background: var(--brutal-color-primary);
    color: var(--brutal-color-fg);
}

/* Hide the focus outline on programmatically-focused, non-tabbable elements.
   Blazor's <FocusOnNavigate Selector="h1" /> sets tabindex="-1" on the H1 and
   focuses it after each route change so screen readers announce the new page.
   That's a documented a11y feature — but the visible focus rectangle is a
   sighted-only artefact. tabindex="-1" elements are NEVER reachable via
   keyboard Tab, so suppressing :focus on them removes no keyboard a11y signal.
   Kept narrow on purpose: real interactive controls (button/a/input) keep
   their browser-default :focus and :focus-visible outlines. */
.brutal-theme-root [tabindex="-1"]:focus {
    outline: none;
}