/* ============================================================
   OperatorsDen — Typography
   Inter only. Tight tracking on display, wide on eyebrows.
   ============================================================ */
:root {
  /* ---- Weights ---- */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* ---- Type scale (role-based) ---- */
  /* Display / H1 — 800, clamp 48–72, -1px */
  --display-size: clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem);
  --display-weight: 800;
  --display-tracking: -0.02em;
  --display-leading: 1.02;

  /* Heading / H2 — 700, clamp 28–40, -0.5px */
  --h2-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem);
  --h2-weight: 700;
  --h2-tracking: -0.015em;
  --h2-leading: 1.1;

  /* Subheading / H3 — 600, 18–22, -0.3px */
  --h3-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --h3-weight: 600;
  --h3-tracking: -0.01em;
  --h3-leading: 1.25;

  /* Eyebrow / Label — 700, 10–11, +2.5px, uppercase */
  --eyebrow-size: 0.6875rem;     /* 11px */
  --eyebrow-weight: 700;
  --eyebrow-tracking: 0.16em;    /* ~+2.5px @ 11px */
  --eyebrow-transform: uppercase; /* @kind other */

  /* Body — 400, 14–16, 0 */
  --body-size: 1rem;             /* 16px */
  --body-size-sm: 0.875rem;      /* 14px */
  --body-weight: 400;
  --body-leading: 1.6;

  /* CTA / Button — 700, 13–15, 0 */
  --button-size: 0.9375rem;      /* 15px */
  --button-size-sm: 0.8125rem;   /* 13px */
  --button-weight: 700;

  /* Caption / fine print */
  --caption-size: 0.8125rem;     /* 13px */
}

/* ---- Optional utility classes (consumers may use directly) ---- */
.od-display {
  font-family: var(--font-sans);
  font-weight: var(--display-weight);
  font-size: var(--display-size);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  color: var(--text-heading);
}
.od-h2 {
  font-family: var(--font-sans);
  font-weight: var(--h2-weight);
  font-size: var(--h2-size);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading);
  color: var(--text-heading);
}
.od-h3 {
  font-family: var(--font-sans);
  font-weight: var(--h3-weight);
  font-size: var(--h3-size);
  letter-spacing: var(--h3-tracking);
  line-height: var(--h3-leading);
  color: var(--text-heading);
}
.od-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--eyebrow-weight);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-transform);
  color: var(--text-eyebrow);
}
.od-body {
  font-family: var(--font-sans);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--text-body);
}
.od-emphasis { color: var(--text-emphasis); }