/* ════════════════════════════════════════════════════════════
   SIQA Auth — Signal System overrides
   Loaded AFTER auth-editorial.css, on the 9 smaller standalone
   auth pages (magic link, verification, password reset). Repins
   auth-editorial.css's own :root tokens from ink-on-paper to the
   dark Signal System (Void / Iris / Halo) used by the landing page.

   auth-editorial.css is entirely var()-driven, so most of the file
   updates for free from the repin below. The exceptions are the
   handful of selectors where --paper/--ink each carry TWO opposite
   roles (surface color in one place, text-on-the-opposite-surface
   in another) — those need explicit overrides, listed after the
   token block.
   ════════════════════════════════════════════════════════════ */

:root {
  /* --paper's dominant role in this file is TEXT on the (always-dark)
     left panel — logo, headline, metric values, testimonial name.
     Repinning it to white fixes those for free. The 2 places where
     --paper was a BACKGROUND (body, .auth-right) are overridden below. */
  --paper:       #ffffff;
  --paper-deep:  #1c1930;   /* subtle raised surface (mobile-proof, hovers) -> Void-3 */
  --paper-card:  #141222;   /* .auth-card background -> Void-2 */

  /* --ink's dominant role is SURFACE (left panel bg, button fills).
     The few TEXT-on-paper uses (.auth-card's own title/input text,
     mobile-proof value) are overridden below. */
  --ink:         #0b0a14;
  --ink-soft:    rgba(255,255,255,.64);
  --ink-faint:   rgba(255,255,255,.40);

  --rule:        rgba(255,255,255,.14);
  --rule-soft:   rgba(255,255,255,.08);

  --signal:      #593be2;    /* Iris — already correct */
  --signal-deep: #9272fa;    /* was the darken-for-light-bg shade -> Halo, brighten-for-dark-bg */
  --signal-lite: #9272fa;    /* was "signal on ink" -> same idea, Halo */

  --good:        #2fbf8f;
  --bad:         #f0446c;
  --good-soft:   rgba(47,191,143,.12);
  --warn-soft:   rgba(240,68,108,.10);

  --serif: 'Clash Display', 'Instrument Sans', sans-serif;
  --sans:  'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;
}

/* body used --paper as background AND --ink as text color — both flip
   polarity, so this needs to be fully explicit rather than rely on the
   repin (which would otherwise land on white-bg/void-text, backwards). */
body { background: #0b0a14; color: #ffffff; }
::selection { background: rgba(89,59,226,.32); color: #fff; }

/* Signal doesn't use the editorial paper-grain texture. */
body::before { content: none; }

/* .auth-right used --paper as its background; the repin above optimizes
   --paper for its (more common) text role, so this needs an explicit fix. */
.auth-right { background: #0b0a14; }

/* .auth-left used --ink as background, which the repin already sends to
   Void — correct on its own. But its border used the SAME --ink token,
   so left and right panels would share one seam-less color once both are
   dark. Give the left panel a touch of depth and a visible line-dark seam. */
.auth-left { background: #141222; border-right-color: #262347; }

/* .auth-card's border used --ink (repins to Void -> invisible against the
   Void-2 card and Void right-panel). Use the Signal hairline instead, and
   swap the hard offset shadow for the glow family used everywhere else. */
.auth-card {
  border-color: #262347;
  box-shadow: 0 0 0 1px #262347, 0 20px 60px rgba(0,0,0,.35), 0 0 40px rgba(146,114,250,.08);
}

/* Text that sits on the (now-dark) right panel/card and previously used
   --ink for its dark-on-paper role. */
.auth-form-title,
.input,
.auth-metric-val,          /* already !important white on the left panel via --paper repin; listed for clarity, no-op */
.auth-mobile-proof .mp-val {
  color: #ffffff;
}
.auth-mobile-proof .mp-val { color: #ffffff !important; }

/* .input's BACKGROUND also used --paper (surface role, not the text role
   the repin above optimizes for) — left alone it renders a plain white
   box with (now white-on-white, invisible) text. Give it an explicit dark
   fill, with the focus state lifting to the already-correct Void-2 card
   tone and an Iris border instead of the (now-invisible) --ink border. */
.input { background: #0b0a14; }
.input:focus,
.input:focus-visible {
  border-color: #593be2;
}

/* Both logo-mark classes were designed as plain sizing/radius boxes
   around an <img>, with no background of their own — but every one of
   these templates fills them with a bare text glyph ("S") instead, so
   they rendered as unstyled text with no chip behind it. Give them the
   same ramp-gradient monogram treatment used by the Group A pages. */
.auth-logo-mark,
.auth-form-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b28a2 0%, #593be2 45%, #9272fa 100%);
  color: #ffffff;
  font-family: var(--serif);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(146,114,250,.4), 0 4px 16px rgba(146,114,250,.35);
}
.auth-logo-mark { font-size: 16px; }
.auth-form-logo-mark { font-size: 19px; }

/* Testimonial avatar chip used --paper (bg) + --ink (text) — a plain
   white-on-void chip would look flat; give it the Iris fill used by every
   other avatar/monogram chip in the Signal System. */
.auth-testimonial-avatar { background: #593be2; color: #ffffff; }

/* Checked checkbox used --ink for its fill, which the repin sends to Void
   — invisible against the already-void page. An accent fill is also the
   more conventional "checked" affordance. */
.auth-checkbox-label input[type="checkbox"]:checked {
  background-color: #593be2;
  border-color: #593be2;
}

/* Primary buttons used flat --ink for their fill; give them the Signal
   ramp instead, and brighten (not darken) on hover. */
.auth-btn--primary,
.btn-primary {
  background: linear-gradient(135deg, #3b28a2 0%, #593be2 45%, #9272fa 100%);
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(146,114,250,.35);
}
.auth-btn--primary:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, #3b28a2 0%, #593be2 45%, #9272fa 100%);
  border-color: transparent;
  filter: brightness(1.1);
  box-shadow: 0 6px 28px rgba(146,114,250,.5);
}
.auth-btn--primary:active { box-shadow: 0 2px 12px rgba(146,114,250,.3); }

/* Ghost buttons: --ink border/hover already repin correctly to a visible
   hairline, but hover previously used --paper-card (now Void-2, fine) —
   left as-is. Icon-circle status badges (--good) already repin correctly. */

@media (prefers-reduced-motion: reduce) {
  .auth-btn__spinner { animation-duration: 1.4s !important; }
}