/* =========================================================
   /src/css/core/typography.css
   ========================================================= */
/*
  3Y typography contract

  - Global font ownership lives here.
  - Product, Help, Glossary, Methodology, Markets, and public editorial
    surfaces all resolve to the same Geist-based system unless a future
    brand-level exception is approved.
  - Page CSS should control layout, spacing, color, and component
    structure; it should not introduce a separate display font.
*/

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-product: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-editorial: var(--font-product);
  --font-sans: var(--font-product);

  /* Shared public hero display scale.
     Matches the homepage hero so Help, Platform, and other public support
     surfaces do not drift larger than the main brand entry page. */
  --type-public-hero-title: clamp(2.4rem, 4.4vw, 3.7rem);
}

html,
body {
  font-family: var(
    --font-sans,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif
  );
  color: var(--text-color, #111827);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   Public learning/support surfaces → shared product type
   ========================================================= */
.page-methodology,
.page-platform,
.page-help,
.page-glossary,
.page-glossary-term,
.page-markets,
.page-market-city {
  --font-sans: var(--font-editorial);
  font-family: var(--font-sans);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a,
span,
small,
strong,
em,
label,
summary {
  font-family: inherit;
}

h1,
h2,
h3 {
  letter-spacing: -0.025em;
}

h4,
h5,
h6 {
  letter-spacing: -0.015em;
}

/* =========================================================
   Global Hero Title
   ========================================================= */

.hero-title {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: var(--text-dark, var(--black, #111827));
  text-align: center;
  margin-bottom: 2.5rem;
  white-space: normal;
}

/* =========================================================
   Global Hero Subtitle
   ========================================================= */

.hero-sub {
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--text-secondary, #2c2c2c);
  text-align: center;
  margin-bottom: 2rem;
}

/* =========================================================
   Helper Classes
   ========================================================= */

.body-large {
  font-size: 1.125rem;
  line-height: 1.7;
}

.body-small {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* =========================================================
   Global Trademark
   ========================================================= */

.tm {
  font-size: clamp(0.55em, 0.45em, 0.75em);
  vertical-align: super;
  line-height: 0;
  opacity: 0.75;
  color: #5a5a5a;
  margin-left: 2px;
}

/* =========================================================
   3Y Link override
   ========================================================= */

.y-link {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 500;
}

.y-link:hover {
  color: var(--primary-dark);
}