/* ===========================================================================
   At The River — Typography
   Cormorant Garamond (elegant high-contrast display serif) over Mulish
   (quiet humanist sans). Serif for voice + numbers; sans for reading + UI.
   =========================================================================== */

:root {
  /* Families */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:    'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Fluid display sizes — the brand voice. Wide letter-spacing on the
     wordmark treatment; serif set airy and light. */
  --text-display: clamp(3.5rem, 8vw, 7rem);   /* hero wordmark          */
  --text-h1: clamp(2.5rem, 5vw, 4rem);        /* page title             */
  --text-h2: clamp(2rem, 3.5vw, 3rem);        /* section title          */
  --text-h3: 1.75rem;                         /* sub-section            */
  --text-h4: 1.35rem;                         /* card title             */

  /* Body (sans) */
  --text-lead: 1.25rem;    /* intro paragraphs            */
  --text-base: 1rem;       /* default body                */
  --text-sm: 0.875rem;     /* captions                    */
  --text-xs: 0.75rem;      /* meta / labels               */

  /* Eyebrow — the signature small-caps label used throughout the brand */
  --text-eyebrow: 0.78rem;
  --tracking-eyebrow: 0.28em;
  --tracking-wordmark: 0.14em;  /* AT THE RIVER spacing    */
  --tracking-wide: 0.04em;

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

  /* Line heights */
  --leading-tight: 1.08;   /* display                     */
  --leading-snug: 1.25;    /* headings                    */
  --leading-normal: 1.65;  /* body                        */
}

/* --- Optional helper classes (consumers may use tokens directly) ---------- */
.at-display {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wordmark);
  color: var(--text-strong);
}
.at-h1 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h1); line-height: var(--leading-snug); letter-spacing: 0.01em; color: var(--text-strong); }
.at-h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h2); line-height: var(--leading-snug); color: var(--text-strong); }
.at-h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h3); line-height: var(--leading-snug); color: var(--text-strong); }
.at-h4 { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-h4); line-height: var(--leading-snug); color: var(--text-strong); }

.at-lead { font-family: var(--font-body); font-weight: var(--weight-light); font-size: var(--text-lead); line-height: var(--leading-normal); color: var(--text-body); }
.at-body { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-body); }
.at-small { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }

.at-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}