/* ============================================================
   MOCNO — Typography
   Saira Condensed (900 display / 700 UI) ALWAYS reads loud and
   usually UPPERCASE. Roboto carries every word of body copy.
   Headlines are tight, condensed, high-contrast; body is calm.
   ============================================================ */

:root {
  /* ---- Families ----------------------------------------- */
  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif; /* hero / H1 / numbers */
  --font-heading: 'Saira Condensed', 'Arial Narrow', sans-serif; /* labels / subheads / buttons */
  --font-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent:  'Covered By Your Grace', 'Comic Sans MS', cursive; /* rare handwritten note */
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* hex / specs */

  /* ---- Weights ------------------------------------------ */
  --fw-black:    900;   /* @kind font */
  --fw-bold:     700;   /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-medium:   500;   /* @kind font */
  --fw-regular:  400;   /* @kind font */
  --fw-light:    300;   /* @kind font */

  /* ---- Type scale (display = Saira, sizes are generous) -- */
  --fs-display-xl: clamp(3.5rem, 7vw, 6.5rem);  /* @kind font */
  --fs-display-l:  clamp(2.75rem, 5vw, 4.5rem); /* @kind font */
  --fs-display-m:  clamp(2rem, 3.5vw, 3rem);    /* @kind font */
  --fs-h1:         2.5rem;   /* @kind font */
  --fs-h2:         2rem;     /* @kind font */
  --fs-h3:         1.5rem;   /* @kind font */
  --fs-h4:         1.25rem;  /* @kind font */

  --fs-body-lg:    1.125rem; /* @kind font */
  --fs-body:       1rem;     /* @kind font */
  --fs-body-sm:    0.875rem; /* @kind font */
  --fs-caption:    0.75rem;  /* @kind font */

  /* Section / eyebrow label (Saira, tiny, super-spaced) */
  --fs-label:      0.6875rem;/* @kind font */

  /* ---- Line heights ------------------------------------- */
  --lh-display: 0.95;   /* @kind other */
  --lh-heading: 1.05;   /* @kind other */
  --lh-snug:    1.3;    /* @kind other */
  --lh-body:    1.6;    /* @kind other */

  /* ---- Letter spacing ----------------------------------- */
  --ls-display: -0.01em;  /* @kind other */
  --ls-tight:   -0.02em;  /* @kind other */
  --ls-normal:  0;        /* @kind other */
  --ls-wide:    0.06em;   /* @kind other */
  --ls-label:   0.22em;   /* @kind other */
  --ls-button:  0.08em;   /* @kind other */
}

/* ---- Optional ready-made type classes --------------------
   Use the tokens directly in components; these are convenience
   classes for specimen cards, prose, and quick layouts. */

.mocno-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-l);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--text-heading);
}

.mocno-h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  text-transform: uppercase;
  color: var(--text-heading);
}

.mocno-label {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.mocno-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* The signature move: one hot word inside a headline */
.mocno-hot { color: var(--mocno-red); }

/* Gradient-clipped headline word (use ONCE per layout) */
.mocno-fire-text {
  background: var(--mocno-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}