/* Join HAF — the bridge onto the HAF brand.
 *
 * The page keeps its own colour names so none of its layout rules had to be
 * rewritten; this file just says what each of those names now means in terms
 * of the brand tokens. Because the tokens flip with the theme, the whole page
 * flips with it too, and day stays the default.
 *
 * Loaded AFTER the page's own <style> block, so these win.
 */

:root {
  /* one orange, not two: the old --or2 highlight was off-guideline */
  --or:     var(--haf-orange);
  --or2:    var(--haf-orange);
  --grey:   var(--haf-grey);

  --bg:     var(--haf-bg);
  --panel:  var(--haf-surface);
  --panel2: var(--haf-surface-2);
  --text:   var(--haf-ink);
  --mut:    var(--haf-ink-muted);
  --line:   var(--haf-line);
  --line2:  var(--haf-line-strong);

  --shadow: var(--haf-shadow);
  --soft:   var(--haf-shadow-soft);
  --gn:     var(--haf-positive);
}

body {
  font-family: var(--haf-font);
  font-weight: var(--haf-weight-body);
}

h1, h2, h3 {
  font-family: var(--haf-font-display);
  font-weight: var(--haf-weight-display);
}

/* The page set numerals in Montserrat by name. Point them at the token so the
   day Gotham swap reaches them too. */
.price b, .net .npx b, .rung .rp, .summary .amt {
  font-family: var(--haf-font-display);
}

/* The hero wash was tuned for a cream page; at night the grey half of it is
   invisible and the orange half is too hot. Re-mix it per theme. */
body {
  background:
    radial-gradient(circle at top left,  rgba(241, 142, 0, .13), transparent 34%),
    radial-gradient(circle at top right, rgba(47, 55, 62, .06),  transparent 30%),
    var(--bg);
}
:root[data-theme="night"] body {
  background:
    radial-gradient(circle at top left,  rgba(241, 142, 0, .16), transparent 34%),
    radial-gradient(circle at top right, rgba(244, 241, 235, .05), transparent 30%),
    var(--bg);
}

/* Anything sitting ON the orange takes white, per the brand sheet. The page
   used a near-black here, which fails contrast and reads as a third colour. */
.step.on i,
.tag.pop,
.btn-primary {
  color: #ffffff;
}

/* Flat orange, no gradient — the guideline is one solid Pantone 151c. */
.tag.pop,
.btn-primary {
  background: var(--haf-orange);
}
.btn-primary:hover { background: var(--haf-orange-hover); }

/* ---- header ------------------------------------------------------------ */
/* The old header drew a gradient square with a letter H in it. That is not the
   logo. It is now the real lockup, which recolours itself with the theme. */
.hd .bar { gap: 14px; }
.hd .haf-logo { height: 30px; flex: 0 0 auto; }
.hd .haf-logo svg { height: 100%; width: auto; display: block; }
.hd .strap {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mut);
  font-weight: 700;
  border-left: 1px solid var(--line);
  padding-left: 14px;
  line-height: 1.3;
}
.hd .spacer { margin-left: auto; }

@media (max-width: 460px) {
  .hd .strap { display: none; }
}

/* ---- HAF Pay (pay.html, index.html) ------------------------------------ */
/* These two were built before the rest and carry their own names, including a
   third orange (var(--haf-orange)) that is in no guideline. They also use a solid dark
   header bar rather than the sticky translucent one, so everything here is
   scoped to those pages — the join pages must not pick it up. */
[data-haf-page="pay"] {
  --ink:   var(--haf-ink);
  --paper: var(--haf-bg);
  --or:    var(--haf-orange);
  --mut:   var(--haf-ink-muted);
  --gn:    var(--haf-positive);
  --line:  var(--haf-line);
}
[data-haf-page="pay"] body {
  background: var(--haf-bg);
  color: var(--haf-ink);
  font-family: var(--haf-font);
}
[data-haf-page="pay"] .hd { background: var(--haf-grey); color: #ffffff; }
[data-haf-page="pay"][data-theme="night"] .hd { background: var(--haf-surface-2); }
[data-haf-page="pay"] .hd .haf-logo { color: #ffffff; height: 26px; }
[data-haf-page="pay"] .hd .haf-logo svg { height: 100%; width: auto; display: block; }
[data-haf-page="pay"] .badge,
[data-haf-page="pay"] .b { background: var(--haf-orange); color: #ffffff; }
[data-haf-page="pay"] p { color: var(--haf-ink-muted); }

/* The holding page has no header bar: give its mark a height to grow into,
   and let the page breathe under the dark bar on the payment page. */
[data-haf-page="pay"] .haf-logo { height: 34px; }
[data-haf-page="pay"] .hd + * { margin-top: 22px; }