/* ----------------------------------------------------------------------------
   manueltgomes login theme
   Ligaro Task: 1fd06aa0 — self-hosted Keycloak trial

   Tokens copied from the site's own design system so the hosted login screen
   reads as part of the site:
     src/packages/sardine_site_shared/.../static/css/variables.css  (palette)
     src/product/manueltgomes/site/.../static/css/core.css          (typography)

   Fonts are served FROM THIS THEME rather than from the site. auth.<domain> and
   the site are different origins, so pulling them from the site would add a
   cross-origin dependency plus CORS to the login page — the one page that must
   still render when the site is down.

   Layered over keycloak.v2 (PatternFly v5). Where a PatternFly custom property
   exists we set that rather than overriding component rules, because the
   variable is upstream's supported extension point and survives their CSS
   being restructured.
   ---------------------------------------------------------------------------- */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-700.woff2') format('woff2');
}

/* --- Site tokens, mapped onto PatternFly's ------------------------------- */

:root {
  /* --button-primary-{bg,hover} in variables.css. The button text colour is a
     token of its own (--button-primary-text) rather than a hardcoded white,
     because it FLIPS: white on the dark green in light mode, near-black on the
     light green in dark mode. */
  --mtg-primary: #3d8350;  /* token: --button-primary-bg */
  --mtg-primary-hover: #2d5a3d;  /* token: --button-primary-hover */
  --mtg-on-primary: #FFFFFF;  /* token: --button-primary-text */
  --mtg-paper: #f3f2ec;

  /* THE CARD AND THE FIELDS ARE DIFFERENT SURFACES, and that is the whole
     reason the fields read as fields. The site draws its subscribe card on
     --bg-primary and insets the input on --bg-secondary
     (.sidebar-subscribe / .sidebar-subscribe-input in article.css). This theme
     previously used ONE surface for both, so on a dark card the inputs were the
     same colour as the thing they sat on and survived only on their border.
     Keep these two tokens distinct in both modes. */
  --mtg-surface: #FFFFFF;  /* token: --bg-primary */
  --mtg-input-bg: #F5F5F5;  /* token: --bg-secondary */

  --mtg-text: #0B0B0B;  /* token: --text-primary */
  --mtg-text-secondary: #374151;  /* token: --text-secondary */
  --mtg-link: #1a6b36;
  --mtg-border: #D1D1D1;  /* token: --border-primary */
  --mtg-border-focus: var(--mtg-primary);

  /* --radius-sm / --radius-lg. Controls are 4px and the card is 12px on the
     site, so a 6px control was subtly wrong against every button the visitor
     had already seen. */
  --mtg-radius-control: 4px;  /* token: --radius-sm */
  --mtg-radius-md: 8px;  /* token: --radius-md */
  --mtg-radius-card: 12px;  /* token: --radius-lg */

  /* --spacing-xs / -sm / -md / -xl off the 8px scale in variables.css. */
  --mtg-space-xs: 8px;  /* token: --spacing-xs */
  --mtg-space-sm: 16px;  /* token: --spacing-sm */
  --mtg-space-md: 24px;  /* token: --spacing-md */
  --mtg-space-xl: 40px;  /* token: --spacing-xl */

  /* Control height. The site's own subscribe input is 28px, which is right for
     a sidebar widget and too cramped for a login form you type a password
     into, so this is the ONE measurement not copied literally. 40px keeps the
     field and the submit button the same height, which is the stacked shape of
     the site card; every other metric (padding, radius, border, gap, font) is
     the site's value. */
  --mtg-control-height: 40px;

  /* --font-size-sm. The site's widget input is --font-size-xs (12px), which is
     sidebar-scale; a login form is the page's whole purpose, so it takes the
     next step up, which is the size the site's own BUTTON uses. */
  --mtg-font-size-sm: 0.875rem;  /* token: --font-size-sm */

  /* State colours — variables.css --color-{error,warning,success,info}.
     Each one does double duty on the alert: it is both the 1px border and,
     at 10%, the wash behind it, exactly as article.css does
     (background: rgba(<state>, 0.1); border-color: var(--color-<state>)).
     The tints are computed with color-mix from the token rather than stored as
     a second set of literals, so the border and its wash cannot drift apart —
     the site's own newer pattern, documented on .sidebar-subscribe-icon.
     Below Baseline color-mix degrades to transparent, which leaves the 1px
     state border carrying the meaning on the card background. */
  --mtg-error: #E74C3C;  /* token: --color-error */
  --mtg-warning: #F39C12;  /* token: --color-warning */
  --mtg-success: #27AE60;  /* token: --color-success */
  --mtg-info: #3498DB;  /* token: --color-info */
  --mtg-font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* PatternFly v5 globals. Setting these recolours most components at once. */
  --pf-v5-global--FontFamily--text: var(--mtg-font);
  --pf-v5-global--FontFamily--heading--sans-serif: var(--mtg-font);
  --pf-v5-global--FontFamily--redhatfont--heading--sans-serif: var(--mtg-font);
  --pf-v5-global--FontFamily--redhatfont--text: var(--mtg-font);

  --pf-v5-global--primary-color--100: var(--mtg-primary);
  --pf-v5-global--primary-color--200: var(--mtg-primary-hover);
  --pf-v5-global--active-color--100: var(--mtg-primary);
  --pf-v5-global--link--Color: var(--mtg-link);
  --pf-v5-global--link--Color--hover: var(--mtg-primary-hover);
  --pf-v5-global--BorderColor--100: var(--mtg-border);
  --pf-v5-global--danger-color--100: var(--mtg-error);
  --pf-v5-global--Color--100: var(--mtg-text);
  --pf-v5-global--Color--200: var(--mtg-text-secondary);
}

/* --- Page ---------------------------------------------------------------- */

body,
.login-pf-page,
.pf-v5-c-login {
  font-family: var(--mtg-font);
  background: var(--mtg-paper);
  color: var(--mtg-text);
}

/* keycloak.v2 ships a dark background image on the login page. Clearing it is
   the single biggest visual difference from the site's warm paper background. */
.login-pf body,
body.login-pf-page,
.login-pf-page {
  background-image: none;
}

/* --- Brand header --------------------------------------------------------
   keycloak.v2 renders the realm's display name as plain text here, NOT a logo
   image (`<div id="kc-header-wrapper" class="pf-v5-c-brand">`). That is lucky:
   the site's own brand is a text wordmark too, so this needs no template fork
   and no CSS `content` hack — it stays real, selectable, screen-readable text.
   The wording comes from the realm's Display name field, set to "Manuel T
   Gomes" to match components/header.html.

   ⚠️ The `!important` on color is REQUIRED, not lazy. The parent sets
       color: var(--pf-v5-global--Color--light-100) !important
   i.e. near-white, unconditionally. That happens to look fine on the parent's
   dark background image, but we replaced that with the site's light paper —
   so without this override the wordmark is white-on-#f3f2ec and effectively
   INVISIBLE in light mode. Removing this !important reintroduces that. */

#kc-header-wrapper,
.pf-v5-c-brand {
  font-family: var(--mtg-font);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--mtg-text) !important;
  text-transform: none; /* parent uppercases with 3px letter-spacing */
  padding-bottom: 1.25rem;
}

/* --- Card ----------------------------------------------------------------
   Measured off the site's subscribe card, .sidebar-subscribe in article.css:
   --bg-primary, 1px --border-primary, --radius-lg, --spacing-xl padding, and
   NO shadow. The shadow that used to sit here was this theme's own; the site
   card is flat and separated from the page by its border alone.

   `overflow: hidden` stays. It is what clips the parent's top accent to the
   rounded corner, and while that accent is now switched off, leaving the clip
   in place means a future Keycloak that reintroduces one cannot overhang. */

.pf-v5-c-login__main,
.card-pf {
  background: var(--mtg-surface);
  border: 1px solid var(--mtg-border);
  border-radius: var(--mtg-radius-card);
  overflow: hidden;
  box-shadow: none;
}

/* NO ACCENT BAR. The site's card has none, and with the palette matched it was
   the last thing marking this page as not-the-site. Both switches are set:
   --keycloak-card-top-color is the parent's own supported hook, and the
   border-top below is the rule this theme had added on top of it. Setting only
   one leaves the other drawing a stripe. */
:root {
  --keycloak-card-top-color: transparent;
}

.pf-v5-c-login__main-header {
  border-top: none;
  padding: var(--mtg-space-xl) var(--mtg-space-xl) 0;
}

/* --spacing-xl all round, matching .sidebar-subscribe. PatternFly pads the
   three sections independently rather than the card, so the card padding has
   to be expressed as section padding or the left edge of the fields will not
   line up with the title. */
.pf-v5-c-login__main-body {
  padding: var(--mtg-space-md) var(--mtg-space-xl) var(--mtg-space-xl);
}

/* ZERO, not --spacing-xl. The footer is nested INSIDE __main-body, not a
   sibling of it, so any padding here stacks on the body's: measured, it inset
   the footer content twice (338px of content inside a 418px body) and left
   80px of dead space under the card. The body's padding already provides the
   card's bottom edge. */
.pf-v5-c-login__main-footer {
  padding: 0;
}

.pf-v5-c-login__main-header h1,
#kc-page-title {
  font-family: var(--mtg-font);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  color: var(--mtg-text);
}

/* --- Inputs -------------------------------------------------------------- */

/* Metrics from .sidebar-subscribe-input (article.css): 1px --border-primary,
   --radius-sm, --spacing-sm horizontal padding, --bg-secondary. Height is the
   one deviation — see --mtg-control-height. */
.pf-v5-c-form-control,
.pf-v5-c-form-control > input,
input[type="text"],
input[type="email"],
input[type="password"] {
  font-family: var(--mtg-font);
  border-radius: var(--mtg-radius-control);
  border: 1px solid var(--mtg-border);
  background: var(--mtg-input-bg);
  color: var(--mtg-text);
  font-size: var(--mtg-font-size-sm);
  height: var(--mtg-control-height);
  padding: 0 var(--mtg-space-sm);
  box-sizing: border-box;

  /* PatternFly draws a SECOND bottom border on an ::after pseudo-element —
     measured at 2px in its own blue, rgb(31,167,248) — on top of the 1px box
     above. That is the heavy off-brand underline under every field: a bordered
     box with a stripe beneath it. Zeroing the widths through upstream's own
     custom properties rather than overriding the ::after rule, so a PatternFly
     restructure cannot leave a stray override behind. */
  --pf-v5-c-form-control--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--m-focus--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--m-expanded--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--after--BorderBottomColor: transparent;
}

/* PatternFly nests the real <input> inside .pf-v5-c-form-control, so the rule
   above would otherwise apply the height and padding TWICE and produce a
   40px field containing a 40px field. The inner one fills its parent instead. */
.pf-v5-c-form-control > input {
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
}

/* The gap between stacked controls: --spacing-sm, matching
   .sidebar-subscribe-form. */
.pf-v5-c-form {
  --pf-v5-c-form--GridGap: var(--mtg-space-sm);
}

.pf-v5-c-form__group {
  margin-bottom: 0;
}

/* PatternFly paints the field background on the WRAPPER and leaves the inner
   <input> transparent, so setting the wrapper alone is enough — except that the
   browser repaints an autofilled field with its own colour and wins. Chrome and
   Safari only respect an inset shadow here, not background, which is why this
   is a shadow rather than the obvious declaration. Without it an autofilled
   login field renders pale blue on the dark card. */
.pf-v5-c-form-control > input:-webkit-autofill,
input[type="text"]:-webkit-autofill,
input[type="email"]:-webkit-autofill,
input[type="password"]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--mtg-input-bg) inset;
  -webkit-text-fill-color: var(--mtg-text);
  caret-color: var(--mtg-text);
}

.pf-v5-c-form-control > input::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder {
  color: var(--mtg-text-secondary);
  opacity: 0.7;
}

/* THE RING GOES ON THE WRAPPER ONLY. Outlining the inner <input> as well drew
   TWO rings at different widths — the wrapper is the full field, the input is
   32px narrower because the horizontal padding lives on the wrapper — which
   read as a doubled border on the focused field. The bare input[type=...]
   selectors stay for the screens where Keycloak renders a naked input with no
   PatternFly wrapper. */
.pf-v5-c-form-control:focus-within,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border-color: var(--mtg-border-focus);
  /* Visible focus ring: keyboard users must be able to see where they are, and
     PatternFly's default underline is easy to lose against our lighter card. */
  outline: 2px solid var(--mtg-border-focus);
  outline-offset: 1px;
}

/* The inner input must NOT draw its own ring; the wrapper already has one. */
.pf-v5-c-form-control > input:focus {
  outline: none;
}

.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  font-family: var(--mtg-font);
  font-weight: 600;
  color: var(--mtg-text-secondary);
}

/* Show/hide password toggle.
   PatternFly renders this as a separate button in an input-group, which by
   default gets its own grey fill and its own square corners — so it reads as a
   detached box welded to the side of the field. Making it transparent, sharing
   the field's border, and rounding only the outer edge turns the pair back into
   one control. */

.pf-v5-c-input-group,
.pf-v5-c-input-group__item {
  background: transparent;
}

/* The seam between the field and its toggle is drawn by the __item WRAPPER,
   not by the button inside it — measured at 1px rgb(38,41,45) on the second
   item. Styling only the button leaves the divider standing, which is why the
   pair still read as two boxes after the button's own border-left was removed. */
.pf-v5-c-input-group__item {
  border: none;
}

.pf-v5-c-input-group__item .pf-v5-c-button,
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  /* Same surface as the field it is welded to, so the pair reads as one
     control. On --mtg-surface it read as a separate box parked next to the
     field, which is what it looked like in the dark-mode screenshots. */
  background: var(--mtg-input-bg);
  border: 1px solid var(--mtg-border);
  border-left: none;
  border-radius: 0 var(--mtg-radius-control) var(--mtg-radius-control) 0;
  color: var(--mtg-text-secondary);
  height: var(--mtg-control-height);
  width: auto;
  padding: 0 var(--mtg-space-sm);
}

.pf-v5-c-input-group__item .pf-v5-c-button:hover,
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover {
  background: var(--mtg-border);
  color: var(--mtg-text);
}

/* The field half of that pair must lose its right radius to match, and its
   right border too — that border was the visible seam splitting the field and
   its toggle into two boxes. */
.pf-v5-c-input-group .pf-v5-c-form-control {
  border-radius: var(--mtg-radius-control) 0 0 var(--mtg-radius-control);
  border-right: none;
}

/* Required-field marker: the parent uses a hard red. Ours is the site's error
   token, which is the same colour used for form errors elsewhere on the site. */
.pf-v5-c-form__label-required {
  color: var(--mtg-error);
}

/* --- Buttons ------------------------------------------------------------- */

/* .button + .button--sm as the site resolves them: 2px transparent border,
   --radius-sm, weight 600, --font-size-sm, --spacing-xs/--spacing-sm padding.
   Note --button--sm comes from article.css:2535, which loads AFTER the shared
   components/buttons.css and therefore wins — the shared 8px/16px is not what
   the newsletter card actually renders. */
.pf-v5-c-button {
  font-family: var(--mtg-font);
  font-weight: 600;
  font-size: var(--mtg-font-size-sm);
  border-radius: var(--mtg-radius-control);
  padding: var(--mtg-space-xs) var(--mtg-space-sm);
}

/* The submit button is the one control that matches the field height, so the
   two stack as a pair the way they do on the site card. */
#kc-form-buttons .pf-v5-c-button,
.pf-v5-c-form__actions .pf-v5-c-button {
  height: var(--mtg-control-height);
  width: 100%;
}

.pf-v5-c-button.pf-m-primary,
input[type="submit"].pf-v5-c-button.pf-m-primary {
  background: var(--mtg-primary);
  color: var(--mtg-on-primary);
  border: 1px solid var(--mtg-primary);
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  background: var(--mtg-primary-hover);
  border-color: var(--mtg-primary-hover);
  color: var(--mtg-on-primary);
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-link {
  color: var(--mtg-link);
}

/* In-flight state set by submit-guard.js. Styled rather than using the
   `disabled` attribute, because a disabled control is dropped from the form
   payload and some Keycloak screens carry meaningful button values. */
.mtg-is-submitting {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}

/* Social / identity-provider buttons (Google, Microsoft, Apple) */
/* --mtg-input-bg, NOT --mtg-surface: these sit ON the card, so painting them
   the card's own colour would leave them defined by their border alone — and in
   dark mode the card is near-black, so they would all but disappear. */
#kc-social-providers .pf-v5-c-button,
#kc-social-providers a {
  font-family: var(--mtg-font);
  border: 1px solid var(--mtg-border);
  border-radius: var(--mtg-radius-control);
  background: var(--mtg-input-bg);
  color: var(--mtg-text);
}

#kc-social-providers .pf-v5-c-button:hover,
#kc-social-providers a:hover {
  background: var(--mtg-border);
  border-color: var(--mtg-primary);
}

/* The parent recolours every non-Google provider icon to PatternFly blue via a
   long invert()/hue-rotate() filter chain. That was tuned for its blue theme
   and clashes with ours. Dropping the filter restores each brand's own mark,
   which is what users actually recognise — and Microsoft's logo in particular
   is meant to stay multicoloured. */
#kc-social-providers svg:not(.google) {
  filter: none;
}

@media (prefers-color-scheme: dark) {
  /* Monochrome marks (Apple, GitHub) are near-black and vanish on our dark
     card, so those get inverted — but only those. */
  #kc-social-providers svg.apple,
  #kc-social-providers svg.github {
    filter: invert(1);
  }
}

/* --- Links --------------------------------------------------------------- */

a,
#kc-registration a,
#kc-registration-container a,
.pf-v5-c-login__main-footer-band a {
  color: var(--mtg-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--mtg-primary-hover);
}

/* --- Alerts ---------------------------------------------------------------
   PatternFly's default is a full-width coloured top border plus body text in
   the state colour. Two problems with that here:

   1. Amber (or red) sentence text is genuinely hard to read and reads as
      shouting. The colour belongs in the ICON and a small accent, not in the
      prose. Body copy stays at normal foreground contrast.
   2. The full-width top stripe repeats the card's own top accent a few pixels
      below it, so the eye sees two competing rules stacked.

   Replaced with: soft tinted background, 3px LEFT accent, rounded corners,
   normal-contrast text, state colour retained on the icon.

   ⚠️ Severity is NOT flattened. Each state keeps its own distinct colour, and
   warning is deliberately not recoloured to green just because the copy here
   happens to be benign — the same class carries real "you must act" messages
   elsewhere in the login flow, and making those look reassuring would be worse
   than ugly. State colours are the site's own tokens from variables.css. */

/* Shape comes from the ARTICLE .alert — article.css:2354, not
   components/alerts.css. Both define .alert, and article.css loads AFTER the
   shared sheet, so its `border: 1px solid transparent` shorthand resets the
   shared `border-left: 4px solid` on every side. The article callout is
   therefore a FULL 1px border in the state colour with a 10% wash, and the
   left bar never renders on a real article page. Matching the shared rule
   reproduced CSS that the site itself overrides — a rule can ship without
   winning, and here it ships and loses.

   Radius --radius-md (8px), padding --spacing-md (24px). Text stays at normal
   contrast rather than taking the state colour: article.css tints the prose for
   success/error/info but NOT for warning, which is the state that actually
   appears on these screens, and coloured sentence text reads as shouting. */
.pf-v5-c-alert {
  border: 1px solid transparent;
  border-radius: var(--mtg-radius-md);
  background: var(--mtg-paper);
  color: var(--mtg-text);
  padding: var(--mtg-space-md);
  box-shadow: none;
}

/* Kill the default top stripe — the accent moves to the left edge. */
.pf-v5-c-alert::before,
.pf-v5-c-alert::after {
  border-top: none;
  background: none;
}

.pf-v5-c-alert__title,
.pf-v5-c-alert__description,
.pf-v5-c-alert .pf-v5-c-alert__title {
  font-family: var(--mtg-font);
  font-weight: 500;
  color: var(--mtg-text);
  line-height: 1.45;
}

.pf-v5-c-alert__icon {
  align-self: flex-start;
  padding-top: 0.1rem;
}

/* One shape per state: left accent = the token, wash = the same token at 10%,
   exactly as components/alerts.css does it. Severity stays distinct — warning
   is NOT softened to green because the copy happens to be benign here; the same
   class carries real "you must act" messages elsewhere in the login flow. */
.pf-v5-c-alert.pf-m-warning {
  border-color: var(--mtg-warning);
  background: color-mix(in srgb, var(--mtg-warning) 10%, transparent);
}
.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon {
  color: var(--mtg-warning);
}

.pf-v5-c-alert.pf-m-danger {
  border-color: var(--mtg-error);
  background: color-mix(in srgb, var(--mtg-error) 10%, transparent);
}
.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon {
  color: var(--mtg-error);
}

.pf-v5-c-alert.pf-m-success {
  border-color: var(--mtg-success);
  background: color-mix(in srgb, var(--mtg-success) 10%, transparent);
}
.pf-v5-c-alert.pf-m-success .pf-v5-c-alert__icon {
  color: var(--mtg-success);
}

.pf-v5-c-alert.pf-m-info {
  border-color: var(--mtg-info);
  background: color-mix(in srgb, var(--mtg-info) 10%, transparent);
}
.pf-v5-c-alert.pf-m-info .pf-v5-c-alert__icon {
  color: var(--mtg-info);
}

/* --- Dark mode ------------------------------------------------------------
   keycloak.v2 respects prefers-color-scheme. Mirroring the site's dark palette
   here keeps the login page from flashing a bright card at someone whose site
   session is dark. Values from variables.css :root[data-theme="dark"]. */

@media (prefers-color-scheme: dark) {
  :root {
    --mtg-primary: #6dcc8b;  /* token: --button-primary-bg */
    --mtg-primary-hover: #8dd9a5;  /* token: --button-primary-hover */
    /* Near-black text ON the light green, per --button-primary-text. White on
       #6dcc8b is roughly 1.9:1 and fails at any size. */
    --mtg-on-primary: #0B0B0B;  /* token: --button-primary-text */

    /* The card is DARKER than the page here, which is the site's dark-mode
       relationship and the inverse of light mode. --bg-primary is #0B0B0B and
       the page sits just above it, so the card recedes and the 1px border does
       the separating — exactly the newsletter card. */
    --mtg-paper: #0f0f0f;
    --mtg-surface: #0B0B0B;  /* token: --bg-primary */
    --mtg-input-bg: #1A1A1A;  /* token: --bg-secondary */

    --mtg-text: #FFFFFF;  /* token: --text-primary */
    --mtg-text-secondary: #d1d5db;  /* token: --text-secondary */
    --mtg-link: #6dcc8b;
    --mtg-border: #3A3A3A;  /* token: --border-primary */

    /* The site's OWN dark values (variables.css :root[data-theme="dark"]), not
       hues invented here. It brightens only success and warning for the dark
       card and leaves error and info identical across modes — this theme used
       to brighten all four, so a danger alert on the login page was a visibly
       different red from a danger alert on the site. The tints follow
       automatically, since color-mix derives them from these. */
    --mtg-error: #E74C3C;  /* token: --color-error */
    --mtg-warning: #F1C40F;  /* token: --color-warning */
    --mtg-success: #2ECC71;  /* token: --color-success */
    --mtg-info: #3498DB;  /* token: --color-info */
  }

  /* The two button-colour overrides that used to live here are gone: the text
     colour now rides on --mtg-on-primary, which this block redefines above, so
     both modes are driven from one token instead of a base rule plus a dark
     patch that had to be kept in sync by hand. */
}