/*
 * 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 */
  --text-faint-light: rgba(255, 255, 255, 0.35); /* faint footer text on dark bg */

  /* Borders */
  --border-card: #3a3a38;
  --border-field: #3a3a38;

  /* 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;
}

/* Wordmark — MPI white logo + text on dark chrome */
.kitos-logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.mpi-logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.kitos-logo-text {
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.auth-navbar__logo-box {
  width: auto;
  padding: 0 16px;
  border-right-color: rgba(255, 255, 255, 0.2);
}

/* Nav links — copper on dark chrome */
.auth-navbar__link {
  color: var(--brand-interactive);
}
.auth-navbar__link:hover {
  color: #e8a07a;
}

/* 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 */
.login-links .auth-link { font-size: 0.875rem; }
.login-links .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;
}
.auth-input::placeholder,
.auth-form input::placeholder, .login-card input::placeholder { color: #6b6b68; }

/* 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 — single copper border, no outer ring */
.auth-input:focus,
.auth-form input:focus,
.login-card input:focus {
  border-color: var(--brand-interactive-accessible);
  outline: none;
  box-shadow: none;
}

/* Checkbox — tan */
.auth-checkbox {
  accent-color: var(--brand-interactive-accessible);
}

/* 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 */
footer { color: rgba(255, 255, 255, 0.35); }

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