/* ==========================================================================
   MB STUDIO — TYPOGRAPHY TOKENS
   Font: Inter. Type scale: 1.250 (Major Third), transcribed from the
   "Tipografia" Figma frame. size / line-height / weight are exact.
   ========================================================================== */

:root {
  /* Family */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-base: var(--font-sans);

  /* Weights (Inter variable, full range) */
  --weight-thin:       100;
  --weight-extralight: 200;
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;
  --weight-black:      900;

  /* ---- Type scale (1.250 Major Third) ---- */
  /* Display — 61 / 70 · Bold */
  --font-display-size:   61px;
  --font-display-line:   70px;
  --font-display-weight: var(--weight-bold);

  /* H1 — 49 / 56 · Bold */
  --font-h1-size:   49px;
  --font-h1-line:   56px;
  --font-h1-weight: var(--weight-bold);

  /* H2 — 39 / 47 · SemiBold */
  --font-h2-size:   39px;
  --font-h2-line:   47px;
  --font-h2-weight: var(--weight-semibold);

  /* H3 — 31 / 39 · SemiBold */
  --font-h3-size:   31px;
  --font-h3-line:   39px;
  --font-h3-weight: var(--weight-semibold);

  /* H4 — 25 / 33 · Medium */
  --font-h4-size:   25px;
  --font-h4-line:   33px;
  --font-h4-weight: var(--weight-medium);

  /* H5 — 20 / 28 · Medium */
  --font-h5-size:   20px;
  --font-h5-line:   28px;
  --font-h5-weight: var(--weight-medium);

  /* Body — 16 / 24 · Regular */
  --font-body-size:   16px;
  --font-body-line:   24px;
  --font-body-weight: var(--weight-regular);

  /* Small — 13 / 20 · Regular */
  --font-small-size:   13px;
  --font-small-line:   20px;
  --font-small-weight: var(--weight-regular);

  /* Caption — 10 / 16 · Regular */
  --font-caption-size:   10px;
  --font-caption-line:   16px;
  --font-caption-weight: var(--weight-regular);

  /* Eyebrow / all-caps label (from Combinazioni frame) — 13px Bold, +4px tracking */
  --font-eyebrow-size:      13px;
  --font-eyebrow-weight:    var(--weight-bold);
  --font-eyebrow-tracking:  4px;
}

/* ---- Optional utility classes (specimen convenience) ---- */
.mb-display { font-family: var(--font-sans); font-size: var(--font-display-size); line-height: var(--font-display-line); font-weight: var(--font-display-weight); letter-spacing: -0.02em; }
.mb-h1 { font-family: var(--font-sans); font-size: var(--font-h1-size); line-height: var(--font-h1-line); font-weight: var(--font-h1-weight); letter-spacing: -0.02em; }
.mb-h2 { font-family: var(--font-sans); font-size: var(--font-h2-size); line-height: var(--font-h2-line); font-weight: var(--font-h2-weight); letter-spacing: -0.01em; }
.mb-h3 { font-family: var(--font-sans); font-size: var(--font-h3-size); line-height: var(--font-h3-line); font-weight: var(--font-h3-weight); letter-spacing: -0.01em; }
.mb-h4 { font-family: var(--font-sans); font-size: var(--font-h4-size); line-height: var(--font-h4-line); font-weight: var(--font-h4-weight); }
.mb-h5 { font-family: var(--font-sans); font-size: var(--font-h5-size); line-height: var(--font-h5-line); font-weight: var(--font-h5-weight); }
.mb-body { font-family: var(--font-sans); font-size: var(--font-body-size); line-height: var(--font-body-line); font-weight: var(--font-body-weight); }
.mb-small { font-family: var(--font-sans); font-size: var(--font-small-size); line-height: var(--font-small-line); font-weight: var(--font-small-weight); }
.mb-caption { font-family: var(--font-sans); font-size: var(--font-caption-size); line-height: var(--font-caption-line); font-weight: var(--font-caption-weight); }
.mb-eyebrow { font-family: var(--font-sans); font-size: var(--font-eyebrow-size); font-weight: var(--font-eyebrow-weight); letter-spacing: var(--font-eyebrow-tracking); text-transform: uppercase; }