@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* Font stacks — single humanist sans per branding/readme.md */
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Weights (Plex tops at 700) */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Modular scale — major third (1.25), body fixed, display fluid */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-title: clamp(1.375rem, 2.5vw, 2rem);
  --text-headline: clamp(1.75rem, 3.5vw, 2.875rem);
  --text-display: clamp(3.25rem, 6vw, 5.25rem);

  /* Semantic aliases */
  --text-body: var(--text-lg);
  --text-label: var(--text-sm);
  --text-caption: var(--text-xs);

  /* Line heights */
  --leading-display: 1.05;
  --leading-headline: 1.12;
  --leading-title: 1.2;
  --leading-body: 1.65;
  --leading-body-on-dark: 1.7;
  --leading-label: 1.5;

  /* Letter spacing */
  --tracking-display: -0.035em;
  --tracking-headline: -0.025em;
  --tracking-title: -0.015em;
  --tracking-caps: 0.08em;
  --tracking-body-on-dark: 0.01em;

  /* Measure */
  --measure-prose: 65ch;
}

html {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
}

/* Dark-band body copy: slightly open leading and tracking */
.type-on-dark {
  line-height: var(--leading-body-on-dark);
  letter-spacing: var(--tracking-body-on-dark);
}

/* Section kickers — uppercase labels */
.type-kicker,
.serve-kicker,
.contact-kicker {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--electric-blue);
}

.type-kicker.text-slate,
.serve-kicker.text-slate,
.contact-kicker.text-slate {
  color: var(--electric-blue);
}

.type-display-line {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.type-headline {
  font-family: var(--font-display);
  font-size: var(--text-headline);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-headline);
}

.type-title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

.type-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-body);
  max-width: var(--measure-prose);
}

.type-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-label);
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}