/* ============================================================
Trustetch v2 — shared design system "Deep brand + duotone"
Dark immersive navy + blue→cyan signature. Used by all 7 v2 pages.
Tokens here are the single source of truth (see DESIGN.md).
============================================================ */
@font-face{
/* Clash Display is loaded via Fontshare in each .
This is only a metric-friendly fallback declaration name. */
font-family:"ClashFallback";src:local("Space Grotesk"),local("Arial");
}
:root{
/* ---- surfaces (navy depth ladder) ---- */
--bg:#0B1437; /* dominant page surface */
--bg-deep:#0A1030; /* deepest wells / footer */
--panel:#111C4A; /* raised panels, cards */
--panel-2:#16235A; /* hover / nested panel */
--hair:#1A2658; /* hairline borders */
--hair-strong:#27357A; /* emphasized border */
/* ---- accents (the duotone signature) ---- */
--blue:#3B82F6;
--cyan:#22D3EE;
--blue-deep:#2563EB;
--duo:linear-gradient(100deg,var(--blue) 0%,var(--cyan) 100%);
--duo-soft:linear-gradient(100deg,rgba(59,130,246,.16),rgba(34,211,238,.16));
/* ---- text ---- */
--ink:#EAF0FF; /* primary */
--ink-mut:#9FB0D9; /* secondary (AA on navy) */
--ink-soft:#6E7FB0; /* decorative meta only */
/* ---- semantic ---- */
--ok:#34D399;
--warn:#FBBF24;
--err:#F87171;
/* ---- type ---- */
--display:"Clash Display","Space Grotesk","ClashFallback",system-ui,sans-serif;
--sans:"Inter",-apple-system,system-ui,"Segoe UI",sans-serif;
--mono:"JetBrains Mono","Geist Mono",ui-monospace,Menlo,monospace;
/* ---- spacing scale (8px base) ---- */
--s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem; --s7:6rem;
--gutter:clamp(1.25rem,4vw,4.5rem);
--maxw:1200px;
/* ---- radius (deliberate, modern fintech — not lazy 2xl) ---- */
--r-sm:8px; --r:14px; --r-lg:20px; --r-pill:999px;
/* ---- motion ---- */
--ease:cubic-bezier(.22,.7,.2,1);
--t-fast:.22s; --t:.4s; --t-slow:.7s;
/* ---- glow ---- */
--glow-blue:0 0 0 1px rgba(59,130,246,.35),0 8px 40px -12px rgba(59,130,246,.55);
--glow-cyan:0 0 0 1px rgba(34,211,238,.30),0 10px 50px -14px rgba(34,211,238,.5);
--shadow:0 18px 50px -24px rgba(2,6,23,.9);
}
*{box-sizing:border-box;margin:0;padding:0}
/* ---- responsive breakpoint system (single source of truth — see DESIGN.md §5) ----
xl 1024px desktop refinements
lg 980px 4-up grids -> 2-up (admin stats)
md 880px hero/login split -> stacked; nav -> hamburger; verify result -> 1col
sm 760px legal/footer stack; admin sidebar -> top tab-bar; index grids tighten
xs 600px index trust layers -> 1col
xxs 430px phone tuning: full-width CTAs, display headline scale-down, bottom-sheet auth
The auth modal becomes a bottom-sheet at <=560px. All page