/* =============================================================
   PartyPool — design tokens
   Change palette and type HERE. Never put hex values in
   component files — always reference a token.
   ============================================================= */

/* ---- Chakra Petch: self-hosted, 4 weights ---- */
/* fonts live at frontend/fonts/ relative to this file       */
@font-face {
  font-family: "Chakra Petch";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/chakra-petch-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/chakra-petch-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/chakra-petch-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/chakra-petch-latin-700-normal.woff2") format("woff2");
}

/* ---- Palette ---- */
:root {
  /* Ground and text */
  --ink:  #0a0e1a;   /* page background — partypool deep navy        */
  --bone: #edeae3;   /* main text                                     */
  --gray: #8a97a6;   /* secondary text, hairlines, quiet labels       */

  /* PartyPool brand cyan — the one "alive / chosen" colour.
     Maps to MGSHK's --red role: hover wipe, focus ring, live dot,
     current step. Use sparingly.                                     */
  --accent: #00d4ff;

  /* Semantic — same meaning everywhere, never swap them             */
  --ok:   #5fd394;        /* done, paid, confirmed, resolved          */
  --warn: #e8b04a;        /* waiting, needs a look, unresolved        */
  --info: #59a8e0;        /* refunds, neutral news, DD info           */

  /* Ambient glow — rgb triplet, low alpha only                      */
  --glow: 0, 212, 255;   /* cyan; use as rgba(var(--glow), 0.08)     */

  /* ---- Typography ---- */
  --font: "Chakra Petch", "Arial Narrow", system-ui, sans-serif;
  --font-mono: "Courier New", "Lucida Console", ui-monospace, monospace;

  /* ---- Layout ---- */
  /* Fluid side gutter: 1.25rem on phones → 4.5rem on wide screens  */
  --pad:  clamp(1.25rem, 5vw, 4.5rem);

  /* Content widths (centred layout — partypool keeps its own grammar) */
  --w-text:  38rem;   /* body copy, step lists                        */
  --w-panel: 52rem;   /* cards, forms, banners                        */
  --w-page:  72rem;   /* max page container                           */

  /* ---- Spacing scale ---- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s8: 3rem;

  /* ---- Type scale ---- */
  --text-xs:  0.72rem;
  --text-sm:  0.82rem;
  --text-md:  1rem;
  --text-lg:  1.2rem;
  --text-xl:  1.5rem;

  /* ---- Letter-spacing scale ---- */
  --ls-tight:  0.04em;
  --ls-label:  0.14em;
  --ls-wide:   0.18em;
  --ls-caps:   0.20em;

  /* ---- Borders ---- */
  --hair: 1px solid rgba(138, 151, 166, 0.22);   /* hairline divider  */
  --radius-pill: 999px;                           /* pills only        */
  /* Everything else: square corners (border-radius: 0)              */
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink);
  /* Hard lock: prevents horizontal scroll after overflow fixes      */
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.6;
}

/* ---- Links ---- */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Focus ---- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- Scrollbar (optional, dark-themed) ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: rgba(138,151,166,0.35); border-radius: 3px; }

/* ---- Address / txid wrapping — applied globally ---- */
/* Any element with these classes will never cause horizontal overflow */
.addr, .txid, code {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ---- Coin logos ---- */
.coin-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
  display: inline-block;
  position: relative;
  top: -1px;   /* optical alignment with cap-height */
}
.coin-icon.lg {
  width: 28px;
  height: 28px;
  top: -2px;
}