/* Micro Markets — Ink/Lime skin for the wallet-bridge dapp.
 *
 * Overlays the package theme seam (vendor/genswarms-wallet-bridge/webapp/
 * theme.css, v0.3.1): compose bind-mounts this file over
 * /usr/share/nginx/html/theme.css, REPLACING the contract-only default
 * whole — so it is self-contained: the variable bindings plus every rule
 * that consumes them. Markup, element ids, and copy are untouched; both
 * pages (index.html + go.html) share this one file, and both admit the
 * wordmark + fonts (CSP img-src/font-src/style-src 'self').
 *
 * Brand: brand/README.md. Pairing rule — on Ink #01100D use Lime #87F900
 * and Orange #FF6C2B; NEVER Lime on white or Green on Ink. Headings =
 * Host Grotesk 600 / -0.02em; body = Inter. Fonts are SELF-HOSTED (zero
 * external hosts) — latin-subset variable woff2, deployment-local copies
 * of web/companion/brand/fonts/, mounted beside this file. Non-latin
 * glyphs fall back to the system stack.
 */

@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./host-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Flip the package default (color-scheme: light) — Ink page, dark UA
   * chrome (form controls, scrollbars) to match wallet in-app browsers. */
  color-scheme: dark;
  --bg: #01100d; /* Ink */
  --fg: #ffffff; /* headings / amounts / status */
  --muted: rgba(255, 255, 255, 0.55);
  --accent: #87f900; /* Lime — primary action face (14.4:1 on Ink, AAA) */
  --accent-fg: #01100d; /* Ink text on Lime */
  --danger: #ff6c2b; /* Orange — failure/expired status (6.9:1 on Ink, AA) */
  --border: rgba(255, 255, 255, 0.25);
  --font-display: "Host Grotesk", -apple-system, system-ui, "Segoe UI",
    sans-serif;
  --font-body: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
}

html {
  background: var(--bg); /* overscroll stays Ink */
}

body {
  background: var(--bg);
  color: rgba(255, 255, 255, 0.78); /* body/summary prose */
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  /* Page inset = 2.5rem (40px): the wordmark clear-space rule
   * (brand/README.md — one bar height on ALL sides, nothing enters, edges
   * included) must hold against the viewport edges too. At the 140px
   * render (scale 140/444) one symbol bar is 71.64 svg units = 22.6px and
   * even the full symbol column (125 units) is 39.4px, so a 40px inset
   * clears the strictest reading on top/left/right; env() adds the iOS
   * notch/home-bar insets (0 elsewhere). */
  margin: 0 auto;
  /* Primary surface is a phone wallet browser; on desktop/tablet widths a
   * content column keeps the Lime CTA from stretching the full viewport
   * (html stays Ink behind it). */
  max-width: 40rem;
  padding: calc(2.5rem + env(safe-area-inset-top, 0px))
    calc(2.5rem + env(safe-area-inset-right, 0px))
    calc(2.5rem + env(safe-area-inset-bottom, 0px))
    calc(2.5rem + env(safe-area-inset-left, 0px));
}

/* Wordmark header — CSS-only injection (vendor HTML is not editable).
 * White wordmark on Ink only (logo rule), 140px wide (min 96px; header
 * spec 120-160px), intrinsic ratio 444:125 -> 40px tall; the 2.5rem
 * bottom margin matches the page inset, giving one-bar-height clear
 * space on every side. Both pages render it (img-src 'self' on
 * index.html AND go.html as of package 0.3.1). */
body::before {
  content: "";
  display: block;
  width: 140px;
  height: 40px;
  margin: 0 0 2.5rem;
  background: url("./wordmark-white.svg") left center / contain no-repeat;
}

/* The wordmark IS the brand mark; the config-driven h1 repeats "Micro
 * Markets" right under it, so it is visually retired (sr-only pattern —
 * stays in the accessibility tree and as the page's heading for screen
 * readers; textContent intact for the e2e pin). */
h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Amount / order-summary line — display treatment per brand ("data and
 * numbers are first-class content"). pre-wrap keeps multi-line
 * summary_lines (joined with \n) on their own lines. */
#summary {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  font-size: 1.15rem;
  color: var(--fg);
  white-space: pre-wrap;
}

/* Primary actions — Lime face, Ink text, full-width 48px thumb target.
 * #terms-accept is the 0.5.0 compliance gate's accept button: same weight
 * as #pay (it IS the blocking action while the terms screen shows). */
button#pay,
button#terms-accept {
  font-family: var(--font-body);
  font-weight: 600;
  width: 100%;
  min-height: 48px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* Disabled = inert ghost, never dimmed Lime: opacity would composite the
 * Lime face over Ink into the forbidden Green-on-Ink family (brand
 * pairing rule), so the face goes transparent with quiet white text. Only
 * transient in-flight states hit this — dead states hide #pay entirely
 * (package 0.3.1). */
button#pay:disabled,
button#terms-accept:disabled {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: default;
}

/* Secondary actions (go.html launcher + "Open in MetaMask" fallback):
 * white text, quiet 25%-white border, transparent face. */
a.button,
#open-wallet {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
}

#status {
  color: var(--fg);
}

/* Outcome states — spec §2: success = Lime, error/expired/stale = Orange.
 * app.mjs (package 0.3.1) stamps data-state on terminal outcomes: #status
 * for signing/submit results, #summary when the order fails to load
 * (expired / not found / stale build). Progress text carries no stamp and
 * stays white. */
#status[data-state="error"],
#summary[data-state="error"] {
  color: var(--danger);
}

#status[data-state="success"] {
  color: var(--accent);
}

.muted {
  color: var(--muted);
  font-family: var(--font-body);
}

#manual code {
  color: var(--fg);
}