/*
 * kitos-tokens.css — KS#002 kitOS Design Codex tokens + SSO auth-surface zone
 * overrides. Source: design/KS#002-kitos-codex.md (SP 633wzp, G3 ruling).
 *
 * 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
 * Admin Hub dark palette: the SSO login is the single kitOS-branded gateway for
 * every clone AND the CF Access gate — not a per-tenant themed page. Zone
 * principle (KS#001 §12.1): dark chrome header + dark card + tan accent.
 * Buttons: tan fill #c4895c with dark text #1a1a18. Link text: #d4a878 (AA
 * 4.5:1 on the #242424 card, per CEO spec 2026-06-27).
 */

:root {
  /* Chrome zone (dark header) — unchanged */
  --brand-primary: #252523;          /* warm near-black chrome surface */
  --brand-interactive: #C4825A;      /* copper — interactive elements on dark chrome */

  /* Card zone (dark — Admin Hub palette, CEO spec 2026-06-27) */
  --brand-interactive-accessible: #c4895c;        /* tan fill — buttons, outline, focus, checkbox */
  --brand-interactive-accessible-hover: #b8784e;  /* deeper tan — hover / active */
  --surface-card: #242424;           /* dark card */
  --surface-page: #161616;           /* near-black page background */

  /* Text on dark surfaces */
  --text-body-light: #e8e6e1;        /* headings + labels on dark card */
  /* Faint footer text on dark bg. SOLID, not an alpha — that is part of the
   * ruling (KDS#003 §4.4), not a formatting choice. rgba(255,255,255,0.35) has
   * no contrast ratio of its own; it has one per background, against a
   * background it never declares. Composited over the page (#161616) it is
   * #686868 = 3.25:1, below the 4.5:1 that WCAG 2.1 AA 1.4.3 requires of the
   * 12px text this paints. Raising the alpha to 0.45 would reach 4.52:1 on
   * #161616 and would silently fail the moment the footer moved onto the card.
   * #909088 is 5.63:1 on the page and 4.83:1 on the card, so it survives that
   * move. Still visibly faint — the design intent (KG#096) is preserved, above
   * the floor rather than below it. */
  --text-faint-light: #909088;

  /* Borders */
  --border-card: #3a3a38;
  /* Field boundary. This is the ONLY thing that identifies a text input on this
   * page — the field fill (#2e2e2c) is just 1.36:1 against the card behind it
   * (#242424), so the border alone carries the boundary and WCAG 2.1 AA 1.4.11
   * (>=3:1 for the visual boundary of a UI component) lands squarely on it.
   *
   * It was #3a3a38, which is 1.19:1 against the field fill and 1.36:1 against
   * the card — a boundary essentially invisible to anyone not resolving a
   * near-black hue step. #808078 is 3.42:1 against the fill and 3.90:1 against
   * the card. Both clear the minimum with enough margin to survive rounding.
   *
   * Darker was checked and is impossible here, not merely undesirable: the
   * surfaces are already near-black, so even pure #000 tops out at 1.54:1
   * against the fill. Lighter is the only direction that can satisfy 1.4.11 on
   * this palette. (TK 034rox §5 D6 — which ruled #6b7280 against a WHITE field
   * and explicitly delegated: verify the actual computed background, recompute,
   * and let the >=3:1 invariant govern rather than the hex. This zone is dark,
   * so the hex differs and the invariant is what is honoured.)
   *
   * Keep this >=3:1 against BOTH #2e2e2c and #242424 if the palette moves; the
   * lock is identity/tests/test_login_contrast.py, which asserts the ratio, not
   * the value, so a future palette change cannot silently reintroduce the fail. */
  --border-field: #808078;

  /* Link text — AA-accessible tan (≈4.5:1 on #242424) */
  --brand-secondary: #d4a878;        /* One-Time Link / Forgot Password links */
  --brand-font: 'Inter';
}

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

/* Logo mark — the brand's own logo_url, or the neutral kitOS mark as fallback.
 * The .mpi-logo-img rule that used to live here sized a hardcoded MyPassionIndex
 * fallback <img>; both the class and that fallback are gone (TK 034rox §4 D1) —
 * the sizing now applies to whichever mark the logo box renders. */
.kitos-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.auth-navbar__logo-box img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.auth-navbar__logo-box {
  width: auto;
  padding: 0 16px;
  border-right-color: rgba(255, 255, 255, 0.2);
}

/* Dark card typography */
.auth-title { color: #e8e6e1; }
.auth-label { color: #e8e6e1; }
.auth-subtitle,
.login-card .auth-subtitle { color: #a09890; }
.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: #a09890; }
.login-remember label { color: #a09890; }
.login-card .auth-body-text { color: #a09890; }
.login-card .auth-body-text strong { color: #d4d4d0; }

/* 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: #2e2e2c;
  border-color: var(--border-field);
  color: #e8e6e1;
}
/* Placeholder — #a09890 on the #2e2e2c field fill = 4.79:1, clearing WCAG 2.1
 * AA 1.4.3 (4.5:1). It was #6b6b68 = 2.55:1. Placeholder text is text: both
 * fields carry real visible <label>s, which caps this at Major rather than
 * Critical, but it does not make 2.55:1 acceptable.
 *
 * #a09890 rather than the light layer's #9ca3af (which would also pass, at
 * 5.36:1): #a09890 is an existing step on this sheet's warm neutral ramp and is
 * already the platform's secondary-text-on-dark neutral — the role a
 * placeholder plays — whereas #9ca3af is a cool grey in a warm palette.
 * Hierarchy holds: entered text stays #e8e6e1 at 10.9:1, clearly ahead of the
 * hint. KDS#003 §4.4. */
.auth-input::placeholder,
.auth-form input::placeholder, .login-card input::placeholder { color: #a09890; }

/* Dark card surface */
.login-card {
  background: var(--surface-card);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}
.login-card:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
}

/* Primary CTA — tan fill, DARK text (CEO spec) */
.btn-brand-primary,
.btn-brand-secondary {
  background: var(--brand-interactive-accessible);
  color: #1a1a18;
}
.btn-brand-primary:hover,
.btn-brand-secondary:hover {
  background: var(--brand-interactive-accessible-hover);
  opacity: 1;
}

/* Outline button — transparent on dark card, tan border + tan text */
.btn-outline-brand {
  background: transparent;
  color: var(--brand-interactive-accessible);
  border-color: var(--brand-interactive-accessible);
}
.btn-outline-brand:hover {
  opacity: 1;
  color: var(--brand-interactive-accessible-hover);
  border-color: var(--brand-interactive-accessible-hover);
}

/* Focus — a SINGLE tan border that REPLACES the neutral resting one (CEO ruling
 * 2026-07-30). TK 034rox §5 D5 set a 2px tan outline at 2px offset AND recoloured
 * the 1px border tan; on the live page those read as a double border around the
 * focused field. This file loads AFTER base.html's inline block and is the actual
 * cascade winner on auth.kitos.io, so the no-stacking contract has to hold HERE,
 * not only in base.html.
 * Tan #c4895c stays the dark-zone accent (not the chrome copper #A0663E): 4.6:1
 * against the #2e2e2c field it borders and 5.2:1 against the #242424 card behind
 * it — both clear the ≥3:1 non-text minimum (WCAG 1.4.11), which #A0663E would
 * not on these surfaces. The 1px→2px width step plus the hue change 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 — tan */
.auth-checkbox {
  accent-color: var(--brand-interactive-accessible);
}

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

/* auth-container pages: dark card surface + dark 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 — legible on near-black background. 12px is normal text, so 1.4.3
 * asks 4.5:1, not 3:1. Solid #909088 = 5.63:1 on the #161616 page and 4.83:1 on
 * the #242424 card, so it stays compliant if the footer is ever moved onto the
 * card. The superseded rgba(255,255,255,0.35) composited to #686868 = 3.25:1.
 * Keep this a solid hex and keep it in step with --text-faint-light above —
 * see that token's comment for why an alpha is refused here. KDS#003 §4.4. */
footer { color: var(--text-faint-light); }

/* Mobile — override hardcoded #f3f4f6 in base.html */
@media (max-width: 768px) {
  .login-shell { background-color: var(--surface-page) !important; }
}
