/* ============================================================================
   tokens.css — the ONLY place colours, type scale, spacing, radius & shadow
   are defined for TSG Access. Every page (@imported into tsgaccess.css, and
   <link>ed into each standalone onboarding page) consumes these vars.

   BRAND: blue accent (#1e8bff, matching the Agency Agreement document) + the
   Roboto family, flat modern. Neutrals carry a slight blue bias. Semantic
   colours (ok / warn / danger / info) are deliberately kept SEPARATE from the
   accent so status never reads as "brand".
   ============================================================================ */
:root {
  /* Surfaces (dark navy ground — blue-biased neutral) */
  --ink-950:#050e1c; --ink-900:#0b1b33; --ink-800:#122a49;
  --surface-1:rgba(255,255,255,.07);
  --surface-2:rgba(255,255,255,.04);
  --surface-3:rgba(255,255,255,.03);

  /* Lines */
  --line:rgba(255,255,255,.16);
  --line-2:rgba(255,255,255,.11);
  --line-strong:rgba(30,139,255,.56);   /* blue-tinted strong line */

  /* Text (blue-biased neutrals) */
  --text-1:#eaf2ff;         /* primary */
  --text-2:#a7bddb;         /* muted   */
  --text-3:#9db2c8;         /* faint / captions */

  /* Brand + status */
  --accent:#1e8bff;         /* considered blue — single value, matches the agreement */
  --accent-hi:#49a3ff;      /* blue hover (lighter) */
  --accent-deep:#1570e6;    /* deeper blue for solid button fill (white text passes AA) */
  --accent-ink:#ffffff;     /* text ON blue buttons — white, ~4.7:1 on --accent-deep */
  --heading:#7db8ff;        /* soft-blue headings (legends, panel titles) — ONE value */

  --ok:#77e1a8; --ok-bg:rgba(119,225,168,.14);
  --warn:#ffce7a; --warn-bg:rgba(255,206,122,.16);
  --danger:#ffc2c2; --danger-bg:rgba(128,38,38,.30); --danger-line:rgba(255,166,166,.40);
  --info:#7cdcff;

  /* Neutral (the chosen neutral — slight blue bias) */
  --neutral-100:#dfe8f2; --neutral-300:#9eb2c8; --neutral-700:#2b4163;

  /* Type scale (rem) */
  --fs-700:1.4rem;  /* page/card H1 on interstitials */
  --fs-600:1.05rem; /* section / legend */
  --fs-500:0.95rem; /* body-strong, buttons */
  --fs-400:0.88rem; /* body */
  --fs-300:0.8rem;  /* captions, hints */
  --fs-200:0.72rem; /* pills, overline */

  /* Spacing (4px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* Radius — standardised (was a mix of 4/5/6/8/10px) */
  --r-sm:6px;   /* controls, pills, small cards */
  --r-md:8px;   /* buttons, inputs, cards */
  --r-lg:10px;  /* interstitial shell card, modals */

  /* Shadow */
  --sh-1:0 4px 12px rgba(0,0,0,.20);
  --sh-2:0 8px 24px rgba(0,0,0,.35);

  /* Focus ring (single definition — blue) */
  --focus:0 0 0 3px rgba(30,139,255,.26);

  /* Interstitial background (set-password, agreement, payment, kyc, login) */
  --bg-interstitial:
    radial-gradient(900px 500px at 15% 20%, #123a74 0, transparent 60%),
    radial-gradient(700px 450px at 85% 85%, #0d3a67 0, transparent 60%),
    var(--ink-900);

  /* ---- Legacy aliases (so templates referencing the old names stay cohesive) */
  --navy:var(--ink-950);
  --gold:var(--accent);        /* old "gold" refs now resolve to the blue accent */
  --muted:var(--text-2);
  --panel:var(--ink-800);
  --slate:var(--ink-900);
  --stroke-1:var(--line);
  --stroke-2:var(--line-2);
  --accent-2:var(--accent);
  --text:var(--text-1);
}

/* ---- Typeface: Roboto everywhere ------------------------------------------ */
html, body {
  font-family:"Roboto","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}

/* ============================================================================
   Global app-shell guard — NO body scroll, inner scroll only.
   The viewport is a fixed frame; exactly one inner region owns overflow-y:auto.
   svh = small viewport height, so the mobile URL-bar never creates a 1–60px
   scroll. Public marketing home opts OUT via body.is-marketing.
   ============================================================================ */
* { box-sizing: border-box; }

html, body { height: 100svh; margin: 0; overflow: hidden; }

/* The one intentional exception: the marketing home is a scrolling document. */
body.is-marketing { height: auto; min-height: 100svh; overflow: auto; }

/* ============================================================================
   Shared button components. Defined here (not only in tsgaccess.css) so the
   standalone interstitial pages — which link ONLY tokens.css — get consistent
   buttons too (login / set-password / agreement / payment / kyc).
   ============================================================================ */
.btn-primary, .btn-ghost {
  font: inherit; font-weight: 700; font-size: var(--fs-500); border-radius: var(--r-md);
  padding: 11px 16px; min-height: 44px; cursor: pointer; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: .15s ease;
}
.btn-primary { background: var(--accent-deep); color: var(--accent-ink); border-color: rgba(30,139,255,.55); box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--accent); transform: translateY(-1px); }
.btn-ghost { background: var(--surface-3); color: var(--text-1); border-color: var(--line); }
.btn-ghost:hover { background: rgba(30,139,255,.14); border-color: var(--line-strong); color: #eaf2ff; }
.btn-primary:disabled, .btn-ghost:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-primary[aria-busy="true"], .btn-ghost[aria-busy="true"] { cursor: wait; }