/* ============================================================
   MachineDog · TYPOGRAPHY TOKENS
   Inter for everything UI + display; JetBrains Mono for code,
   eyebrows, metrics and the "machine" voice.
   ============================================================ */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Type scale (1.250 major-third-ish, tuned for product UI) */
  --text-2xs: 0.6875rem;  /* 11px — mono eyebrows, meta */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px — body small / UI default */
  --text-base: 1rem;      /* 16px — body */
  --text-lg:  1.125rem;   /* 18px — lead */
  --text-xl:  1.375rem;   /* 22px */
  --text-2xl: 1.75rem;    /* 28px — card titles */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 3rem;       /* 48px — section heads */
  --text-5xl: 3.75rem;    /* 60px — hero */
  --text-6xl: 4.75rem;    /* 76px — display */

  /* Line heights */
  --leading-none: 0.95;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;

  /* Tracking */
  --tracking-tight: -0.04em;   /* display headlines */
  --tracking-snug: -0.02em;    /* titles */
  --tracking-normal: 0;
  --tracking-wide: 0.16em;     /* wordmark */
  --tracking-widest: 0.22em;   /* mono eyebrows */
}

/* Reusable type roles ------------------------------------- */
.md-display {
  font-family: var(--font-sans);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-none);
}
.md-headline {
  font-family: var(--font-sans);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.md-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
}
.md-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-muted-foreground);
}
.md-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
}
.md-mono {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
}

/* Gradient text — the cyber headline treatment */
.md-text-gradient {
  background: var(--gradient-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}