/*! WarmStart brand override. Loaded only when BRAND=warmstart (layouts/base.html, layouts/auth.html),
 * after tokens.css / app.css / auth.css, so it re-points their tokens and changes no selector's shape.
 * Palette: Ink #14213A replaces the navy grounds, Warm orange #EB6B30 replaces the gold accent.
 * Contrast (WCAG, measured): ink on white 16.05, white on ink 16.05, white on #1f3158 12.82,
 * sunrise #F2A24A on ink 7.68, ink on orange 5.10, orange on ink 5.10, on-dark muted on ink 7.79.
 * Orange on white is 3.14: fills, borders, icons and large text only, NEVER small text. */

:root {
  /* app tokens (tokens.css) */
  --navy:      #14213a;
  --navy-2:    #1f3158;
  --navy-3:    #2a4070;
  --navy-line: #3a5080;
  --brand-500: #eb6b30;
  --brand-700: #14213a;   /* brand TEXT on light grounds is ink, never orange */
  --brand-050: #fdf1ea;
  --brand-100: #f9dccb;
  --focus-ring: rgba(235, 107, 48, 0.4);
  --chart-1: #14213a;
  --chart-2: #1f3158;
  --chart-3: #4a6190;
  --chart-4: #8a9bbb;
  --chart-5: #eb6b30;
  --chart-6: #f2a24a;
  --chart-7: #f6e3cc;
  --ink-900: #14213a;
  /* sign-in tokens (auth.css) */
  --gold: #eb6b30;
  --ink: #14213a;
}

/* ---- app chrome ---- */
.sidebar-logo-ws { display: block; width: 144px; height: auto; margin: 2px auto 4px; }

/* ---- sign-in ---- */
.brand { padding-bottom: 64px; background: #12203a; }   /* = the reveal video's decoded ground (sRGB-tagged encode), so no seam */
.seal { max-width: 760px; }
/* The reveal frame carries a soft glow on near-ink; feathering poster and clip into the panel hides the frame edge. */
.seal img, .seal video { -webkit-mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); }
.tagline { margin: 28px 0 0; max-width: 560px; text-align: center; color: #fff; font-size: 24px; line-height: 1.25; font-weight: 600; }
.brand-foot { justify-content: flex-end; }
.brand-foot b { color: #f2a24a; }

.ws-mark { display: block; width: 44px; height: 44px; margin: 0 0 18px; }
input:focus { border-color: #eb6b30; box-shadow: 0 0 0 3px rgba(235, 107, 48, 0.4); }
.eye:focus-visible { outline: 2px solid #eb6b30; }
.cta:hover { background: #1f3158; box-shadow: inset 0 -3px 0 #eb6b30; }
.cta:focus-visible { outline: 3px solid #eb6b30; outline-offset: 2px; }
.remember input { accent-color: #eb6b30; }
.links a, .kicker { color: #1f3158; }

@media (max-width: 767px) {
  .brand { padding: 22px 16px 18px; }
  .seal { max-width: 360px; }
  .tagline { display: none; }
}