@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-surface-on);
}

/* 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;
}

:root { --brutal-text-scale: 1; }
:root[data-a11y-scale="large"]      { font-size: 140%; --brutal-text-scale: 1.4; }
:root[data-a11y-scale="very-large"] { font-size: 180%; --brutal-text-scale: 1.8; }

:root[data-a11y-contrast="high"] .brutal-theme-root.brutal-theme-root--light {
    --brutal-color-bg: #ffffff;
    --brutal-color-fg: #000000;
    --brutal-color-bg-2: #000000;
    --brutal-color-fg-2: #ffffff;
    --brutal-color-primary: #ffd400;
    --brutal-color-secondary: #0035ad;
    --brutal-color-tertiary: #000000;
    --brutal-color-fg-muted: #000000;
    --brutal-color-fg-disabled: #5a5a5a;
    --brutal-color-fg-placeholder: #2a2a2a;
}

:root[data-a11y-contrast="high"] .brutal-theme-root.brutal-theme-root--dark {
    --brutal-color-bg: #000000;
    --brutal-color-fg: #ffffff;
    --brutal-color-bg-2: #ffffff;
    --brutal-color-fg-2: #000000;
    --brutal-color-primary: #ffd400;
    --brutal-color-secondary: #80b2ff;
    --brutal-color-tertiary: #ffffff;
    --brutal-color-fg-muted: #ffffff;
    --brutal-color-fg-disabled: #aaaaaa;
    --brutal-color-fg-placeholder: #d0d0d0;
}

:root[data-a11y-contrast="high"] .brutal-theme-root :where(.brutal-card, .brutal-dialog, .brutal-dropdown__menu, .brutal-snackbar, .brutal-text-input__field, .brutal-textarea__field, .brutal-button, .brutal-icon-button, .brutal-chip, .brutal-badge) {
    border-width: 2px;
}

.brutal-theme-root :where(button, a, input, select, textarea, [role="button"], [role="link"], [role="menuitem"], [role="option"], [role="tab"], [tabindex]:not([tabindex="-1"])) {
    scroll-margin-top: var(--brutal-appbar-height, 5rem);
}

@media (prefers-reduced-motion: reduce) {
    .brutal-theme-root *,
    .brutal-theme-root *::before,
    .brutal-theme-root *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    .brutal-theme-root :where(.brutal-card, .brutal-dialog, .brutal-dialog__backdrop, .brutal-dropdown__menu, .brutal-menu__panel, .brutal-snackbar, .brutal-popover, .brutal-toggle__track, .brutal-text-input, .brutal-textarea, .brutal-select, .brutal-chip, .brutal-badge, .brutal-tabs__tab, .brutal-button, .brutal-icon-button) {
        border: 1px solid CanvasText;
    }
    .brutal-theme-root :where(.brutal-card, .brutal-dialog, .brutal-button, .brutal-icon-button, .brutal-chip, .brutal-snackbar) {
        box-shadow: none;
    }
    .brutal-theme-root :focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
}