/* Brookland - Typography
   Cormorant Garamond -> display headlines, tagline, pull quotes ONLY.
                         Never use for small / long-form body.
   Montserrat          -> logo, UI, navigation, body, captions, labels. */
:root {
  /* ---- Families ---- */
  --font-display: "Cormorant Garamond", "Hoefler Text", Georgia, serif;
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Aliases by role */
  --font-headline: var(--font-display);   /* H1/H2 display, tagline */
  --font-ui: var(--font-sans);            /* nav, buttons, labels */
  --font-body: var(--font-sans);          /* paragraphs */

  /* ---- Weights ---- */
  --weight-light: 300;     /* long-form reading */
  --weight-regular: 400;   /* general body copy */
  --weight-medium: 500;    /* emphasis, labels */
  --weight-semibold: 600;  /* UI headings, logo wordmark */

  /* ---- Type scale (rem, 1rem = 16px) ---- */
  --text-2xs: 0.6875rem;   /* 11px - legal, micro labels */
  --text-xs: 0.75rem;      /* 12px - captions, eyebrow */
  --text-sm: 0.875rem;     /* 14px - meta, small UI */
  --text-base: 1rem;       /* 16px - body default */
  --text-md: 1.125rem;     /* 18px - lead body */
  --text-lg: 1.375rem;     /* 22px - H3 sub-head (serif) */
  --text-xl: 1.75rem;      /* 28px - small section head */
  --text-2xl: 2.375rem;    /* 38px - H2 section (serif) */
  --text-3xl: 3.25rem;     /* 52px - H1 display (serif) */
  --text-4xl: 4.5rem;      /* 72px - hero display (serif) */
  --text-5xl: 6rem;        /* 96px - oversized hero */

  /* ---- Line heights ---- */
  --leading-tight: 1.05;   /* large display serif */
  --leading-snug: 1.2;     /* headings */
  --leading-normal: 1.5;   /* body */
  --leading-relaxed: 1.65; /* long-form light body */

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.01em;   /* large serif display */
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;     /* buttons, nav */
  --tracking-eyebrow: 0.18em;  /* uppercase eyebrows / labels */

  /* ---- Composite role tokens ---- */
  --display-hero-size: clamp(2.75rem, 6vw, var(--text-4xl));
  --display-h1-size: clamp(2.25rem, 4.5vw, var(--text-3xl));
  --display-h2-size: clamp(1.75rem, 3vw, var(--text-2xl));
}