/* =============================================================
   TYPOGRAPHY — Manoella Melim
   Display = Cormorant (canonical). Body = Hanken Grotesk.
   Two families only. Uppercase + wide tracking for display & labels.
   ============================================================= */

:root {
  /* ---- Families ---- */
  --font-display:     'Cormorant', 'Cormorant Garamond', Georgia, serif;
  --font-body:        'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Weights ---- */
  --fw-display-light: 300; /* @kind font */
  --fw-display:       400; /* @kind font */
  --fw-body-light:    300; /* @kind font */
  --fw-body:          400; /* @kind font */
  --fw-body-medium:   500; /* @kind font */
  --fw-body-semibold: 600; /* @kind font */

  /* ---- Display scale (Cormorant, uppercase, generous tracking) ----
     Fluid clamp(min, viewport, max): scales down on small screens, caps at the
     design size on desktop. Max values are the original 88/56/40/28px. ---- */
  --fs-display: clamp(2.75rem, 1.5rem + 6.25vw, 5.5rem); /* @kind spacing */ /* →88px */
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.75vw, 3.5rem); /* @kind spacing */ /* →56px */
  --fs-h2:      clamp(1.75rem, 1.3rem + 2.25vw, 2.5rem); /* @kind spacing */ /* →40px */
  --fs-h3:      clamp(1.4rem, 1.2rem + 1vw, 1.75rem);    /* @kind spacing */ /* →28px */

  /* ---- Body scale (Hanken Grotesk) ---- */
  --fs-lead:    1.25rem;  /* 20px — intro paragraphs      */
  --fs-body:    1rem;     /* 16px                         */
  --fs-small:   0.875rem; /* 14px                         */
  --fs-label:   0.75rem;  /* 12px — nav & eyebrow labels  */
  --fs-caption: 0.6875rem;/* 11px — captions / fine print */

  /* ---- Line heights ---- */
  --lh-display: 1.04; /* @kind font */
  --lh-heading: 1.12; /* @kind font */
  --lh-body:    1.65; /* @kind font */
  --lh-tight:   1.3;  /* @kind font */

  /* ---- Letter spacing (tracking) ---- */
  --ls-display:  0.06em;  /* @kind font */
  --ls-heading:  0.045em; /* @kind font */
  --ls-h3:       0.03em;  /* @kind font */
  --ls-label:    0.22em;  /* @kind font */
  --ls-label-sm: 0.28em;  /* @kind font */
  --ls-body:     0.01em;  /* @kind font */
}

/* ---- Optional ready-made text classes (consumers may use directly) ---- */
.mm-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display-light);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--text-primary);
}
.mm-h1 { font-family: var(--font-display); font-weight: var(--fw-display-light); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-transform: uppercase; color: var(--text-primary); }
.mm-h2 { font-family: var(--font-display); font-weight: var(--fw-display-light); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-transform: uppercase; color: var(--text-primary); }
.mm-h3 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: var(--ls-h3); text-transform: uppercase; color: var(--text-primary); }

.mm-lead { font-family: var(--font-body); font-weight: var(--fw-body-light); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-primary); }
.mm-body { font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-primary); }
.mm-small { font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--fs-small); line-height: var(--lh-tight); color: var(--text-secondary); }

.mm-label {
  font-family: var(--font-body);
  font-weight: var(--fw-body-medium);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-primary);
}
.mm-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-label-sm);
  text-transform: uppercase;
  color: var(--text-caption);
}