/* Samsoftpay design tokens — the ONE design language.
   Loaded first on every page (base.html + the standalone public pages).

   Self-hosted type: no fonts.googleapis / gstatic / unpkg / jsdelivr anywhere.
   Those CDNs are blocked in mainland China — the XY Vending engineers judging
   this site would otherwise see missing fonts and empty icon slots — and a
   payment page must not depend on (or leak visitors to) third-party CDNs
   (guardrail 20, extended to the whole shell).

   The alias trick: templates historically named five families (Inter, Urbanist,
   Lexend, Fraunces, JetBrains Mono). Instead of rewriting hundreds of
   font-family declarations, the legacy names are declared as @font-face aliases
   of the SAME Inter Variable file — every page converges on one typeface with
   zero template churn, and the checkout->status serif mismatch dies at the
   root. JetBrains Mono maps to the system mono stack (code must stay mono). */

@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: local("Cascadia Code"), local("Cascadia Mono"), local("Consolas"),
       local("Menlo"), local("DejaVu Sans Mono");
  font-display: swap;
}

:root {
  /* color — exactly two purples; slate neutrals; AA-safe semantic pairs.
     --primary here is THE single Samsoftpay brand color. base.html (dashboard
     shell) and landing.html deliberately do NOT redefine it any more — they
     used to ship #4d51b8 and #5759a8 respectively, so one merchant's checkout,
     dashboard and marketing page each wore a different purple. Change it here
     and it changes everywhere; do not re-add a per-template override. */
  --primary: #2e3192;
  --primary-deep: #1c1f5c;
  --ink: #0f172a;
  --body-c: #334155;
  --muted-c: #64748b;
  --faint: #94a3b8;
  --line-c: #e2e8f0;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --success-c: #059669;
  --success-bg: #ecfdf5;
  --warning-c: #b45309;
  --warning-bg: #fffbeb;
  --danger-c: #dc2626;
  --danger-bg: #fef2f2;

  /* radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* spacing (4px grid) */
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 5rem;

  /* shadows — three only */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .10);
  --shadow-brand: 0 4px 14px rgba(46, 49, 146, .30);
}

/* ── GLOBAL RESPONSIVE SAFETY NET ─────────────────────────────────────────
   Loaded on every page (landing + dashboard + public checkout). Stops the
   whole class of "page slashed in half / horizontal scroll on a phone" bugs
   at the root, so no single template can push the viewport wider than the
   screen. */
*, *::before, *::after { box-sizing: border-box; }
/* max-width (not overflow-x:hidden) so we don't break position:sticky nav on
   the docs page. The min-width:0 + overflow-wrap rules below fix the actual
   overflow causes; individual pages that need clipping (landing) set their
   own overflow-x:hidden. */
html, body { max-width: 100%; }
/* Media and code never exceed their column. */
img, svg, video, canvas, iframe, pre, table { max-width: 100%; }
/* The #1 cause of mobile overflow: a flex/grid CHILD refuses to shrink below
   its content width (min-width defaults to auto). Let children shrink so long
   text, code blocks and inputs wrap instead of blowing out the row. */
.stats-grid > *, .grid-2 > *, .quick-actions > *,
[style*="display:flex"] > *, [style*="display: flex"] > *,
[style*="display:grid"] > *, [style*="display: grid"] > * { min-width: 0; }
/* Long unbroken strings (references, keys, URLs, emails) wrap instead of
   forcing a wide row. */
code, .ref, .api-key-display, .detail-row span { overflow-wrap: anywhere; word-break: break-word; }