/* ============================================================================
   UDS brand tokens — sampled from the udsww.com marketing homepage (2026-07-09).
   Single source of truth for the Blazor staff app, the public accept page, and
   the QuestPDF quote template. Deliberate visual marker of new-tech vs old-tech.
   (Do NOT adopt #1863dc — that is the WordPress theme's default link colour,
   not a brand colour.)
   ============================================================================ */
:root {
    --uds-navy:        #01054c; /* nav / hero surfaces            */
    --uds-navy-deep:   #00044b; /* gradient foot of navy surfaces */
    --uds-red:         #e51d3a; /* brand red — top bar / logo     */
    --uds-cta:         #ea1e00; /* CTA red-orange — "Request a Quote" */
    --uds-ink:         #212121; /* body text                      */
    --uds-secondary:   #777777; /* muted text                     */
    --uds-grey-100:    #f4f4f4;
    --uds-grey-200:    #ebebeb;
    --uds-white:       #ffffff;

    --uds-font-head: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --uds-font-body: 'Roboto', 'Segoe UI', system-ui, sans-serif;
}

html, body {
    font-family: var(--uds-font-body);
    color: var(--uds-ink);
    background-color: var(--uds-grey-100);
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: var(--uds-font-head);
    font-weight: 600;
    color: var(--uds-navy);
}

a, .btn-link {
    color: var(--uds-red);
}

a:hover {
    color: var(--uds-cta);
}

.btn-primary {
    color: #fff;
    background-color: var(--uds-navy);
    border-color: var(--uds-navy-deep);
}

.btn-primary:hover {
    background-color: var(--uds-navy-deep);
    border-color: var(--uds-navy-deep);
}

/* Small status pill used for the prototype/mode marker */
.uds-badge {
    display: inline-block;
    font-family: var(--uds-font-head);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--uds-grey-200);
    color: var(--uds-secondary);
}

.uds-badge.dev {
    background: rgba(229, 29, 58, 0.12);
    color: var(--uds-red);
}

/* Optional diagonal red stripe accent (brand motif) */
.uds-stripe {
    height: 3px;
    background: repeating-linear-gradient(
        135deg,
        var(--uds-red) 0, var(--uds-red) 14px,
        transparent 14px, transparent 24px);
}