/* ============================================================
   Dennis Stevens Studio — Typography
   Editorial serif leads, neutral sans supports. Display set in
   Cormorant Garamond with open tracking; body in Inter for
   clarity. Optimal measure ~70 characters.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-sans:  "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* ---- Display / heading scale (Cormorant Garamond) ----
     Sizes follow the storefront spec: H1 72 / H2 42 / H3 24,
     each with progressively tighter open tracking.            */
  --fs-display:  clamp(3.25rem, 6vw, 4.5rem);    /* @kind font */
  --fs-h1:       clamp(2.5rem, 4.4vw, 3.375rem); /* @kind font */
  --fs-h2:       clamp(2rem, 3vw, 2.625rem);     /* @kind font */
  --fs-h3:       1.5rem;                          /* @kind font */
  --fs-h4:       1.25rem;                         /* @kind font */

  --lh-display:  0.98; /* @kind font */
  --lh-h2:       1.1;  /* @kind font */
  --lh-h3:       1.2;  /* @kind font */
  --tracking-display: 0.015em;  /* +15 */
  --tracking-h2:      0.010em;  /* +10 */
  --tracking-h3:      0.005em;  /* +5  */

  /* ---- Body / UI scale (Inter) ---- */
  --fs-lead:    1.25rem;   /* 20px intro paragraphs */
  --fs-body:    1.125rem;  /* 18px running text     */
  --fs-base:    1rem;      /* 16px                  */
  --fs-sm:      0.875rem;  /* 14px nav / meta       */
  --fs-xs:      0.75rem;   /* 12px micro-labels     */

  --lh-body:    1.6;  /* @kind font */
  --lh-snug:    1.45; /* @kind font */

  /* ---- Eyebrow / nav label ---- */
  --tracking-label: 0.18em;  /* small caps labels  */
  --tracking-nav:   0.08em;  /* nav items          */
  --weight-label:   500;

  /* ---- Weights ---- */
  --weight-reg:    400;
  --weight-med:    500;
  --weight-semi:   600;
}

/* ---- Optional helper classes (foundations / quick use) ---- */
.ds-display {
  font-family: var(--font-serif);
  font-weight: var(--weight-reg);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
}
.ds-h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-reg);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
  color: var(--text-primary);
}
.ds-h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-semi);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
  color: var(--text-primary);
}
.ds-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-body);
}
.ds-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.ds-label {
  font-family: var(--font-sans);
  font-weight: var(--weight-label);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ds-nav {
  font-family: var(--font-sans);
  font-weight: var(--weight-med);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}