/* The sign in and sign up pages, in the product's own blue.
 *
 * WHY A SHEET RATHER THAN EDITING THE PAGES. Both are Argon, and Argon's
 * primary is a violet — #5e72e4, with a #825ee4 gradient on the panel and the
 * buttons. Every blue in the product is #1B5EA9: the landing page, the
 * workspace, the reports, the upgrade page. The two pages between the landing
 * page and the workspace were the only violet left in the journey, which is
 * the worst place for it — they are what somebody sees between being sold the
 * thing and using it.
 *
 * Repainting the framework's primary here changes every control at once,
 * including the states (hover, active, focus, disabled), rather than hunting
 * class attributes through two templates and missing one. It is loaded after
 * argon-dashboard.css and touches nothing else.
 *
 * THE COLOURS ARE THE PALETTE'S. They are written out rather than read from
 * ui-tokens.css because that file also carries a dark palette, behind
 * :root:not([data-theme="light"]) — and these two pages do not pin the theme,
 * so importing it would flip them to the dark set on a machine set to dark.
 * A test checks these values against the tokens file so the two cannot drift.
 */

:root {
    --auth-blue: #1B5EA9;        /* --accent      */
    --auth-blue-ink: #0D3B6E;    /* --accent-ink  */
    --auth-blue-soft: #E8F0FA;   /* --accent-soft */
    --auth-blue-line: #BDD4EC;   /* --accent-line */
}

/* Bootstrap 5 builds every button state from these, so setting them is enough
   for hover, active, focus and disabled to follow. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--auth-blue);
    --bs-btn-border-color: var(--auth-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--auth-blue-ink);
    --bs-btn-hover-border-color: var(--auth-blue-ink);
    --bs-btn-focus-shadow-rgb: 27, 94, 169;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--auth-blue-ink);
    --bs-btn-active-border-color: var(--auth-blue-ink);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--auth-blue);
    --bs-btn-disabled-border-color: var(--auth-blue);
}

/* Argon paints its buttons with a gradient of its own, which wins over the
   variables above. */
.btn.bg-gradient-primary,
.bg-gradient-primary {
    background-image: linear-gradient(310deg, var(--auth-blue-ink) 0%, var(--auth-blue) 100%);
}
.btn.bg-gradient-primary {
    color: #fff;
}

/* The panel beside the form carries a photograph with a tinted mask over it. */
.mask.bg-gradient-primary {
    background-image: linear-gradient(310deg, var(--auth-blue-ink) 0%, var(--auth-blue) 100%);
}

/* Links and the "text gradient" Argon uses for them. background-clip:text is
   what makes the gradient show through the letters; a flat colour needs the
   clip turned off or the text renders transparent. */
.text-primary {
    color: var(--auth-blue) !important;
}
.text-primary.text-gradient,
.text-gradient.text-primary {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--auth-blue);
    color: var(--auth-blue) !important;
}
a.text-primary:hover,
a.text-primary:focus {
    color: var(--auth-blue-ink) !important;
    -webkit-text-fill-color: var(--auth-blue-ink);
}

/* A field the person is typing in, and the navigation's outline button. */
.form-control:focus {
    border-color: var(--auth-blue-line);
    box-shadow: 0 0 0 2px rgba(27, 94, 169, .15);
}

.bg-primary { background-color: var(--auth-blue) !important; }
.border-primary { border-color: var(--auth-blue) !important; }

/* The honeypot on the signup form. Hidden every way a browser understands, so
   that a script reading the DOM still finds it and a person never does. Not
   `display:none` alone: some form fillers skip those, and the point is that
   this one gets filled. */
.signup-website {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}