/*
 * kitos-tokens.css — the estate's neutral Slate ambient on the SSO auth surface
 * (RULINGS-2026-09-23-c: the sign-in wall takes the slate estate neutral
 * ambient; the copper theme goes). Values are the Slate base, dark and light,
 * as carried by the library's minisites/sso-login-slate/ (itself copied from
 * minisites/design-lab/round-seven-lab.html); `lab:NN` marks the line of
 * that stylesheet each value came from.
 *
 * Linked in base.html AFTER the per-tenant brand <style> block, so it
 * deliberately re-points the shared auth design-system colours onto the fixed
 * Slate palette: the SSO login is the single estate gateway for every clone AND
 * the CF Access gate — not a per-tenant themed page. Chrome bar dark in BOTH
 * modes (#212121 / #383838) so the white MPI mark reads on either; one filled
 * primary act (#585858, white text); every other button the quiet outline.
 *
 * MODE. Dark is the default. Light follows the viewer's system setting. The
 * light block comes FIRST and wins by specificity (html:root beats :root), so
 * the dark :root below is the last declaration of every token — which is the
 * zone identity/tests/test_login_contrast.py resolves ("last declaration
 * wins") and locks. The light pairs clear the same floors: border-field
 * #6a6a6a is 4.87:1 on the #f3f3f3 field and 5.41:1 on the #ffffff card;
 * placeholder #6a6a6a 4.87:1 on the field; footer #383838 9.48:1 on #e7e7e7.
 */

@media (prefers-color-scheme: light) {
  html:root {
    color-scheme: light;
    --brand-primary: #383838;                       /* chrome — lab:63 */
    --brand-interactive-accessible: #383838;        /* focus border — lab:81 */
    --brand-interactive-accessible-hover: #585858;
    --surface-card: #ffffff;                        /* lab:65 */
    --surface-page: #e7e7e7;                        /* lab:68 */
    --surface-field: #f3f3f3;                       /* lab:66 */
    --text-heading: #1e2226;                        /* lab:78 */
    --text-body: #272a2c;                           /* lab:80 */
    --text-muted: #383838;                          /* lab:81 */
    --text-placeholder: #6a6a6a;                    /* lab:82 */
    --text-faint-light: #383838;                    /* footer — lab:81 */
    --border-card: #d3d3d3;                         /* lab:70 */
    --border-field: #6a6a6a;                        /* lab:82 */
    --brand-secondary: #585858;                     /* link — lab:75 */
    --shadow-card: 0 4px 14px rgba(20, 22, 26, 0.10);  /* lab:84 */
  }
}

:root {
  color-scheme: dark;

  /* Chrome zone (dark header, both modes) */
  --brand-primary: #212121;          /* Slate chrome — lab:29 */
  --brand-interactive: #585858;      /* Slate fill — lab:56 */

  /* The one primary act: fill + white text (7.11:1). Both modes. */
  --btn-fill: #585858;               /* lab:56 */
  --btn-on-fill: #ffffff;            /* lab:51 */
  --btn-quiet-hover: rgba(88, 88, 88, 0.08);  /* lab:44 */

  /* Focus border + its hover step. #a5a5a5 is 6.77:1 on the #1e1e1e field and a
   * visible step up from the #8c8c8c resting border (1px -> 2px + lighter). */
  --brand-interactive-accessible: #a5a5a5;        /* lab:49 */
  --brand-interactive-accessible-hover: #d0d1d3;  /* lab:48 */

  /* Surfaces */
  --surface-card: #1a1a1a;           /* lab:31 */
  --surface-page: #161616;           /* lab:34 */
  --surface-field: #1e1e1e;          /* lab:32 */

  /* Text */
  --text-heading: #e7e9ec;           /* lab:46 */
  --text-body: #d0d1d3;              /* lab:48 */
  --text-muted: #a5a5a5;             /* lab:49 */
  --text-placeholder: #8c8c8c;       /* lab:50 */
  /* Footer text. SOLID, not an alpha (KDS#003 §4.4): an alpha has no contrast
   * ratio of its own, only one per background it never declares. #a5a5a5 is
   * 7.35:1 on the #161616 page and 7.07:1 on the #1a1a1a card, so it survives a
   * move onto the card. */
  --text-faint-light: #a5a5a5;       /* lab:49 */

  /* Borders */
  --border-card: #222222;            /* lab:36 */
  /* Field boundary — the ONLY thing that identifies a text input here (the
   * #1e1e1e fill is ~1.1:1 against the #1a1a1a card), so WCAG 2.1 AA 1.4.11
   * (>=3:1) lands on it. #8c8c8c is 4.96:1 against the fill and 5.2:1 against
   * the card. Keep this >=3:1 against BOTH if the palette moves; the lock is
   * identity/tests/test_login_contrast.py, which asserts the ratio. */
  --border-field: #8c8c8c;           /* lab:50 */

  /* Link text — #858585 is 4.7:1 on the #1a1a1a card */
  --brand-secondary: #858585;        /* lab:41 */
  --brand-font: 'Inter';

  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.34);  /* lab:53 */
}

/* Page shell */
.login-shell {
  background-color: var(--surface-page);
}
body {
  /* !important beats Tailwind .bg-gray-50 on <body> */
  background-color: var(--surface-page) !important;
  color: var(--text-body);
}

/* Logo mark — the white MPI mark (RULINGS-2026-09-23-d), the map page's own
 * vector, box cut to the mark's edges: 41 x 28 as in the shell's top-left. */
.kitos-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.auth-navbar__logo-box img {
  width: 41px;
  max-width: none;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}
.auth-navbar__logo-box {
  width: auto;
  padding: 0 16px;
  border-right: 0;
}
.auth-navbar__wordmark,
.auth-navbar__wordmark-accent { color: #ffffff; }

/* Language switch on the chrome bar: the bar is dark in both modes, so the
 * native control is held to a dark scheme rather than painting a pale slab. */
.auth-navbar select {
  color-scheme: dark;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Card typography */
.auth-title { color: var(--text-heading); }
.auth-label { color: var(--text-heading); }
.auth-subtitle,
.login-card .auth-subtitle { color: var(--text-muted); }
.auth-link { color: var(--brand-secondary); font-weight: 400; }
/* "One-Time Link" — bold secondary CTA (FIX G) */
.auth-link--bold { font-weight: 700; }
/* "Forgot Your Password?" — tertiary footnote-level action (FIX H) */
.auth-link--tertiary { font-weight: 300; }
/* Login card pre-action links — 14px for bold secondary; 12px for tertiary.
 * Scoped to .login-pre-actions, not the old .login-links wrapper: the two links
 * are now separate grid children (One-Time Link centre, reset right). */
.login-pre-actions .auth-link { font-size: 0.875rem; }
.login-pre-actions .auth-link--tertiary { font-size: 0.75rem; }
.auth-toggle-pw { color: var(--text-muted); }
.login-remember label { color: var(--text-body); }
.login-card .auth-body-text { color: var(--text-muted); }
.login-card .auth-body-text strong { color: var(--text-heading); }

/* Dark form fields */
.auth-input,
.auth-form input[type="text"], .auth-form input[type="email"],
.auth-form input[type="password"], .auth-form input[type="url"],
.login-card input[type="text"], .login-card input[type="email"],
.login-card input[type="password"] {
  background: #1e1e1e;
  background: var(--surface-field);
  border-color: var(--border-field);
  color: var(--text-heading);
}
/* Placeholder — #8c8c8c on the #1e1e1e fill = 4.96:1, clearing WCAG 2.1 AA
 * 1.4.3 (4.5:1). The literal is the dark value, the token carries the mode.
 * KDS#003 §4.4. */
.auth-input::placeholder,
.auth-form input::placeholder, .login-card input::placeholder { color: #8c8c8c; color: var(--text-placeholder); }

/* Card surface */
.login-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.login-card:hover {
  box-shadow: var(--shadow-card);
}

/* The one primary act — Slate fill, white text */
.btn-brand-primary {
  background: var(--btn-fill);
  color: var(--btn-on-fill);
  border: 1px solid var(--btn-fill);
}
.btn-brand-primary:hover {
  background: var(--btn-fill);
  border-color: var(--btn-on-fill);
  opacity: 1;
}

/* Every other button — the Slate quiet button (lab:121) */
.btn-brand-secondary,
.btn-outline-brand {
  background: transparent;
  color: var(--text-heading);
  border: 1px solid var(--border-field);
}
.btn-brand-secondary:hover,
.btn-outline-brand:hover {
  opacity: 1;
  background: var(--btn-quiet-hover);
  color: var(--text-heading);
  border-color: var(--border-field);
}

/* Focus — a SINGLE border that REPLACES the neutral resting one (CEO ruling
 * 2026-07-30). This file loads AFTER base.html's inline block and is the
 * cascade winner on auth.kitos.io, so the no-stacking contract has to hold
 * HERE, not only in base.html. The 1px->2px width step plus the lighter grey
 * is the whole indicator (2.4.7); the padding compensation keeps the text from
 * shifting.
 */
.auth-input:focus,
.auth-form input:focus,
.login-card input:focus {
  border: 2px solid var(--brand-interactive-accessible);
  outline: none;
  box-shadow: none;
  padding: 0 calc(0.75rem - 1px);
}

/* Checkbox — the Slate fill */
.auth-checkbox {
  accent-color: var(--btn-fill);
}

/* Center the auth-actions block within its flex-column parent (FIX I) */
.auth-actions {
  align-self: center;
}

/* auth-container pages: card surface + border (seq-3 FIX D + E) */
.auth-container {
  background: var(--surface-card);
  border-color: var(--border-card);
}
/* When auth-container lives inside a centered shell, remove the top-push padding */
.login-shell .auth-container {
  padding-top: 2rem;
}

/* Footer — 12px is normal text, so 1.4.3 asks 4.5:1. Keep it a solid hex in
 * step with --text-faint-light above (see that token's comment).
 * !important beats Tailwind .text-gray-400 on <footer>, which otherwise wins on
 * specificity and paints #9ca3af (2.1:1 on the light page). */
footer { color: var(--text-faint-light) !important; }

/* Mobile — override hardcoded #f3f4f6 in base.html; the card goes edge-to-edge */
@media (max-width: 768px) {
  .login-shell { background-color: var(--surface-page) !important; }
  .login-card { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .login-card:hover { box-shadow: none; }
}