/* ============================================================
   INN8 TEC DESIGN LAB — TYPOGRAPHY
   One family: Inter (self-hosted variable, 100–900).
   Typography is the primary design element — it carries the
   brand; colour never does. Modular scale 1.25 (major third).
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

  /* Modular scale — ratio 1.25 from 16px */
  --text-xs:   0.8rem;      /* 12.8 */
  --text-sm:   0.875rem;    /* 14   */
  --text-base: 1rem;        /* 16   */
  --text-lg:   1.25rem;     /* 20   */
  --text-xl:   1.5625rem;   /* 25   */
  --text-2xl:  1.953rem;    /* 31.2 */
  --text-3xl:  2.441rem;    /* 39   */
  --text-4xl:  3.052rem;    /* 48.8 */
  --text-display: clamp(2.8rem, 6.5vw + 1rem, 6rem);      /* hero */
  --text-display-lg: clamp(3.2rem, 8vw + 1rem, 7.5rem);   /* statement hero */

  --leading-display: 1.02;
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.55;

  --tracking-display: -0.035em;
  --tracking-heading: -0.02em;
  --tracking-wide: 0.08em;
}

html { font-family: var(--font-sans); font-size: 16px; }

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

/* ---- Display & headings (Inter 800–900: the wordmark's voice) ---- */
.display,
.display-lg {
  font-weight: 850;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin: 0;
}
.display    { font-size: var(--text-display); }
.display-lg { font-size: var(--text-display-lg); font-weight: 900; }

h1, .h1 { font-size: var(--text-4xl); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); text-wrap: balance; margin: 0; }
h2, .h2 { font-size: var(--text-3xl); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); text-wrap: balance; margin: 0; }
h3, .h3 { font-size: var(--text-2xl); font-weight: 700; line-height: var(--leading-snug); letter-spacing: var(--tracking-heading); text-wrap: balance; margin: 0; }
h4, .h4 { font-size: var(--text-xl);  font-weight: 700; line-height: var(--leading-snug); margin: 0; }

/* ---- Body ---- */
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
.lead  { font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--muted); font-weight: 450; }
.small { font-size: var(--text-sm); }
.muted { color: var(--muted); }

/* ---- Eyebrow (section label — quiet, engineered) ---- */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Telemetry (monospace micro-labels, Concept B/system voice) ---- */
.telemetry {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Numerals (stats, pricing) ---- */
.tabular { font-variant-numeric: tabular-nums; }

/* ---- Wordmark (the logo, set live — never an image in the lab) ---- */
.wordmark {
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
}
.wordmark .eight { color: var(--gray-700); }
[data-theme="dark"] .wordmark .eight { color: var(--gray-500); }