/* ===========================================================================
   HNB brand tokens — shared sitewide (landing, wallet, explorer, whitepaper)
   Canonical copy lives at assets/brand/hnb-brand.css; web-wallet/css and
   block-explorer/css hold byte-identical copies. Edit here, then re-sync.

   Palette: near-black neutrals, a violet→pink sweep, and gold used only as a
   hairline accent — never as a fill, never larger than 1px at display size.
   Type: Outfit at every weight; tracking tightens as size increases.
   =========================================================================== */

:root {
  /* --- neutrals: black through grey ------------------------------------ */
  --hnb-ink: #07070a;      /* page background */
  --hnb-coal: #0d0d12;     /* raised surface */
  --hnb-char: #14141b;     /* card */
  --hnb-smoke: #1d1d26;    /* input / hover */
  --hnb-slate: #2a2a36;    /* border, solid */
  --hnb-ash: #6b6b7b;      /* muted text */
  --hnb-mist: #9e9eb0;     /* secondary text */
  --hnb-fog: #c9c9d6;      /* near-white text */

  /* --- purple ---------------------------------------------------------- */
  --hnb-violet: #7c5cff;       /* primary brand */
  --hnb-violet-lift: #9b7cff;  /* gradient head, hover */
  --hnb-plum: #4c1d95;         /* deep fill, shadow tint */

  /* --- pink ------------------------------------------------------------ */
  --hnb-pink: #e8479a;         /* secondary brand */
  --hnb-pink-lift: #ff7cbe;    /* hover, highlight */

  /* --- gold: accent only ----------------------------------------------- */
  --hnb-gold: #c9a961;
  --hnb-gold-soft: #e4ce9b;

  /* --- composed -------------------------------------------------------- */
  --hnb-sweep: linear-gradient(135deg, var(--hnb-violet-lift), var(--hnb-violet) 50%, var(--hnb-pink));
  --hnb-glass: rgba(255, 255, 255, 0.035);
  --hnb-glass-border: rgba(255, 255, 255, 0.08);
  --hnb-hairline: rgba(201, 169, 97, 0.28); /* gold hairline rule */

  /* --- type ------------------------------------------------------------ */
  --hnb-font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --hnb-font-body: 'Outfit', system-ui, -apple-system, sans-serif;
  --hnb-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Tracking tightens as type scales up — the core of the wordmark feel. */
  --hnb-track-hero: -0.045em;
  --hnb-track-display: -0.035em;
  --hnb-track-tight: -0.02em;
  --hnb-track-body: -0.011em;
  --hnb-track-eyebrow: 0.2em; /* the one place letters open up */
}

body.hnb-app {
  background: var(--hnb-ink);
  color: var(--hnb-fog);
  font-family: var(--hnb-font-body);
  letter-spacing: var(--hnb-track-body);
  -webkit-font-smoothing: antialiased;
}

/* --- type components ------------------------------------------------- */

.hnb-hero {
  font-family: var(--hnb-font-display);
  font-weight: 700;
  letter-spacing: var(--hnb-track-hero);
  line-height: 0.95;
  color: #fff;
}

.hnb-display {
  font-family: var(--hnb-font-display);
  font-weight: 700;
  letter-spacing: var(--hnb-track-display);
  line-height: 1.04;
  color: #fff;
}

.hnb-eyebrow {
  font-family: var(--hnb-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--hnb-track-eyebrow);
  text-transform: uppercase;
  color: var(--hnb-ash);
}

.hnb-text-gradient {
  background: linear-gradient(100deg, var(--hnb-violet-lift), var(--hnb-pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Gold is reserved for a single emphasised value per view. */
.hnb-text-gold {
  color: var(--hnb-gold-soft);
}

/* --- surfaces --------------------------------------------------------- */

.hnb-glass {
  background: var(--hnb-glass);
  border: 1px solid var(--hnb-glass-border);
  border-radius: 1rem;
}

.hnb-rule-gold {
  border: 0;
  border-top: 1px solid var(--hnb-hairline);
}

/* --- buttons ---------------------------------------------------------- */

.hnb-btn-primary {
  background: var(--hnb-sweep);
  color: #fff;
  font-family: var(--hnb-font-display);
  font-weight: 600;
  letter-spacing: var(--hnb-track-tight);
  border-radius: 999px;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.hnb-btn-primary:hover {
  filter: brightness(1.08);
}

.hnb-btn-ghost {
  background: var(--hnb-glass);
  border: 1px solid var(--hnb-glass-border);
  color: #fff;
  font-family: var(--hnb-font-display);
  font-weight: 600;
  letter-spacing: var(--hnb-track-tight);
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.hnb-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(124, 92, 255, 0.4);
}

/* --- logo ------------------------------------------------------------- */

.hnb-logo {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.hnb-logo--sm { width: 2rem; height: 2rem; }
.hnb-logo--md { width: 3rem; height: 3rem; }

.hnb-logo--lg {
  width: 5rem;
  height: 5rem;
  filter: drop-shadow(0 10px 30px rgba(124, 92, 255, 0.3));
}

.hnb-logo--hero {
  width: min(7rem, 22vw);
  height: min(7rem, 22vw);
  margin-inline: auto;
  filter: drop-shadow(0 16px 44px rgba(124, 92, 255, 0.28));
}

.group:hover .hnb-logo {
  filter: drop-shadow(0 0 16px rgba(232, 71, 154, 0.4));
}

/* --- lockup ----------------------------------------------------------- */
/* Mark + wordmark. Built in CSS rather than baked into an SVG so the
   wordmark renders in the live Outfit webfont at any size. */

.hnb-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}

.hnb-lockup__word {
  font-family: var(--hnb-font-display);
  font-weight: 700;
  letter-spacing: var(--hnb-track-display);
  color: #fff;
  line-height: 1;
}

.hnb-lockup__sub {
  display: block;
  font-family: var(--hnb-font-display);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: var(--hnb-track-eyebrow);
  text-transform: uppercase;
  color: var(--hnb-ash);
  margin-top: 0.25rem;
}

/* --- forms ------------------------------------------------------------ */

.hnb-field-label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--hnb-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--hnb-track-eyebrow);
  text-transform: uppercase;
  color: var(--hnb-ash);
}

.hnb-select {
  appearance: none;
  font-family: var(--hnb-font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--hnb-track-tight);
  cursor: pointer;
  color: #fff;
  background-color: var(--hnb-char);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c5cff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

.hnb-select option {
  font-family: var(--hnb-font-display);
  font-weight: 600;
  background: var(--hnb-char);
  color: #fff;
}