/* ============================================================
   TYPOGRAPHY — Cherry Noir
   Editorial pairing: a high-contrast display serif set large and
   light, a geometric sans for UI/body, a mono for agent output.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Cormorant Garamond', 'Hoefler Text', 'Times New Roman', serif;
  --font-sans:    'Jost', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', 'Menlo', monospace;

  /* ---- Type scale (editorial, generous) ---- */
  --text-2xs:  0.6875rem;  /* 11 — eyebrow / micro-label */
  --text-xs:   0.75rem;    /* 12 — meta, caption */
  --text-sm:   0.875rem;   /* 14 — UI small, dense body */
  --text-base: 1rem;       /* 16 — body */
  --text-md:   1.125rem;   /* 18 — lead body */
  --text-lg:   1.375rem;   /* 22 — small heading */
  --text-xl:   1.75rem;    /* 28 — card / block heading */
  --text-2xl:  2.25rem;    /* 36 — section heading */
  --text-3xl:  3rem;       /* 48 — page heading */
  --text-4xl:  4rem;       /* 64 — display */
  --text-5xl:  5.5rem;     /* 88 — hero display */
  --text-6xl:  7.5rem;     /* 120 — masthead */

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.06;   /* display */
  --leading-snug:    1.22;   /* headings */
  --leading-normal:  1.5;    /* UI */
  --leading-relaxed: 1.72;   /* long body */

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.16em;   /* eyebrow / nav caps */
  --tracking-widest:  0.32em;   /* micro-labels, spaced caps */

  /* ============================================================
     SEMANTIC TYPE ROLES
     (font / size / weight / leading / tracking bundles referenced
      by components; recreate the full stack when composing text)
     ============================================================ */

  --display-family:  var(--font-display);
  --display-weight:  var(--weight-regular);
  --display-leading: var(--leading-tight);
  --display-tracking:var(--tracking-tight);

  --heading-family:  var(--font-display);
  --heading-weight:  var(--weight-medium);
  --heading-leading: var(--leading-snug);

  --eyebrow-family:  var(--font-sans);
  --eyebrow-size:    var(--text-2xs);
  --eyebrow-weight:  var(--weight-medium);
  --eyebrow-tracking:var(--tracking-widest);

  --body-family:     var(--font-sans);
  --body-size:       var(--text-base);
  --body-weight:     var(--weight-regular);
  --body-leading:    var(--leading-relaxed);

  --ui-family:       var(--font-sans);
  --ui-weight:       var(--weight-medium);
  --ui-tracking:     var(--tracking-wide);

  --mono-family:     var(--font-mono);
  --mono-size:       var(--text-sm);
}