/* ============================================================================
   base.css — reset, base elements, typography, grain, a11y utilities
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth;}

body{
  font-family:var(--font-sans);
  font-size:1rem; line-height:1.55; font-weight:400;
  color:var(--text-2);
  background:var(--bg);
  letter-spacing:-0.006em;
  font-feature-settings:'liga' 1,'calt' 1; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;   /* mandatory: kills light-on-dark thickening */
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
  min-height:100vh;
  overflow-x:hidden;
}

/* Subtle grain — kills banding, adds tactility. Never visible film grain. */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.03; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg{display:block; max-width:100%;}
svg{fill:none;}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent-hover);}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
input,select{font:inherit; color:inherit;}
ul,ol{list-style:none; padding:0;}
::selection{background:rgba(45,212,191,0.22); color:var(--text-1);}

/* ---- Headings & type scale ----
   Tracking is a function of size: tight-negative on large, ~0 on body, positive
   on small caps. clamp() preferred values are rem+vw (never bare vw → keeps
   browser zoom working, WCAG 1.4.4). Display tracking capped at -0.02em so dense
   Cyrillic verticals don't collide. (research 2026-06-03) */
h1,h2,h4{color:var(--text-1); font-weight:600; text-wrap:balance;}
h3{color:var(--text-1); font-weight:500; text-wrap:balance;}
.t-display{font-size:clamp(2.5rem, 1.8rem + 3.2vw, 3.75rem); font-weight:600; line-height:1.05; letter-spacing:-0.02em; color:var(--text-1);}
h1,.t-h1{font-size:clamp(2rem, 1.6rem + 1.8vw, 2.75rem);   line-height:1.10; letter-spacing:-0.018em;}
h2,.t-h2{font-size:clamp(1.5rem, 1.3rem + 1vw, 1.875rem); line-height:1.15; letter-spacing:-0.015em;}
h3,.t-h3{font-size:clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem); font-weight:500; line-height:1.25; letter-spacing:-0.012em;}
h4,.t-h4{font-size:.9375rem; line-height:1.3; letter-spacing:0.005em; font-weight:500;}
.t-body{font-size:1rem; line-height:1.55;}
.t-body-sm{font-size:.875rem; line-height:1.5; letter-spacing:0;}
/* CAPTION / LABEL SYSTEM — one grammar, casing owned by the class, tracking rises as size
   falls. structural UPPERCASE label (eyebrow / column header / KPI label); the LEAD eyebrow
   is bright (--text-2), only genuinely-secondary labels mute via the --muted modifier. */
.eyebrow,.caption{
  font-size:.75rem; font-weight:500; line-height:1.4; letter-spacing:var(--track-caps-lg);
  text-transform:uppercase; color:var(--text-2);
}
.eyebrow--muted,.caption--muted{ color:var(--text-3); }   /* column headers, footer groups, meta rows */
/* micro structural label (KPI cap, flow from/to, tooltip key, unit) — 11px floor, never below */
.microcap{
  font-size:.6875rem; font-weight:500; line-height:1.3; letter-spacing:var(--track-caps-sm);
  text-transform:uppercase; color:var(--text-3);
}
/* descriptive sentence-case caption (prose under a heading / figure / widget) */
.caption-note{
  font-size:.8125rem; font-weight:400; line-height:1.5; letter-spacing:-0.006em;
  color:var(--text-3); max-width:64ch;
}
/* uniform fixed gap below EVERY eyebrow label — single source of truth, so the
   eyebrow→heading spacing is identical on every page/section (not ad-hoc per context) */
.eyebrow{margin-bottom:var(--space-3);}
/* prose readability: kill orphans/runts where supported (degrades to normal wrap) */
p,.prose li,.hero-sub,.sec-head p{text-wrap:pretty;}
/* optical alignment: trim half-leading above caps on tight UI so labels center to
   their box. Progressive enhancement only (Chrome/Edge 133+, Safari 18.2+). */
@supports (text-box-trim: trim-both){
  .nav-link,.btn,h1,h2,.t-display{text-box:trim-both cap alphabetic;}
}

/* ---- Numerics & machine data ---- */
.num,td.num,.mono,code,.mono-data{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum' 1,'lnum' 1,'zero' 1;
}
.mono,code,.mono-data{font-family:var(--font-mono); letter-spacing:0;}
.mono-data{font-size:.8125rem; line-height:1.5;}
/* address optical: a truncated address should read as ONE token, with the 0x prefix +
   ellipsis dimmed (wired via truncAddrRich in innerHTML-safe contexts; CSS is harmless otherwise) */
.mono-data,.addr,.copy-addr,.cat-row .wallet .addr,.table .addr{letter-spacing:-0.01em;}
.addr .dim,.copy-addr .dim,.mono-data .dim{color:var(--text-3);}
/* Display magnitude — Space Grotesk, treated as a designed object (tabular,
   slashed zero, tight tracking). Mono stays for addresses / dense tables. */
.kpi,.mono-kpi{font-family:var(--font-display); font-weight:500; line-height:1.1; color:var(--text-1);
  font-variant-numeric:tabular-nums lining-nums slashed-zero; font-feature-settings:'tnum' 1,'zero' 1,'ss01' 1; letter-spacing:-0.02em;}
.kpi{font-size:clamp(1.75rem, 3.5vw, 2.25rem);}
.mono-kpi{font-size:clamp(2.25rem, 6vw, 3.25rem);} /* hero/detail headline number */
/* Demoted currency / scale mark so the magnitude dominates ($ and K/M/B). */
.kpi .u,.mono-kpi .u,.kpi-unit{font-size:.46em; font-weight:500; color:var(--text-3); letter-spacing:0; vertical-align:.08em; margin-inline:1px;}
/* generic unit/currency mark — muted by default. Size is owned by the specific context
   (.kpi/.ec-usd/.detail-stats .u), not forced here, so it never undershoots the 12px floor
   in normal-text contexts while the display-font containers stay pinned by their own rules. */
.u{font-weight:500; color:var(--text-3); letter-spacing:0;}
/* small uppercase label that sits above/below a display number */
.kpi-cap{font-size:.6875rem; font-weight:500; letter-spacing:var(--track-caps-sm); text-transform:uppercase; color:var(--text-3);}

.up{color:var(--up);}
.down{color:var(--down);}
.muted{color:var(--text-3);}
.text-1{color:var(--text-1);}

/* ---- Focus ring — never removed ---- */
:focus{outline:none;}
:focus-visible{box-shadow:var(--focus-ring); border-radius:var(--radius-sm); outline:none;}
/* the box-shadow ring is stripped in forced-colors / high-contrast mode — restore a real outline */
@media (forced-colors:active){ :focus-visible{outline:2px solid Highlight; outline-offset:2px;} }

/* ---- Layout containers ---- */
.container{max-width:var(--container-marketing); margin-inline:auto; padding-inline:var(--gutter); width:100%;}
.container-prose{max-width:var(--container-prose); margin-inline:auto; padding-inline:var(--gutter); width:100%;}
.container-dash{max-width:var(--container-dashboard); margin-inline:auto; padding-inline:var(--gutter); width:100%;}

.section{padding-block:var(--space-24);}
.section-sm{padding-block:var(--space-16);}
.stack{display:flex; flex-direction:column;}
.row{display:flex; align-items:center;}
.gap-2{gap:var(--space-2);} .gap-3{gap:var(--space-3);} .gap-4{gap:var(--space-4);} .gap-6{gap:var(--space-6);}

/* ---- A11y utilities ---- */
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.skip-link{
  position:absolute; left:var(--space-4); top:calc(-1*var(--space-12)); z-index:200;
  background:var(--surface-3); color:var(--text-1); padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  transition:top var(--dur-2) var(--ease-std);
}
.skip-link:focus{top:var(--space-4);}

/* ---- Custom scrollbar (subtle, premium) ---- */
*{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.14) transparent;}
*::-webkit-scrollbar{width:10px; height:10px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12); border-radius:var(--radius-pill); border:2px solid transparent; background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.20); background-clip:content-box;}

/* ---- Scroll reveal (one quiet above-the-fold reveal; once) ---- */
[data-reveal]{opacity:0; transform:translateY(12px); transition:opacity var(--dur-5) var(--ease-out), transform var(--dur-5) var(--ease-out); transition-delay:calc(var(--i, 0) * 60ms);}
[data-reveal].is-in{opacity:1; transform:none;}

/* ---- Reduced motion: reduce, not remove ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  [data-reveal]{opacity:1; transform:none;}
}