/**
 * Wire 3 brand-guide layer — Customer Hub + captive pages ONLY.
 *
 * Scope note: this file is loaded by hub.ejs, login.ejs, captive.ejs and
 * captive_thankyou.ejs. It is deliberately NOT loaded by /app, /hub-app or any
 * order form — those run the vendored wire3-shared token system (/shared/css/tokens/*),
 * which is maintained upstream and must not be re-pointed at this file.
 *
 * Two jobs:
 *   1. Publish the 251113-WIRE3-BrandGuides-V5 palette + type as tokens.
 *   2. Re-point Bootstrap (Bootswatch Flatly) at them. Flatly ships slate #2c3e50 as
 *      "primary", teal #18bc9c as "success"/link and blue #3498db as "info"; the hub
 *      uses .text-primary/.btn-primary/.text-info ~50 times, so without this remap the
 *      majority of the hub renders in Bootswatch's stock palette, not Wire 3's.
 *
 * Load order: AFTER bootstrap.flatly.min.css (so the :root remap wins) and BEFORE
 * theming.css (which now derives its --wire3-* aliases from the tokens here).
 */

/* ============================================================
   1. Brand guide tokens — the guide's own values, verbatim.
   ============================================================ */
:root {
    /* --- Primary --- */
    --w3-navy-night: #092349;   /* PMS 2768 C */
    --w3-lightspeed: #8DC63F;   /* PMS 368 C  — accent/graphics; not small text on light */
    --w3-icon-green: #599E10;   /* PMS 369 C  — guide: graphic elements on LIGHT backgrounds only */

    /* Horizon Gradient (guide primary gradient) */
    --w3-horizon-from: #363AA9; /* PMS 2736 C */
    --w3-horizon-to:   var(--w3-navy-night);
    --w3-horizon: linear-gradient(135deg, var(--w3-horizon-from) 0%, var(--w3-horizon-to) 100%);

    /* --- Secondary --- */
    --w3-lunar-purple: #F3F3F7; /* PMS 663 C  — page/neutral ground */
    --w3-aurora:       #CBF4BA; /* PMS 7486 C — soft green tint */

    /* rgb triplets, for rgba() washes and Bootstrap's *-rgb hooks */
    --w3-navy-night-rgb: 9, 35, 73;
    --w3-lightspeed-rgb: 141, 198, 63;
    --w3-icon-green-rgb: 89, 158, 16;

    /* --- Derived steps (NOT in the guide; interpolated at the guide's hue) ---
       Needed for hover/active/depth. Kept here so nothing hand-picks a near-navy. */
    --w3-navy-900: #061A37;  /* navy hover  */
    --w3-navy-950: #04122A;  /* navy active */
    --w3-navy-700: #153D79;  /* navy raised / rules on dark */
    --w3-navy-line: #345079;
    --w3-lightspeed-dk: #7DB833;  /* lightspeed hover  */
    --w3-lightspeed-lt: #9BD055;  /* lightspeed active */
    --w3-icon-green-dk: #4A840D;
    /* Neutral text/UI grey, hued toward Navy Night rather than Flatly's teal-grey
       #95a5a6 (2.6:1 on white — it fails as body text and clashes with Lunar Purple). */
    --w3-grey: #5A6478;      /* 6.0:1 on white, 5.4:1 on Lunar Purple */
    --w3-grey-dk: #4B5468;

    /* --- Type --- */
    --w3-font-head: 'Saira Semi Condensed', 'Saira Condensed', 'Roboto Condensed', Roboto, Arial, sans-serif;
    --w3-font-body: Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================
   2. Bootstrap remap — :root hooks.
   The utility classes .text-primary/.text-info/.text-success read the *-rgb
   triplets, so remapping them here fixes every one of those call sites.
   ============================================================ */
:root {
    --bs-primary: var(--w3-navy-night);
    --bs-primary-rgb: var(--w3-navy-night-rgb);
    --bs-success: var(--w3-lightspeed);
    --bs-success-rgb: var(--w3-lightspeed-rgb);
    /* .text-info is used as a muted-informational voice on light ground; Flatly's
       #3498db is off-brand, and Lightspeed can't carry small text on white
       (2.0:1), so info resolves to Navy Night's raised step. */
    --bs-info: var(--w3-navy-700);
    --bs-info-rgb: 21, 61, 121;

    --bs-body-font-family: var(--w3-font-body);
    --bs-font-sans-serif: var(--w3-font-body);

    /* Flatly links are teal. Navy Night reads as the hub's link colour and clears
       AA comfortably on both white and Lunar Purple (15.6:1 / 14.1:1). */
    --bs-link-color: var(--w3-navy-night);
    --bs-link-color-rgb: var(--w3-navy-night-rgb);
    --bs-link-hover-color: var(--w3-navy-700);
}

/* ============================================================
   3. Bootstrap remap — component classes.
   Flatly writes literal hex into each button and background rule rather than
   reading the :root tokens, so these have to be restated. Contrast ratios are
   noted where a pairing was changed for accessibility rather than for colour
   alone. (Careful with comments in this file: a literal star-slash inside one
   closes it early and silently eats the rule that follows.)
   ============================================================ */

/* Primary = Navy Night */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--w3-navy-night);
    --bs-btn-border-color: var(--w3-navy-night);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--w3-navy-900);
    --bs-btn-hover-border-color: var(--w3-navy-900);
    --bs-btn-focus-shadow-rgb: var(--w3-navy-night-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--w3-navy-950);
    --bs-btn-active-border-color: var(--w3-navy-950);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--w3-navy-night);
    --bs-btn-disabled-border-color: var(--w3-navy-night);
}
.btn-outline-primary {
    --bs-btn-color: var(--w3-navy-night);
    --bs-btn-border-color: var(--w3-navy-night);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--w3-navy-night);
    --bs-btn-hover-border-color: var(--w3-navy-night);
    --bs-btn-focus-shadow-rgb: var(--w3-navy-night-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--w3-navy-night);
    --bs-btn-active-border-color: var(--w3-navy-night);
    --bs-btn-disabled-color: var(--w3-navy-night);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--w3-navy-night);
}

/* Success = Lightspeed Green. Flatly puts WHITE on its success fill; white on
   Lightspeed is 2.0:1 and fails even the large-text bar, so the label is Navy
   Night (7.6:1) — the guide's own pairing for green fills. */
.btn-success {
    --bs-btn-color: var(--w3-navy-night);
    --bs-btn-bg: var(--w3-lightspeed);
    --bs-btn-border-color: var(--w3-lightspeed);
    --bs-btn-hover-color: var(--w3-navy-night);
    --bs-btn-hover-bg: var(--w3-lightspeed-dk);
    --bs-btn-hover-border-color: var(--w3-lightspeed-dk);
    --bs-btn-focus-shadow-rgb: var(--w3-lightspeed-rgb);
    --bs-btn-active-color: var(--w3-navy-night);
    --bs-btn-active-bg: var(--w3-lightspeed-lt);
    --bs-btn-active-border-color: var(--w3-lightspeed-lt);
    --bs-btn-disabled-color: var(--w3-navy-night);
    --bs-btn-disabled-bg: var(--w3-lightspeed);
    --bs-btn-disabled-border-color: var(--w3-lightspeed);
}
/* Outlined on light ground: Icon Green is the guide's light-background green. */
.btn-outline-success {
    --bs-btn-color: var(--w3-icon-green);
    --bs-btn-border-color: var(--w3-icon-green);
    --bs-btn-hover-color: var(--w3-navy-night);
    --bs-btn-hover-bg: var(--w3-lightspeed);
    --bs-btn-hover-border-color: var(--w3-lightspeed);
    --bs-btn-focus-shadow-rgb: var(--w3-lightspeed-rgb);
    --bs-btn-active-color: var(--w3-navy-night);
    --bs-btn-active-bg: var(--w3-lightspeed);
    --bs-btn-active-border-color: var(--w3-lightspeed);
    --bs-btn-disabled-color: var(--w3-icon-green);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--w3-icon-green);
}

/* Info = the Navy Night raised step (see the --bs-info note above). */
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--w3-navy-700);
    --bs-btn-border-color: var(--w3-navy-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--w3-navy-night);
    --bs-btn-hover-border-color: var(--w3-navy-night);
    --bs-btn-focus-shadow-rgb: var(--w3-navy-night-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--w3-navy-900);
    --bs-btn-active-border-color: var(--w3-navy-900);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--w3-navy-700);
    --bs-btn-disabled-border-color: var(--w3-navy-700);
}
.btn-outline-info {
    --bs-btn-color: var(--w3-navy-700);
    --bs-btn-border-color: var(--w3-navy-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--w3-navy-700);
    --bs-btn-hover-border-color: var(--w3-navy-700);
    --bs-btn-focus-shadow-rgb: var(--w3-navy-night-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--w3-navy-700);
    --bs-btn-active-border-color: var(--w3-navy-700);
    --bs-btn-disabled-color: var(--w3-navy-700);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--w3-navy-700);
}

/* Backgrounds: Flatly hardcodes the RGBA here, so the class needs restating. */
.bg-primary { background-color: rgba(var(--w3-navy-night-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-bg-primary { color: #fff !important; background-color: rgba(var(--w3-navy-night-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-info { background-color: rgba(21, 61, 121, var(--bs-bg-opacity, 1)) !important; }
.text-bg-info { color: #fff !important; background-color: rgba(21, 61, 121, var(--bs-bg-opacity, 1)) !important; }
.border-primary { border-color: var(--w3-navy-night) !important; }

/* Muted text: Flatly's #95a5a6 is 2.6:1 on white, which is not a legible secondary
   voice, and its teal cast fights the Lunar Purple neutrals. */
.text-muted { color: var(--w3-grey) !important; }

/* Secondary buttons: same teal-grey, restated on the navy-derived neutral. */
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--w3-grey);
    --bs-btn-border-color: var(--w3-grey);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--w3-grey-dk);
    --bs-btn-hover-border-color: var(--w3-grey-dk);
    --bs-btn-focus-shadow-rgb: var(--w3-navy-night-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--w3-grey-dk);
    --bs-btn-active-border-color: var(--w3-grey-dk);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--w3-grey);
    --bs-btn-disabled-border-color: var(--w3-grey);
}
.btn-outline-secondary {
    --bs-btn-color: var(--w3-grey);
    --bs-btn-border-color: var(--w3-grey);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--w3-grey);
    --bs-btn-hover-border-color: var(--w3-grey);
    --bs-btn-focus-shadow-rgb: var(--w3-navy-night-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--w3-grey);
    --bs-btn-active-border-color: var(--w3-grey);
    --bs-btn-disabled-color: var(--w3-grey);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--w3-grey);
}

/* Alerts. Bootswatch Flatly does NOT drive these off the --bs-alert-* variables:
   it adds `.alert{color:#fff;border:none}` plus a literal `background-color` per
   variant, so the fill has to be restated the same way. Solid-fill-with-white-text
   is Flatly's alert style and is kept where the fill is dark enough to carry white.

   alert-danger keeps Bootstrap's semantics — the brand guide has no error colour and
   a red warning should not be re-hued into the palette. */
.alert-primary { background-color: var(--w3-navy-night); }
.alert-info { background-color: var(--w3-navy-700); }      /* white on this is 10.6:1 */
.alert-secondary { background-color: var(--w3-grey); }     /* white on this is 6.0:1  */

/* White on Lightspeed is 2.0:1, so a green alert carries Navy Night text (7.6:1). */
.alert-success { background-color: var(--w3-lightspeed); color: var(--w3-navy-night); }
.alert-success .alert-link, .alert-success .alert-heading { color: var(--w3-navy-night); }

/* Caution notices. Flatly fills these with #f39c12 and leaves `.alert{color:#fff}`
   on top, which is 2.1:1 — the copy is barely readable, and a full-bleed saturated
   amber slab is the loudest thing on a page whose message is usually "heads up, this
   is reversible". The guide has no caution colour, so this is a deliberately quiet
   treatment: a pale amber ground carrying Navy Night text (13.1:1) with a saturated
   amber rule down the leading edge doing the signalling. Deeper amber than Flatly's
   so the rule still reads as caution next to the navy. */
.alert-warning {
    background-color: #FDF4E8;
    color: var(--w3-navy-night);
    border: 1px solid #C77700;
}
.alert-warning .alert-link, .alert-warning .alert-heading { color: var(--w3-navy-night); }

/* Pre-existing Flatly defect, not a brand change: `.alert{color:#fff}` over
   .alert-light's #ecf0f1 fill is 1.15:1 — the text is effectively invisible. Lunar
   Purple with Navy Night text is 14.1:1. */
.alert-light {
    background-color: var(--w3-lunar-purple);
    color: var(--w3-navy-night);
}
.alert-light .alert-link, .alert-light .alert-heading { color: var(--w3-navy-night); }

/* Badges on a green fill take Navy Night, not white — same 2.0:1 problem. */
.badge.text-bg-success, .badge.text-bg-lime { color: var(--w3-navy-night) !important; }

/* Disabled fields: Flatly's #ecf0f1 is a teal-tinted grey that reads as a different
   neutral family from the Lunar Purple ground. */
.form-control:disabled, .form-select:disabled { background-color: var(--w3-lunar-purple); }

/* Focus ring picks up the brand rather than Flatly's teal. */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--w3-lightspeed);
    box-shadow: 0 0 0 .25rem rgba(var(--w3-lightspeed-rgb), .3);
}
.form-check-input:checked {
    background-color: var(--w3-icon-green);
    border-color: var(--w3-icon-green);
}

/* ============================================================
   4. Typography — the guide's ladder.
   Saira Semi Condensed for headings, Roboto for body copy and H5.
   Sizes follow the guide (H1 64 / H2 48 / H3 24 bold / H4 24 light /
   H5 20 Roboto Black / body 16 Roboto Regular), expressed in rem against the
   hub's 16px root so the existing responsive down-scaling still applies.
   ============================================================ */
body {
    font-family: var(--w3-font-body);
    font-size: 1rem;          /* 16px */
    font-weight: 400;
}
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.card-title, .page-title, .navbar-brand, .alert-heading {
    font-family: var(--w3-font-head);
}
h1, .h1 { font-size: 4rem;   font-weight: 400; }   /* 64px */
h2, .h2 { font-size: 3rem;   font-weight: 400; }   /* 48px */
h3, .h3 { font-size: 1.5rem; font-weight: 700; }   /* 24px bold  */
h4, .h4 { font-size: 1.5rem; font-weight: 300; }   /* 24px light */
h5, .h5 {
    font-family: var(--w3-font-body);
    font-size: 1.25rem;                            /* 20px */
    font-weight: 900;                              /* Roboto Black */
}
h6, .h6 { font-family: var(--w3-font-body); font-weight: 700; }

/* The guide's H1/H2 are page-display steps. A heading that sits INSIDE a component
   is not display type — it keeps the component's own scale, or a 48px <h2> lands in
   the middle of a dunning alert. The family still changes; only the size is held. */
.alert-heading, .modal-title, .offcanvas-title,
.card-header > h2:not([class*="-title"]), .card-header > h3:not([class*="-title"]) {
    font-size: 2rem;
}
h5.alert-heading, .h5.alert-heading { font-size: 1.25rem; }
h4.alert-heading, .h4.alert-heading { font-size: 1.5rem; }

/* Display type steps down on phones so a hero heading can't overflow its column. */
@media screen and (max-width: 767px) {
    h1, .h1 { font-size: 2.5rem; }   /* 40px */
    h2, .h2 { font-size: 2rem; }     /* 32px */
    .alert-heading, .modal-title, .offcanvas-title { font-size: 1.5rem; }
}

/* ============================================================
   5. Green-on-ground accessibility.
   Lightspeed is 2.0:1 on white — the guide flags exactly this and points at Icon
   Green for light backgrounds. So .text-lime resolves to Icon Green by default
   (3.3:1 — AA for the bold/large text it is actually used on) and reverts to
   Lightspeed inside navy panels, where it is 7.6:1.
   ============================================================ */
.text-lime { color: var(--w3-icon-green) !important; }
a.text-lime:hover, a.text-lime:active { color: var(--w3-icon-green-dk) !important; }
.bg-blue .text-lime,
.bg-primary .text-lime,
.navbar-dark .text-lime,
.text-bg-primary .text-lime {
    color: var(--w3-lightspeed) !important;
}
.bg-blue a.text-lime:hover,
.bg-primary a.text-lime:hover,
.navbar-dark a.text-lime:hover {
    color: var(--w3-aurora) !important;
}