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

/* Placeholders are hints, not content.
   The browser default is dark enough that an example sentence reads as
   something already typed — which is exactly what happened with the status
   note. Lighter and italic so it's unmistakable at a glance. */
::placeholder {
    color: #a4a8ad;
    opacity: 1;          /* Firefox dims placeholders again on top of the colour */
    font-style: italic;
}

/* ── customer-facing palette ───────────────────────────────────────────
   Taken off 14point7solutions.com so a customer arriving from the website
   lands somewhere that looks like the same company.

   Defined here rather than per page because CSS custom properties cascade
   through Blazor's scoped styles — the layout sets the surface, every
   customer page inherits it, and there's one place to change it.        */

.customer-surface {
    --page:     #38383b;   /* site background */
    --band:     #000000;   /* header band */
    --card:     #2b2b2e;   /* raised surface */
    --card-2:   #232326;   /* recessed surface */

    --ink:      #f0f0ee;
    --ink-2:    #b4b6b9;
    --ink-3:    #85888c;

    --rule:     #434347;
    --rule-2:   #3a3a3e;

    /* The AFR sweep off the logo — rich orange through to lean green.
       Same ramp the staff board uses, brightened for a dark surface. */
    --rich:     #e2571f;
    --stoich:   #e8a317;
    --lean:     #8dbb2e;

    --rich-bg:  #3a231b;
    --stoich-bg:#3a2f18;
    --lean-bg:  #253119;

    --accent:   #e2571f;
    --steel:    #e2571f;   /* legacy name, same accent */
}

/* Droid Sans is what the website sets its headings in. */
.customer-surface h1,
.customer-surface h2,
.customer-surface h3 {
    font-family: "Droid Sans", Barlow, system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.005em;
}