/* =============================================================
   DTFtransfers palette, applied to the sell.* FRONT DOOR only.

   Loaded LAST, and only by index.html and create-account.html. That matters twice over: the
   header's own --blue tokens live in dtf-site-header.css and are re-declared here, which only
   works if this file comes after it; and nod.css declares --nod-blue on :root where the whole
   dashboard reads it, so those are re-declared under .auth-body instead. Justin asked for the
   front door only, "not including dashboard yet", and scoping by that body class means a
   dashboard page cannot pick this up even by accident.

   Remapping the old tokens rather than chasing individual selectors is what makes this small:
   the Sign in button, Forgot password, the mobile back link and the header badge all follow
   from the remap. Only hardcoded blues need naming explicitly, at the bottom.
   ============================================================= */

/* ---- tokens, from Justin 2026-07-29 ----
   The BRAND ramp, gradients and glows now live in nod.css :root, because every surface loads that
   file and the dashboard needs them too. Only the pieces below stay here: they use generic names
   (--ink, --bg, --line) that would collide with the ones dtf-site-header.css declares for itself,
   so they are deliberately confined to the two pages that load this file. */
:root{
  --brand-magenta:#D91E6A;       /* track-03 eyebrow; not used by the dashboard */

  /* Ink */
  --ink:#2B2B2B;
  --ink-80:rgba(43,43,43,0.85);
  --ink-70:rgba(43,43,43,0.72);
  --ink-65:rgba(43,43,43,0.68);
  --ink-60:rgba(43,43,43,0.62);
  --ink-35:rgba(43,43,43,0.34);

  /* Surfaces */
  --bg:#FFFFFF;
  --bg-sunken:#F7F7F8;
  --bg-warm:#FFF6EF;
  --bg-neutral:#F1F1F1;
  --ink-inverse-bg:#101011;      /* dark footer / CTA band */

  /* Lines */
  --line:rgba(43,43,43,0.10);
  --line-soft:rgba(43,43,43,0.08);
  --line-strong:rgba(43,43,43,0.18);

  /* Utility */
  --success:#21AF70;
  --highlight:#F9DE43;
}

/* ---- remap the header's tokens (this file is front-door only, so this is safe) ---- */
:root{
  --blue:var(--brand-red);         /* solid accent */
  --blue-dark:var(--brand-link);   /* text/link weight: #D9481A clears AA on white */
  --blue-soft:var(--bg-warm);
}

/* ---- front-door-only token overrides ----
   The three --nod-blue* tokens are NOT here any more: nod.css resolves them warm globally now, so
   repeating them would be a second place to keep in sync. What stays is front-door specific: the
   warm neutrals and the sunken page surround that the hero wash needs. */
.auth-body{
  /* --bg-warm rather than the global translucent wash: on the front door this is a flat tint on
     known-white surfaces, where a translucent red reads muddy */
  --nod-blue-soft:var(--bg-warm);
  --nod-ink:var(--ink);
  --nod-ink-soft:var(--ink-70);
  --nod-line:var(--line);
  /* the page surround behind the inset panel: --bg-sunken is what lets the panel read as a
     panel at all, since the panel itself is a warm off-white */
  --nod-bg:var(--bg-sunken);
}

/* ---- the hero panel ----
   Two corner-anchored washes over white, per Justin's reference: peach down the left edge, pink
   in the top-right, white through the middle. The palette has no wash tokens, so the tints are
   --brand-orange and --brand-pink at low alpha rather than new hexes, which keeps them tied to
   the brand ramp.

   Each wash fades to its OWN hue at alpha 0, never to `transparent`. `transparent` computes as
   rgba(0,0,0,0), so engines interpolate through black and the midpoint of the fade goes muddy
   and grey instead of staying warm.

   The base layer is opaque --bg, so this fully covers the body background underneath and the
   two never double-paint. Below 990 the same rule catches the mobile hero, which nod.css paints
   with a hardcoded gradient the token remap cannot reach. */
.auth-body .auth-brand,
.auth-body .auth-split{
  background:
    radial-gradient(ellipse 55% 62% at 0% 38%,
      rgba(255,138,43,.20) 0%, rgba(255,138,43,0) 72%),
    radial-gradient(ellipse 52% 46% at 97% 0%,
      rgba(255,46,134,.17) 0%, rgba(255,46,134,0) 70%),
    var(--bg);
  color:var(--ink);
}
@media (min-width:990px){
  /* no border: the panel is full bleed to the left, right and bottom edges, so there is no
     surround for a hairline to sit against. The header's own bottom hairline is the only edge. */
  .auth-body .auth-brand{background:none;}   /* .auth-split carries the surface across both columns */
}
/* the decorative circle was a white-on-blue highlight; on a near-white surface it is invisible */
.auth-body .auth-brand::after{display:none;}

/* ---- pitch copy: was white on blue, now ink on warm ---- */
.auth-body .auth-brand-h,
.auth-body .path-h{color:var(--ink);}
.auth-body .auth-brand-sub,
.auth-body .path-sub{color:var(--ink-70);opacity:1;}
.auth-body .path-list li{color:var(--ink);}
.auth-body .path-list li svg{color:var(--brand-red);}   /* primary accent */

/* ---- pills ----
   Justin 2026-07-29, from a reference image: a pill is the brand gradient with white copy, not
   an outlined chip. The tag pills already carry the pill radius and the uppercase/letterspaced
   type from dtf-auth-panel.css, so only the fill and the ink change here. */
.auth-body .path-tag{
  background:var(--grad-brand);
  border:0;
  color:var(--bg);
}

/* The composite form from the same reference: one gradient pill holding a lighter inset tag on
   the left and a sentence after it. Not used on the front door yet; it is here so the pattern
   has one definition when it does get placed.
     <span class="dtf-pill"><span class="dtf-pill__tag">Blind-shipped</span>Every order leaves
     plain, your customer only sees you</span> */
.dtf-pill{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.34rem .95rem .34rem .34rem;
  border-radius:999px;
  background:var(--grad-brand);
  color:var(--bg);
  font-size:14px;font-weight:600;line-height:1.35;
}
.dtf-pill__tag{
  display:inline-flex;align-items:center;flex:0 0 auto;
  padding:.3rem .62rem;border-radius:999px;
  /* translucent white rather than a second colour, so the tag reads against the gradient
     wherever along it the pill happens to sit */
  background:rgba(255,255,255,.26);
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}

/* ---- guarantee strip: white card on the warm panel ---- */
.auth-body .auth-guars{background:var(--bg);border:1px solid var(--line);}
.auth-body .auth-guars li{color:var(--ink);}
.auth-body .auth-guars li svg{color:var(--brand-red);}

/* ---- buttons: the brand gradient, with the palette's own glow ---- */
.auth-body .auth-btn,
.hd .btn-primary{
  background:var(--grad-brand);
  color:var(--bg);
  border-color:transparent;
  box-shadow:var(--glow-orange);
}
.auth-body .auth-btn:hover,
.hd .btn-primary:hover{background:var(--grad-heat);box-shadow:var(--glow-red);}
.hd .btn-ghost:hover{border-color:var(--brand-red);color:var(--brand-link);}

/* mobile hero CTAs: primary takes the gradient, its sibling stays a hairline ghost */
@media (max-width:989.98px){
  .auth-body .auth-brand-btn--primary{
    background:var(--grad-brand);color:var(--bg);box-shadow:var(--glow-orange);
  }
  .auth-body .auth-brand-btn--ghost{
    background:transparent;color:var(--ink);border:1px solid var(--line-strong);
  }
}

/* ---- the Sign in / Create account segmented control ----
   Justin: whichever tab is selected uses the new colours. nod.css makes the active tab a white
   pill with ink text, which carries no brand at all, so it becomes the same gradient the pills
   use. The track goes to --bg-neutral rather than --bg-sunken so it still reads as a track
   under a gradient chip. */
.auth-body .auth-tabs{background:var(--bg-neutral);}
.auth-body .auth-tab{color:var(--ink-70);}
.auth-body .auth-tab.is-on{
  background:var(--grad-brand);
  color:var(--bg);
  /* deliberately NOT --glow-orange: at 24px blur it bleeds well outside a 4px-padded track and
     reads as a smudge. Same hue, tight enough to stay inside the control. */
  box-shadow:0 2px 8px rgba(255,57,76,.30);
}

/* ---- links ---- */
.auth-body .auth-forgot,
.auth-body .auth-back,
.auth-body .auth-form a{color:var(--brand-link);}
.auth-body .auth-forgot:hover,
.auth-body .auth-back:hover,
.auth-body .auth-form a:hover{color:var(--brand-link-hover);}

/* ---- hardcoded blues the token remap cannot reach ---- */
.auth-body .auth-addrcard{border-color:var(--line);}
.auth-body .dtfhd-card-badge{
  background:var(--bg-warm);
  border-color:var(--line);
  color:var(--brand-eyebrow);
}