:root {
  --bg: #fffaf4;
  --bg-soft: #fff4e8;
  --surface: #ffffff;
  --surface-2: #fffdf8;
  --text: #111111;
  --muted: #57534e;
  --line: #f1e4cf;
  --primary: #0f766e;
  --primary-dark: #115e59;
  --mint: #14b8a6;
  --peach: #fb923c;
  --yellow: #facc15;
  --yellow-deep: #eab308;
  --red: #ef4444;
  --red-dark: #dc2626;
  --green: #22c55e;
  --black: #0f0f0f;
  --shadow: 0 24px 72px rgba(17, 17, 17, 0.08);
  --shadow-soft: 0 12px 30px rgba(17, 17, 17, 0.06);
  --radius: 24px;
  --btn-radius: 18px;
  --ink: var(--text);
  --paper: var(--bg);
  --soft: var(--bg-soft);
  --blue: var(--primary);
  --blue-dark: var(--primary-dark);
  --amber: var(--yellow-deep);
}

/* Final, cache-versioned constraints prevent the high-resolution brand mark
   from inheriting its 1024px intrinsic size when an older base theme is cached. */
.brand-mark {
  display: block;
  box-sizing: border-box;
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: contain;
  flex: 0 0 56px;
  padding: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: var(--shadow-soft);
}
.login-story .brand-mark { width: 80px !important; height: 80px !important; max-width: 80px !important; max-height: 80px !important; flex-basis: 80px; border-radius: 22px; }
.mobile-head .brand-mark { width: 44px !important; height: 44px !important; max-width: 44px !important; max-height: 44px !important; flex-basis: 44px; border-radius: 13px; }

body, .content, .login-shell { background-color: var(--bg); color: var(--text); }
.card, .metrics article, .login-panel, .page-card { background-color: var(--surface); }
input, select, textarea { background: var(--surface); color: var(--text); border-color: var(--line); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.primary, .page-card form button, .page-card > button {
  background: var(--yellow);
  color: var(--black);
  border-radius: var(--btn-radius);
  font-weight: 800;
}
.primary:hover, .page-card form button:hover, .page-card > button:hover { background: var(--yellow-deep); }
.primary:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}
.danger, button[data-tone="danger"] { background: var(--red-dark); color: #ffffff; }
.urgent, button[data-tone="urgent"] { background: var(--red); color: var(--black); }
.info, button[data-tone="info"] { background: var(--primary); color: #ffffff; }
.status, .success { color: #166534; }
.status.warn, .warning { color: #92400e; }

.connection-banner.warning{display:flex;align-items:center;justify-content:space-between;gap:12px;border-color:#f59e0b;background:#fffbeb;color:#78350f}
.connection-banner.warning button{flex:0 0 auto;border:1px solid #d97706;border-radius:8px;padding:7px 10px;background:#fff;color:#92400e;font-weight:800}
.gateway-feedback{margin:12px 0;padding:10px 12px;border:1px solid #fca5a5;border-radius:8px;background:#fef2f2;color:#991b1b;font-size:12px;line-height:1.45}
.gateway-feedback.success{border-color:#86efac;background:#f0fdf4;color:#166534}
.gateway-feedback:focus{outline:3px solid rgba(15,118,110,.2);outline-offset:2px}
.error, .toast.error { color: #991b1b; }
.muted, small, .field-help { color: var(--muted); }
.portal > aside { background: linear-gradient(180deg, var(--black), var(--primary-dark)); }
.workspace i, .portal nav button.active { background: var(--yellow); color: var(--black); }

@media (prefers-contrast: more) {
  :root { --muted: #3f3b37; --line: #cdbfa9; }
  button, input, select, textarea, .card { border-width: 2px; }
}