/* ============================================================
   THE UPGRADE — Base elements & brand utilities
   Sensible element defaults wired to the tokens, plus a small set
   of brand text/role helpers used across specimen cards & kits.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
a { color: var(--brand); text-decoration: none; }

/* ---- Type role utilities ---- */
.u-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.u-h1  { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-snug);    letter-spacing: var(--ls-display); }
.u-h2  { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.u-h3  { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.u-lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text-secondary); font-weight: var(--fw-regular); }
.u-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); }

.u-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}

.u-signature {
  font-family: var(--font-signature);
  font-weight: var(--fw-semibold);
  color: var(--brand);
}

/* ---- Gradient text (electric) ---- */
.u-gradient-text {
  background: var(--gradient-electric);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Dark section helper ---- */
.u-on-dark { background: var(--bg-dark); color: var(--text-on-dark); }
.u-on-dark h1, .u-on-dark h2, .u-on-dark h3 { color: var(--text-on-dark); }

/* ---- Silvery-white surface helper ----
   Cool, premium metallic ground — an alternate to the warm white for
   webpages and presentation decks. Re-tints borders/panels to the cool
   family so cards and rules read correctly on the silver. */
.u-on-silver {
  background: var(--gradient-silver);
  color: var(--text-primary);
  --bg-base: var(--silver-50);
  --bg-panel: var(--silver-100);
  --surface-card: var(--pure-white);
  --border-subtle: #DFE3EA;
  --border-strong: #CDD3DC;
}
/* Add an optional soft chrome sheen behind content */
.u-on-silver.u-silver-sheen { position: relative; isolation: isolate; }
.u-on-silver.u-silver-sheen::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(90% 70% at 8% 110%, rgba(94,140,255,.10) 0%, rgba(94,140,255,0) 60%);
}