/* ============================================================
   DESIGN TOKENS — "Proof Instrument"
   The page is a calibrated instrument you look through: carbon black, hairline rules, one signal colour per mode
   (cyan while the ledger is public, Zcash gold once it is shielded), and readouts that are real measurements.
   js/engine/motion.js mirrors the motion tokens for GSAP and the frame loop; util.js COL mirrors the colours for 3D.
   ============================================================ */
:root{
  /* surfaces */
  --bg:#08090A;
  --bg-2:#0E0F11;
  --panel:rgba(12,13,15,.84);
  --panel-2:rgba(18,19,22,.92);
  /* ink: text on carbon, three strengths */
  --ink:#EDEEF0;
  --ink-2:rgba(237,238,240,.66);
  --ink-3:rgba(237,238,240,.52);   /* 5:1 on carbon: small readouts stay legible */
  /* hairlines */
  --rule:rgba(255,255,255,.09);
  --rule-2:rgba(255,255,255,.16);
  --rule-3:rgba(255,255,255,.30);
  /* signals */
  --zec:#F4B728;
  --zec-hi:#FFD66B;
  --zec-dim:rgba(244,183,40,.14);
  --sig:#74DCFF;
  --sig-dim:rgba(116,220,255,.13);
  --pass:#4CF0A0;
  --pass-dim:rgba(76,240,160,.14);
  --fail:#FF5A4E;
  --fail-dim:rgba(255,90,78,.14);
  /* the current signal: cyan while public, gold once shielded (body[data-mode], or .z on a single element) */
  --accent:var(--sig);
  --accent-dim:var(--sig-dim);

  /* type */
  --f-display:"Mona Sans","Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-ui:"Geist","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"Geist Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --t-hero:clamp(46px,5.8vw,118px);
  --t-caption:clamp(34px,3.9vw,76px);
  --t-slate:clamp(26px,3.2vw,58px);
  --t-title:clamp(40px,3.6vw,62px);
  --t-h3:clamp(22px,1.7vw,27px);
  --t-body:16px;
  --t-small:13px;
  --t-micro:10.5px;
  --track-micro:.18em;

  /* space: a 4 px grid; the frame's inset scales with the viewport */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --frame:clamp(12px,1.5vw,22px);
  --gutter:clamp(20px,4.6vw,88px);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);    /* a phone on its side: the notch */
  --safe-r:env(safe-area-inset-right,0px);

  /* motion: a fast attack and an exact settle, never a float */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-snap:cubic-bezier(.2,.9,.1,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
  --d-1:.16s; --d-2:.32s; --d-3:.64s; --d-4:1.1s;
}
body[data-mode="shielded"],.z{--accent:var(--zec);--accent-dim:var(--zec-dim)}
.pub{--accent:var(--sig);--accent-dim:var(--sig-dim)}