/* ============================================================
   TYPOGRAPHY — María Ynés Linares

   THE RULE (non-negotiable):
   · Inter ALL CAPS + wide tracking holds the STRUCTURE of a title.
   · Parisienne Title Case carries the EMOTIONAL keyword in that
     same line. They coexist — Inter is the skeleton, Parisienne
     is the soul. NEVER set Parisienne in all caps.
   · Body copy: Inter, regular weight, lowercase, clean & legible.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-script:  "Parisienne", "Brush Script MT", cursive;   /* emotional keyword */
  --font-sans:    "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-sans);   /* structural titles are Inter all-caps */
  --font-body:    var(--font-sans);

  /* ---- Weights (Inter variable) ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Tracking — the wide letterspacing is a brand signature ---- */
  --tracking-hero:   0.22em;   /* big structural titles, all caps */
  --tracking-title:  0.16em;   /* section titles, all caps */
  --tracking-eyebrow:0.30em;   /* small eyebrow / kicker labels */
  --tracking-wide:   0.08em;
  --tracking-normal: 0;
  --tracking-script: 0.005em;  /* Parisienne sits near-normal */

  /* ---- Type scale (rem · 1rem = 16px) ---- */
  --text-2xs:  0.6875rem;  /* 11px — micro labels */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px — body */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.25rem;    /* 36px */
  --text-3xl:  3rem;       /* 48px */
  --text-4xl:  4rem;       /* 64px */

  /* Parisienne reads small for its point size — bump it up */
  --script-md:  2rem;      /* 32px */
  --script-lg:  3rem;      /* 48px */
  --script-xl:  4.25rem;   /* 68px */
  --script-2xl: 6rem;      /* 96px */

  /* ---- Line heights ---- */
  --leading-tight:   1.1;
  --leading-snug:    1.28;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;
  --leading-script:  1.0;
}

/* ---- Reusable composition helpers ---- */

/* Structural title: Inter, all caps, wide tracking */
.myl-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-snug);
  color: var(--text-strong);
}

/* Small eyebrow / kicker above a title */
.myl-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* The emotional keyword — Parisienne, Title Case, NEVER all caps */
.myl-script {
  font-family: var(--font-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: var(--tracking-script);
  line-height: var(--leading-script);
  color: var(--text-script);
}

.myl-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
}