/**
 * Biizline — Type system tokens.
 *
 * Variable-font implementation:
 *   - Plus Jakarta Sans (display + headlines, weights 200–800)
 *   - Inter (body, UI, dashboard chrome, weights 100–900)
 *
 * Both are loaded via Google Fonts CSS2 (`?display=swap`) with `font-display:
 * swap` and a single weight-range request — variable axes give us the full
 * weight ladder in one HTTP/2 stream. We expose CSS variables so any
 * component can opt-in without re-declaring families.
 *
 * Pairing rationale (modern B2B SaaS):
 *   - Headlines: Plus Jakarta Sans 700 / 800 — humanist geometry, slightly
 *     warm, premium without being precious.
 *   - Body / UI: Inter 400 / 500 — neutral, mature, optimized for screen.
 *
 * Line-height pairings tuned for ~62-char measure:
 *   - Display: 1.04 (tight, optical), tracking -0.02em
 *   - H2:      1.10
 *   - Body:    1.55–1.6
 *   - UI:      1.4
 *
 * Loaded via `biiz-tokens` stylesheet — first in the cascade.
 */

:root{
  /* === Type families ============================================== */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  /* === Type scale (clamp() = fluid) =============================== */
  --fs-display: clamp(48px, 6.2vw, 88px);
  --fs-h1:      clamp(40px, 4.6vw, 64px);
  --fs-h2:      clamp(30px, 3.2vw, 44px);
  --fs-h3:      clamp(22px, 2.0vw, 28px);
  --fs-h4:      clamp(18px, 1.4vw, 20px);
  --fs-lede:    clamp(17px, 1.4vw, 20px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;

  /* === Line-height ================================================ */
  --lh-display: 1.04;
  --lh-tight:   1.10;
  --lh-snug:    1.25;
  --lh-base:    1.55;
  --lh-relaxed: 1.65;
  --lh-ui:      1.4;

  /* === Letter-spacing ============================================= */
  --ls-display: -0.022em;
  --ls-h2:      -0.015em;
  --ls-h3:      -0.005em;
  --ls-base:     0;
  --ls-eyebrow: 0.14em;

  /* === Weights (Plus Jakarta Sans + Inter variable axes) ========== */
  --fw-display: 800;
  --fw-h:       700;
  --fw-medium:  500;
  --fw-body:    400;

  /* === Colour tokens preserved (already declared elsewhere — kept
        here for fast-lookup of the type system). ================== */
  --ink:    #0E0E10;
  --ink-2:  #1F2024;
  --slate:  #5A5F6B;
  --paper:  #F4F2EC;
  --cream:  #FBF8F3;
  --line:   #E6DCCB;
}

/* ===== Base type — body, headings ================================= */
html{
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11"; /* Inter: slashed-zero + alt 4 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--ink);
  font-weight: var(--fw-body);
}

h1, h2, h3, h4, h5, h6,
.h-display{
  font-family: var(--font-display);
  font-weight: var(--fw-h);
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1, .h-display{
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h2{
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
}
h3{ font-size: var(--fs-h3); }
h4{ font-size: var(--fs-h4); }

p, li, dd, dt, figcaption{ text-wrap: pretty; }

/* ===== UI surfaces — buttons, dashboard ledger, mono labels ======= */
.btn,
button,
input,
select,
textarea{
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11", "tnum";
  letter-spacing: 0;
  line-height: var(--lh-ui);
}

.btn{
  font-weight: var(--fw-medium);
  font-size: 15px;
}

.eyebrow{
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--slate);
}

.lede{
  font-size: var(--fs-lede);
  line-height: var(--lh-relaxed);
  color: var(--slate);
  text-wrap: pretty;
}

/* Dashboard / numerical UI: tabular figures so columns align. */
.ui-numeric,
.ledger-amount,
.dashboard-stat,
[data-ui-numeric]{
  font-feature-settings: "tnum", "cv11";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

/* ===== Reduced motion: keep type stable, no animated weights ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* Legacy serif fallback — old Instrument Serif refs in legacy partials
   inherit our display family without forcing a swap. */
.font-serif,
[style*="Instrument Serif"]{ font-family: var(--font-display) !important; }