/* Keymakers — auth portal theme */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --km-ground: #111115;
  --km-surface: #1a1a20;
  --km-surface-up: #222228;
  --km-border: #2e2e35;
  --km-fg: #e8e6e0;
  --km-fg2: #9a9890;
  --km-muted: #6a6860;
  --km-brass: #c9a84c;
  --km-brass-glow: rgba(201, 168, 76, 0.25);
  --km-brass-soft: rgba(201, 168, 76, 0.08);
  --km-success: #5fba7d;
  --km-error: #e25555;
  --km-info: #6aa8d8;
  --km-serif: 'DM Serif Display', Georgia, serif;
  --km-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
}

/* ── Ground ── */
body {
  background: var(--km-ground) !important;
  font-family: var(--km-sans) !important;
}

/* ── Cards / Paper ── */
.MuiPaper-root {
  background: var(--km-surface) !important;
  border: 1px solid var(--km-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.6) !important;
}

.MuiCard-root {
  background: var(--km-surface) !important;
  border: 1px solid var(--km-border) !important;
  border-radius: 10px !important;
}

/* ── Typography ── */
.MuiTypography-root {
  color: var(--km-fg) !important;
  font-family: var(--km-sans) !important;
}

.MuiTypography-h1,
.MuiTypography-h2,
.MuiTypography-h3,
.MuiTypography-h4,
.MuiTypography-h5,
.MuiTypography-h6 {
  font-family: var(--km-serif) !important;
  letter-spacing: 0.01em !important;
}

.MuiTypography-body2 {
  color: var(--km-fg2) !important;
}

/* ── Inputs ── */
.MuiInputBase-root {
  background: var(--km-surface-up) !important;
  border-radius: 6px !important;
}

.MuiOutlinedInput-root {
  background: var(--km-surface-up) !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: var(--km-border) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--km-brass) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--km-brass) !important;
  border-width: 2px !important;
}

.MuiInputBase-input {
  color: var(--km-fg) !important;
  font-family: var(--km-sans) !important;
}

.MuiInputLabel-root {
  color: var(--km-fg2) !important;
  font-family: var(--km-sans) !important;
}

.MuiInputLabel-root.Mui-focused {
  color: var(--km-brass) !important;
}

/* ── Primary button — solid brass ── */
.MuiButton-containedPrimary {
  background: var(--km-brass) !important;
  border-radius: 6px !important;
  text-transform: none !important;
  font-weight: 600 !important;
  font-family: var(--km-sans) !important;
  color: #111 !important;
  box-shadow: 0 4px 16px 0 var(--km-brass-glow) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.02em !important;
}

.MuiButton-containedPrimary:hover {
  background: #d4b94e !important;
  box-shadow: 0 6px 22px 0 var(--km-brass-glow) !important;
  transform: translateY(-1px) !important;
}

/* ── Text / link buttons ── */
.MuiButton-textPrimary {
  color: var(--km-brass) !important;
  text-transform: none !important;
  font-family: var(--km-sans) !important;
}

.MuiLink-root {
  color: var(--km-brass) !important;
  text-decoration: none !important;
}

.MuiLink-root:hover {
  color: #d4b94e !important;
}

/* ── Checkboxes ── */
.MuiCheckbox-root {
  color: var(--km-fg2) !important;
}

.MuiCheckbox-root.Mui-checked {
  color: var(--km-brass) !important;
}

.MuiFormControlLabel-label {
  color: var(--km-fg2) !important;
  font-family: var(--km-sans) !important;
}

/* ── Alerts ── */
.MuiAlert-standardError {
  background: rgba(226, 85, 85, 0.08) !important;
  border: 1px solid rgba(226, 85, 85, 0.25) !important;
  color: var(--km-error) !important;
}

.MuiAlert-standardSuccess {
  background: rgba(95, 186, 125, 0.08) !important;
  border: 1px solid rgba(95, 186, 125, 0.25) !important;
  color: var(--km-success) !important;
}

.MuiAlert-standardInfo {
  background: var(--km-brass-soft) !important;
  border: 1px solid rgba(201, 168, 76, 0.2) !important;
  color: var(--km-brass) !important;
}

/* ── Misc ── */
.MuiCircularProgress-root {
  color: var(--km-brass) !important;
}

.MuiDivider-root {
  border-color: var(--km-border) !important;
}

.MuiIconButton-root {
  color: var(--km-fg2) !important;
}

.MuiIconButton-root:hover {
  color: var(--km-brass) !important;
  background: var(--km-brass-soft) !important;
}

/* ── Tabs (settings page) ── */
.MuiTab-root {
  color: var(--km-fg2) !important;
  font-family: var(--km-sans) !important;
  text-transform: none !important;
}

.MuiTab-root.Mui-selected {
  color: var(--km-brass) !important;
}

.MuiTabs-indicator {
  background-color: var(--km-brass) !important;
}

/* ── Logo ── */
#logo-container img,
.logo img {
  max-height: 56px !important;
}

/* ── Footer ── */
.footer,
footer {
  color: var(--km-muted) !important;
}

.footer a,
footer a {
  color: var(--km-brass) !important;
}

/* ── Selection ── */
::selection {
  background: var(--km-brass) !important;
  color: var(--km-ground) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--km-surface); }
::-webkit-scrollbar-thumb { background: var(--km-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--km-muted); }

/* ── Subtle entrance ── */
.MuiCard-root {
  animation: fadeIn 0.25s ease-out !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}