/* archgrille.com's look (taken from the live site and its /quotes form, 2026-10-14): Avenir Next LT Pro from Arch Grille's
   Adobe Fonts kit, deep blue #44526a, almost-black #2b2b2b headings, a warm beige page with the form on white, square
   corners, uppercase display headings and small letter-spaced labels.
   Shown when <html data-ag-theme="archgrille"> (App.razor, Services/SiteThemes.cs). The tokens come first; the rules
   after them only where a token can't say it (Bootstrap's components, a few sizes). Every selector starts with
   html[data-ag-theme=archgrille], so it wins over grille-builder.css and the scoped page CSS, which load after it. */
@import url("https://use.typekit.net/hvp7fny.css");

html[data-ag-theme=archgrille] {
    --ag-font: "avenir-next-lt-pro", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ag-surface: #fff;
    --ag-paper: #f4f5f6;
    --ag-line: #e5e5e5;
    --ag-text: #44526a;
    --ag-muted: #6b6f76;
    --ag-ink: #2b2b2b;
    --ag-navy: #44526a;
    --ag-on-navy: #fff;
    --ag-accent: #44526a;
    --ag-tint: #eef0f3;
    --ag-danger: #c0392b;
    --ag-d-bar: #44526a;
    --ag-d-cross: #a9b1bf;
    --ag-radius-sm: 0;
    --ag-radius: 0;
    --ag-radius-lg: 0;
    --ag-radius-xl: 0;
    --ag-display-weight: 400;
    --ag-display-transform: uppercase;
    --ag-display-tracking: .01em;
    --ag-heading-weight: 600;
    --ag-label-transform: uppercase;
    --ag-label-tracking: .04em;

    /* Bootstrap, so its buttons, fields, badges and alerts match */
    --bs-body-font-family: var(--ag-font);
    --bs-body-color: #44526a;
    --bs-body-color-rgb: 68, 82, 106;
    --bs-emphasis-color: #2b2b2b;
    --bs-emphasis-color-rgb: 43, 43, 43;
    --bs-heading-color: #2b2b2b;
    --bs-secondary-color: #6b6f76;
    --bs-secondary-color-rgb: 107, 111, 118;
    --bs-border-color: #e5e5e5;
    --bs-tertiary-bg: #f4f5f6;
    --bs-tertiary-bg-rgb: 244, 245, 246;
    --bs-primary: #44526a;
    --bs-primary-rgb: 68, 82, 106;
    --bs-primary-text-emphasis: #2b3445;
    --bs-primary-bg-subtle: #eef0f3;
    --bs-primary-border-subtle: #c7ccd5;
    --bs-link-color: #44526a;
    --bs-link-color-rgb: 68, 82, 106;
    --bs-link-hover-color: #2b2b2b;
    --bs-link-hover-color-rgb: 43, 43, 43;
    --bs-focus-ring-color: rgba(68, 82, 106, .25);
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
}

/* ---- page: beige, the quote on a white panel like the site's own form ---- */
html[data-ag-theme=archgrille] body {
    font-family: var(--ag-font);                        /* app.css sets the body font itself */
    background: #f2f1ef;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html[data-ag-theme=archgrille] .rfq {
    padding: clamp(1rem, 3vw, 2.5rem);
    background: var(--ag-surface);
}

html[data-ag-theme=archgrille] .rfq-head {
    border-bottom: 1px solid var(--ag-line);
}

html[data-ag-theme=archgrille] .rfq-head h1 {
    font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem);
    line-height: 1.15;
}

/* ---- step bar: the site's step names are small uppercase labels ---- */
html[data-ag-theme=archgrille] .bg-rail-text > span:first-child {
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

html[data-ag-theme=archgrille] .bg-label {
    font-size: .75rem;
}

html[data-ag-theme=archgrille] .bg-zoom-backdrop {
    background: rgba(43, 43, 43, .75);
}

html[data-ag-theme=archgrille] .bg-drawing-note {
    background: var(--ag-tint);
    border-left-color: var(--ag-navy);
}

/* ---- buttons: square, medium weight, deep blue ---- */
html[data-ag-theme=archgrille] .btn {
    --bs-btn-font-weight: 500;
}

html[data-ag-theme=archgrille] .btn-primary,
html[data-ag-theme=archgrille] .btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #44526a;
    --bs-btn-border-color: #44526a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #343f52;
    --bs-btn-hover-border-color: #343f52;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2b2b2b;
    --bs-btn-active-border-color: #2b2b2b;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #44526a;
    --bs-btn-disabled-border-color: #44526a;
    --bs-btn-focus-shadow-rgb: 68, 82, 106;
}

html[data-ag-theme=archgrille] .btn-outline-primary {
    --bs-btn-color: #44526a;
    --bs-btn-border-color: #44526a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #44526a;
    --bs-btn-hover-border-color: #44526a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #343f52;
    --bs-btn-active-border-color: #343f52;
    --bs-btn-disabled-color: #44526a;
    --bs-btn-disabled-border-color: #44526a;
    --bs-btn-focus-shadow-rgb: 68, 82, 106;
}

html[data-ag-theme=archgrille] .btn-outline-secondary,
html[data-ag-theme=archgrille] .btn-light {
    --bs-btn-color: #44526a;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #c9ced6;
    --bs-btn-hover-color: #2b2b2b;
    --bs-btn-hover-bg: #f4f5f6;
    --bs-btn-hover-border-color: #44526a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #44526a;
    --bs-btn-active-border-color: #44526a;
    --bs-btn-disabled-color: #8a8f97;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #e5e5e5;
    --bs-btn-focus-shadow-rgb: 68, 82, 106;
}

html[data-ag-theme=archgrille] .bg-3d-tools .btn-light {
    border-color: var(--ag-line);
}

/* ---- fields: the site's grey fill ---- */
html[data-ag-theme=archgrille] .form-control,
html[data-ag-theme=archgrille] .form-select,
html[data-ag-theme=archgrille] .input-group-text {
    color: var(--ag-ink);
    background-color: var(--ag-paper);
    border-color: var(--ag-line);
}

html[data-ag-theme=archgrille] .input-group-text {
    color: var(--ag-muted);
}

html[data-ag-theme=archgrille] .form-control:focus,
html[data-ag-theme=archgrille] .form-select:focus,
html[data-ag-theme=archgrille] .form-check-input:focus {
    background-color: #fff;
    border-color: #44526a;
    box-shadow: 0 0 0 .2rem rgba(68, 82, 106, .18);
}

html[data-ag-theme=archgrille] .form-check-input:checked {
    background-color: #44526a;
    border-color: #44526a;
}

html[data-ag-theme=archgrille] .form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2344526a'/%3e%3c/svg%3e");
}

html[data-ag-theme=archgrille] .form-control::placeholder {
    color: #8a8f97;
}