/* ============================================================
   Conmarble Natural Finishes — Typography (§B2.5, §B4)
   Two-serif system. Marcellus (display, single weight, UPPERCASE,
   tracked). Minion (everything functional). DIN Next for Arabic.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Marcellus", "Times New Roman", serif;        /* H1 / cover / hero / wordmark */
  --font-text:    "Minion Variable Concept", "Minion Pro", Georgia, serif; /* body / functional */
  --font-arabic:  "DIN Next LT Arabic", "Tahoma", sans-serif;   /* all Arabic */

  /* ---- Tracking tiers (§B4.1) ----
     Wordmark/display = 0.5em (widest) · H1 = 0.25em · token = 0; narrows as
     text grows more functional, disappears in body copy. */
  --track-wordmark: 0.5em;
  --track-display:  0.5em;
  --track-h1:       0.25em;
  --track-label:    0.08em;   /* small-caps labels */
  --track-body:     0;        /* @kind font */

  /* ---- Type scale (display in Marcellus; rest in Minion) ---- */
  --fs-hero:    clamp(2.75rem, 5vw, 4.5rem);  /* @kind font */
  --fs-h1:      clamp(2rem, 3.5vw, 3rem);     /* @kind font */
  --fs-h2:      1.75rem;                       /* Minion, sentence case           */
  --fs-h3:      1.375rem;
  --fs-h4:      1.125rem;
  --fs-body:    1.0625rem;                     /* ~17px comfortable reading       */
  --fs-body-lg: 1.1875rem;
  --fs-small:   0.9375rem;
  --fs-eyebrow: 0.75rem;                       /* small Minion label              */
  --fs-caption: 0.8125rem;

  /* ---- Weights ---- */
  --fw-regular: 400;   /* @kind font */
  --fw-bold:    700;   /* @kind font */

  /* ---- Leading (generous; §B4.2) ---- */
  --lh-tight:   1.1;    /* @kind font */
  --lh-heading: 1.25;   /* @kind font */
  --lh-body:    1.65;   /* @kind font */
  --lh-loose:   1.8;    /* @kind font */
}

/* ---- Reusable type roles ---------------------------------- */

.cmf-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  color: var(--text-body);
}

.cmf-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--track-h1);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  color: var(--text-h1);
}

.cmf-h2 {
  font-family: var(--font-text);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--text-h2);
}
.cmf-h3 {
  font-family: var(--font-text);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--text-h3);
}
.cmf-h4 {
  font-family: var(--font-text);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--text-h4);
}

.cmf-eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

.cmf-body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.cmf-caption {
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  color: var(--text-caption);
}

/* The slogan is always bold italic Minion (§B4.2) */
.cmf-slogan {
  font-family: var(--font-text);
  font-weight: var(--fw-bold);
  font-style: italic;
  color: var(--text-body);
  white-space: nowrap; /* slogan is always one line, never split (§B4.2) */
}

/* Arabic — follows its Latin level, set RTL (§B4.3) */
.cmf-arabic {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
}