/* ══════════════════════════════════════════════════════════════════════════
   kith-base.css — the Kith substrate under the Departures Board app.

   Replaces css/site.css for lfg/app.html (2026-07-16 register redesign). It
   deliberately redefines the SAME token names lfg.css consumes (--panel,
   --line, --ice, --dim, --font-display, --font-mono …) so seven hundred lines
   of component CSS re-dress without a rewrite. The mono ban is enforced here:
   --font-mono IS Archivo — tabular numerals come from the existing
   font-variant-numeric rules, not from a machine face.

   Load order matters: this file loads BEFORE lfg.css; lfg.css ends with the
   "Kith register" override section that de-consoles its own components.
   ══════════════════════════════════════════════════════════════════════════ */

:root, .lfg-page {
  /* the drench */
  --nightfall: #091a21;
  --lamplight: #d8b875;
  --hearth:    #ff9c50;
  --bronze:    #b58a4a;
  --patina:    #91b09e;
  --mist:      #dce8e4;
  --rain:      #93a9a5;
  --clay:      #c1714a;
  --rust:      #c4675e;
  --blurple:   #5865f2;

  /* the token names lfg.css was built on, regrounded in the evening */
  --space-deep: #060f14;
  --panel:      #0c1f28;
  --panel-2:    #10242e;
  --panel-3:    #143039;
  --line:        rgba(220,232,228,.10);
  --line-bright: rgba(220,232,228,.22);
  --ice:   var(--mist);
  --dim:   var(--rain);
  --dim-2: #849b97;   /* one quiet step below rain — still clears the floor */
  --max: 1180px;

  --serif: 'Vollkorn', Georgia, serif;
  --sans:  'Archivo', system-ui, sans-serif;
  --font-display: var(--sans);
  --font-mono: var(--sans);   /* THERE IS NO MONOSPACE. */

  /* legacy site.css token names the market app consumes */
  --amber: var(--lamplight);
  --cream: #e8d9b5;           /* warm emphasis text (prices) — lamplight's brighter cousin */
  --green: var(--patina);
  --muted: var(--rain);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--nightfall);
  color: var(--mist);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--mist); }
img { max-width: 100%; }

/* ── the app bar: the wordmark and the room you're in ────────────────────── */
.appbar {
  display: flex; align-items: center; gap: 14px;
  max-width: var(--max); margin: 0 auto; padding: 14px 24px 4px;
}
.appbar .wordmark-link { display: inline-flex; }
.appbar .wordmark-link img { display: block; width: 92px; height: auto; }
.appbar .room { color: var(--rain); font-size: 14px; padding-top: 12px; }
.appbar .wordmark-link:focus-visible { outline: 2px solid var(--lamplight); outline-offset: 4px; }
@media (max-width: 720px) { .appbar { padding: 12px 14px 2px; } }

/* ── buttons: the village door language (no notches, no glow) ────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 var(--sans);
  padding: 11px 16px; border-radius: 3px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background-color .18s, color .18s, border-color .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--lamplight); outline-offset: 3px; }
.btn-ghost { color: var(--mist); border-color: rgba(220,232,228,.28); background: none; }
.btn-ghost:hover { color: var(--lamplight); border-color: var(--lamplight); }
.btn-discord { background: var(--blurple); color: #fff; }
.btn-discord:hover { background: #4a56d8; }
.btn-sm { padding: 8px 12px; font-size: 13px; }

/* ── footer ──────────────────────────────────────────────────────────────── */
footer { padding: 34px 0 40px; }
.foot-legal {
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  display: flex; flex-direction: column; gap: 4px;
  color: var(--rain); font-size: 13.5px;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}