/* Global base only. Every page and component carries its own scoped CSS, so
   this file stays deliberately small — anything that lives here applies
   everywhere and is hard to see when it goes wrong. */

html, body {
    /* Barlow is a grotesk with DIN-ish proportions — the family that ends up
       on signage, plates and instrument faces. Barlow Condensed carries
       headings and car names. One superfamily, two clearly different widths. */
    font-family: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: #edeeec;
    color: #16181a;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { text-wrap: balance; }

a { color: #2b3138; }

/* Keyboard focus stays visible everywhere. Removing it is the commonest
   accessibility mistake and it only ever hurts the people using a keyboard. */
:focus-visible { outline: 2px solid #2b3138; outline-offset: 2px; }

h1:focus { outline: none; }

/* Form validation, styled once rather than per page. */

.valid.modified:not([type=checkbox]) { outline: 1px solid #5b8f11; }

.invalid { outline: 1px solid #cc4318; }

.validation-message { color: #cc4318; font-size: 13px; }

/* Blazor's own error strip. Kept close to the app's palette so it doesn't
   look like it came from somewhere else when it appears. */

.blazor-error-boundary {
    background: #fbe8e1;
    border: 1px solid #edc0ac;
    border-radius: 4px;
    padding: 14px 16px;
    color: #8a2f10;
}

.blazor-error-boundary::after {
    content: "Something went wrong on this page.";
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}