/* barter.game front-page skin for the bank UI (@barter.game/web-client).
   Injected into the bank SPA shell after app/styles.css by the bank host
   (backend/src/bank/handler.ts), so these rules win the cascade. The client
   skin is fully token-driven; remapping the tokens + fonts does most of the
   work, with a few component-level tweaks to match the marketing site. */

:root {
  --bg: #f7f6fb;
  --fg: #2d3748;
  --muted: #64748d;
  --faint: #64748d;
  --accent: #7239d6;
  --accent-soft: #f1eafc;
  --accent-line: #ddd0f5;
  --accent2: #1e8449;
  --green-soft: #eef8f1;
  --danger: #c0392b;
  --danger-soft: #fdf0ee;
  --amber: #a9761a;
  --amber-soft: #f5eddb;
  --card: #ffffff;
  --border: #e2e8f0;
  --hair: #efeaf7;
  --header-bg: rgba(255, 255, 255, 0.92);
  --display: "Nunito Sans", system-ui, sans-serif;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.15;
  letter-spacing: 0;
}

::selection { background: #ddd0f5; }

/* Buttons: front-page pill with the purple shadow and hover lift. */
.btn {
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(114, 57, 214, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { background: #5a26b8; transform: translateY(-1px); }
.btn.secondary {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
}
.btn.secondary:hover { background: var(--accent); color: #fff; }
.btn.danger { box-shadow: none; }
.btn:disabled { background: #cfc3ec; box-shadow: none; transform: none; }
.stack .btn { border-radius: 999px; }

/* Cards: front-page radius and soft ink-tinted shadow. */
.card {
  border-radius: 14px;
  border-color: var(--border);
  box-shadow: 0 6px 18px rgba(26, 19, 37, 0.05);
}

/* Header: front-page sticky blurred chrome. */
header, .header {
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Form focus ring in brand purple. */
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* Brand mark: the client's CSS-drawn diamond becomes the barter.game badge. */
.logo-mark {
  background: url("/assets/favicon.svg") center / cover no-repeat;
  border-radius: 22%;
  box-shadow: 0 4px 14px -4px rgba(114, 57, 214, 0.5);
}
.logo-mark span { display: none; }
.logo-mark.large {
  border-radius: 26%;
  box-shadow: 0 14px 30px -10px rgba(114, 57, 214, 0.55);
}