/* PayMidWare shared theme: Lapis & Gold. Load order on every site: pmw-tokens.css (the brand colors and font stacks, exactly as supplied with the
   logo kit), pmw-fonts.css, then this file, then (Portal and Register only) pmw-bootstrap.css, then the site's own small stylesheet.

   This file holds everything that is the same on every PayMidWare site: a few supplemental tokens the kit does not define (text on the primary color,
   success/danger tints, radius, shadow, focus ring, and the dark-mode values for them), the base typography, the light/dark toggle button and the logo
   swap. Nothing here is a second palette: every color is a --pmw-* token or built from one.

   Dark mode: the visitor's device decides until they use the toggle. pmw-theme.js sets data-theme="light" or "dark" on <html> before the page paints. If
   scripts are blocked, the @media block below applies the same dark values when the device prefers dark and no data-theme is set. The values in that
   block, in [data-theme="dark"] below, and in pmw-tokens.css must agree; the test suite (PmwThemeTests) fails if they drift. */

:root {
  --pmw-on-primary: #FFFFFF;
  --pmw-primary-hover: #162E73;
  --pmw-fill-primary: #1D3B8F;
  --pmw-success-tint: #E1F2EB;
  --pmw-danger-tint: #F8E4E5;
  --pmw-input-border: color-mix(in srgb, var(--pmw-muted) 65%, var(--pmw-surface));
  --pmw-radius-sm: 6px;
  --pmw-radius: 10px;
  --pmw-radius-lg: 14px;
  --pmw-shadow: 0 1px 2px rgba(15, 22, 38, .06), 0 6px 20px rgba(15, 22, 38, .06);
  --pmw-focus: rgba(58, 95, 208, .38);
  --pmw-nav-bg: #0F1626;
  --pmw-code-bg: #0F1626;
  --pmw-code-text: #EEF1F7;
  color-scheme: light;
}

[data-theme="dark"] {
  --pmw-tint: #1E2B4F;
  --pmw-accent-tint: #3A2D12;
  --pmw-accent-ink: #E6B85C;
  --pmw-success: #4FBF97;
  --pmw-warning: #E3A24B;
  --pmw-danger: #EF7A80;
  --pmw-on-primary: #0F1626;
  --pmw-primary-hover: #A9BBF5;
  --pmw-fill-primary: #3A5FD0;
  --pmw-success-tint: #12352A;
  --pmw-danger-tint: #3B1B1E;
  --pmw-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .3);
  --pmw-focus: rgba(107, 135, 232, .55);
  --pmw-nav-bg: #182238;
  --pmw-code-bg: #0B111D;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pmw-bg: #0F1626;
    --pmw-surface: #182238;
    --pmw-border: #26324D;
    --pmw-text: #EEF1F7;
    --pmw-muted: #A3ADC2;
    --pmw-primary: #6B87E8;
    --pmw-primary-2: #A9BBF5;
    --pmw-accent: #E6B85C;
    --pmw-tint: #1E2B4F;
    --pmw-accent-tint: #3A2D12;
    --pmw-accent-ink: #E6B85C;
    --pmw-success: #4FBF97;
    --pmw-warning: #E3A24B;
    --pmw-danger: #EF7A80;
    --pmw-on-primary: #0F1626;
    --pmw-primary-hover: #A9BBF5;
    --pmw-fill-primary: #3A5FD0;
    --pmw-success-tint: #12352A;
    --pmw-danger-tint: #3B1B1E;
    --pmw-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .3);
    --pmw-focus: rgba(107, 135, 232, .55);
    --pmw-nav-bg: #182238;
    --pmw-code-bg: #0B111D;
    color-scheme: dark;
  }
}

/* Base */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--pmw-font-body);
  background: var(--pmw-bg);
  color: var(--pmw-text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--pmw-font-display);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--pmw-text);
}
a { color: var(--pmw-primary); text-underline-offset: .15em; }
a:not([class]):hover { color: var(--pmw-primary-hover); }
code, kbd, samp, pre, .font-monospace { font-family: var(--pmw-font-mono); }
code { color: var(--pmw-text); background: var(--pmw-tint); padding: .08em .35em; border-radius: 4px; font-size: .9em; }
pre { background: var(--pmw-code-bg); color: var(--pmw-code-text); border-radius: var(--pmw-radius); padding: 1rem; overflow-x: auto; }
pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
/* A pre that a page gives its own utility background (bg-light, bg-body-tertiary, bg-white, ...) is no longer the dark code panel above, so it must not keep that panel's pale text:
   pale text on the light theme's light backgrounds is invisible. Explicitly dark utility backgrounds keep the pale text. */
pre[class*="bg-"] { color: var(--pmw-text); }
pre.bg-dark, pre.bg-black { color: var(--pmw-code-text); }
hr { border-color: var(--pmw-border); }
::selection { background: var(--pmw-tint); color: var(--pmw-text); }
:focus-visible { outline: 3px solid var(--pmw-focus); outline-offset: 2px; }

/* Logo swap: put both lockups in the page (full for light backgrounds, reversed for dark ones) and let the theme choose. */
.pmw-logo-dark { display: none; }
[data-theme="dark"] .pmw-logo-light { display: none; }
[data-theme="dark"] .pmw-logo-dark { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .pmw-logo-light { display: none; }
  :root:not([data-theme]) .pmw-logo-dark { display: inline-block; }
}

/* Light/dark toggle (markup in each site's _ThemeToggle partial; behaviour in pmw-theme.js). The sun shows in dark mode (click for light) and the moon in light mode. */
.pmw-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
  background: transparent; color: inherit;
  border: 1px solid var(--pmw-border); border-radius: var(--pmw-radius);
  cursor: pointer; line-height: 1;
}
.pmw-theme-toggle:hover { background: var(--pmw-tint); }
.pmw-theme-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pmw-theme-toggle .pmw-icon-sun { display: none; }
[data-theme="dark"] .pmw-theme-toggle .pmw-icon-sun { display: block; }
[data-theme="dark"] .pmw-theme-toggle .pmw-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .pmw-theme-toggle .pmw-icon-sun { display: block; }
  :root:not([data-theme]) .pmw-theme-toggle .pmw-icon-moon { display: none; }
}
/* Without script there is nothing for the button to do. */
.no-js .pmw-theme-toggle { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
  :root { --pmw-bg: #fff; --pmw-surface: #fff; --pmw-text: #000; --pmw-muted: #333; }
  .pmw-theme-toggle { display: none !important; }
  .pmw-logo-dark { display: none !important; }
  .pmw-logo-light { display: inline-block !important; }
}