/* tokens.css — 1:1 port of the V3 mockup token block (Merchant CX Signals.dc.html L17-70).
   Both themes; radius/shadow/animation scales; glass + aurora; font variables.
   Density is fixed to "comfortable" (--row-h:44px; --pad:14px) per mission spec F1 —
   the mockup's data-density variants are deliberately not ported. */

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Pre-render page background so theme application never flashes (spec F1). */
html{background:#0e1216}
html[data-theme="light"]{background:#f4f6f3}

.fx{
 --navy:#c3f53c;--navy-900:#a9e01f;--navy-800:#b6ea2e;--navy-700:#c3f53c;
 --green:#22a765;--green-dark:#1c8a53;--green-soft:rgba(34,167,101,.12);--cyan:#3d84c9;--amber:#c98a2e;--red:#dd5a55;--pink:#dd5a55;
 --ai:#7d5fd6;--ai-2:#9b82e6;--ai-soft:rgba(125,95,214,.12);
 --accent:#c3f53c;--accent-rgb:195,245,60;--accent-ink:#0e1216;
 --aurora-a:#c3f53c;--aurora-b:#35d07f;--aurora-c:#5aa9f2;
 --bg:#f4f6f3;--bg-deep:#eaeee9;--surface-solid:#ffffff;--surface-muted:#f0f3ee;--surface-sunken:#e9ede7;
 --border:rgba(15,25,20,.10);--border-strong:rgba(15,25,20,.16);--hairline:rgba(15,25,20,.06);
 --text:#10161a;--text-2:rgba(16,22,26,.72);--text-3:rgba(16,22,26,.54);--text-4:rgba(16,22,26,.4);
 --glass-bg:rgba(255,255,255,.62);--glass-bg-strong:rgba(255,255,255,.82);--glass-border:rgba(255,255,255,.7);
 --glass-inner:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(15,25,20,.04);
 --shadow-xs:0 1px 2px rgba(15,25,20,.06);--shadow-sm:0 2px 6px rgba(15,25,20,.06),0 1px 2px rgba(15,25,20,.04);
 --shadow-md:0 8px 24px rgba(15,25,20,.09),0 2px 6px rgba(15,25,20,.05);--shadow-lg:0 16px 48px rgba(15,25,20,.13),0 4px 12px rgba(15,25,20,.07);
 --shadow-xl:0 32px 80px rgba(15,25,20,.2),0 12px 24px rgba(15,25,20,.1);
 --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-2xl:28px;--r-pill:999px;
 --font-sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;--font-display:'Space Grotesk','Inter Tight',sans-serif;--font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
 --g1:#35d07f;--g2:#5aa9f2;--g3:#a98bf5;--g4:#c3f53c;--g5:#f5b53c;--g6:#f2635f;
 --ease:cubic-bezier(.2,.7,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
 --row-h:44px;--pad:14px;
 color:var(--text);-webkit-font-smoothing:antialiased;
}
.fx.dark{
 --bg:#0e1216;--bg-deep:#0a0e12;--surface-solid:#161d24;--surface-muted:#1c242c;--surface-sunken:#12181e;
 --border:rgba(255,255,255,.09);--border-strong:rgba(255,255,255,.16);--hairline:rgba(255,255,255,.05);
 --text:#eaf0ec;--text-2:rgba(234,240,236,.72);--text-3:rgba(234,240,236,.52);--text-4:rgba(234,240,236,.34);
 --glass-bg:rgba(255,255,255,.055);--glass-bg-strong:rgba(22,29,36,.85);--glass-border:rgba(255,255,255,.11);
 --glass-inner:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.3);
 --shadow-xs:0 1px 2px rgba(0,0,0,.4);--shadow-sm:0 2px 6px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
 --shadow-md:0 8px 24px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);--shadow-lg:0 16px 48px rgba(0,0,0,.6);--shadow-xl:0 32px 80px rgba(0,0,0,.7);
 --green:#35d07f;--green-dark:#5bdd97;--cyan:#5aa9f2;--amber:#f5b53c;--red:#f2635f;--pink:#f2635f;--ai:#a98bf5;--ai-2:#bda6ff;
 --green-soft:rgba(53,208,127,.16);--ai-soft:rgba(169,139,245,.18);
}
.fx ::selection{background:rgba(195,245,60,.28)}
.fx input,.fx select,.fx textarea{font-family:inherit;color:inherit}
/* :where() keeps the mockup's button reset semantics but at zero selector
   specificity — the mockup relied on inline styles which always win; our
   class-based components must win over this reset instead (rescope-1 #13/#14
   root cause: 0-1-1 beat every single-class button rule). */
.fx :where(button){font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.fx h1,.fx h2,.fx h3,.fx h4{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-weight:600}
.fx *::-webkit-scrollbar{width:10px;height:10px}
.fx *::-webkit-scrollbar-track{background:transparent}
.fx *::-webkit-scrollbar-thumb{background:rgba(15,25,20,.18);border-radius:10px;border:2px solid transparent;background-clip:content-box}
.fx.dark *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);background-clip:content-box}
.fxrow:hover{background:var(--surface-muted)!important}
.fxlink:hover{color:var(--accent)!important}
.fx a{color:var(--accent);text-decoration:none}
.fx a:hover{color:var(--text)}

@keyframes fx-a1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(10vw,8vw) scale(1.15)}}
@keyframes fx-a2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-8vw,6vw) scale(1.1)}}
@keyframes fx-a3{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-6vw,-8vw) scale(1.2)}}
@keyframes fx-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fx-in{from{opacity:0}to{opacity:1}}
@keyframes fx-shim{0%{background-position:-200% 0}100%{background-position:200% 0}}