/* ============================================================
   Palette override
   ------------------------------------------------------------
   Loaded after style.css. Deliberately narrow: it re-points the
   accent to a desaturated steel blue and fixes the few places
   where the old indigo was hardcoded instead of read from a
   variable. Radii, spacing and typography are left exactly as
   the original design defined them.
   ============================================================ */

:root,
[data-theme="light"] {
  --accent: #4a7096;
  --accent-hover: #3f6083;
  --accent-light: rgba(74, 112, 150, 0.1);
  --accent-gradient: linear-gradient(135deg, #4a7096 0%, #3a5872 100%);
}

[data-theme="dark"] {
  /* Lifted so it stays legible on the dark surfaces. */
  --accent: #7fa5c9;
  --accent-hover: #92b4d4;
  --accent-light: rgba(127, 165, 201, 0.15);
  --accent-gradient: linear-gradient(135deg, #6f97bd 0%, #47698a 100%);
}

/* ── Tab bar ───────────────────────────────────────────────
   Slimmer ring and a shadow tinted to the accent — the original
   values hardcoded indigo, which clashed once the accent moved
   to blue-grey.
   ─────────────────────────────────────────────────────────── */

.nav-tab-create {
  margin-top: -26px;
}

.nav-create-ring {
  width: 58px;
  height: 58px;
  box-shadow: 0 2px 10px rgba(20, 25, 35, 0.06);
}

.nav-create-btn {
  width: 46px;
  height: 46px;
  /* Flat fill, no gradient. */
  background: var(--accent);
  box-shadow: 0 3px 12px rgba(58, 88, 114, 0.32);
}

.nav-create-btn svg {
  width: 22px;
  height: 22px;
}

.nav-tab-create:active .nav-create-btn {
  box-shadow: 0 1px 6px rgba(58, 88, 114, 0.24);
}

[data-theme="dark"] .nav-create-ring {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Active tab highlight, previously a fixed indigo tint. */
.nav-tab.active .nav-tab-inner {
  background: var(--accent-light);
}

/* ── Accent leftovers ──────────────────────────────────────
   Remaining hardcoded indigo in gradients and glows.
   ─────────────────────────────────────────────────────────── */

.btn-gradient,
.btn-primary {
  background: var(--accent-gradient);
  box-shadow: 0 4px 14px rgba(58, 88, 114, 0.28);
}

/* The card keeps its original dark grey. Only the chip and the action icons
   pick up the accent. */

/* Replaces the balance .mini-card on the profile, so it needs that element's
   bottom margin — without it the card sat flush against the coins row. */
.prof-balance-card {
  margin-bottom: 12px;
}

/* The profile card uses <button> for its back actions so they can open the
   balance sheet; strip the user-agent button styling so they match the
   anchors used on the home screen. */
button.bank-card-back-btn {
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mini-card-coins .mini-card-amount,
.coins-val {
  color: var(--accent);
}

/* Remaining indigo glows in style.css (lines 585, 1606, 5122). */
.char-count,
.char-selected-count {
  color: var(--accent);
}

.char-card.selected,
.gs-card.selected {
  box-shadow: 0 2px 8px rgba(58, 88, 114, 0.3);
}

.fab,
.prof-action-btn:active .prof-action-icon {
  box-shadow: 0 4px 18px rgba(58, 88, 114, 0.4);
}

/* Focus ring, for keyboard users, since inputs clear the default outline. */
.form-input:focus-visible,
.market-search:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}