/* ============================================================
   PIAF ALIGNMENT STUDIO — TYPOGRAPHY
   Roles taken verbatim from the official PIAF type reference.
   Latin pairs Canela Deck (display) with Montserrat (UI/body);
   Cormorant Garamond carries italic pull-quotes. Traditional
   Chinese pairs Noto Serif HK (titles) with Noto Sans HK (body).
   Moglan is reserved for the logo/wordmark ONLY.
   ============================================================ */

:root {
  /* --- Families ------------------------------------------- */
  --font-logo:     'Moglan', 'Canela Deck', Georgia, serif;
  --font-display:  'Canela Deck', 'Cormorant Garamond', Georgia, 'Noto Serif HK', serif;
  --font-quote:    'Cormorant Garamond', 'Canela Deck', Georgia, serif;
  --font-sans:     'Montserrat', 'Noto Sans HK', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif-zh: 'Noto Serif HK', 'Canela Deck', serif;
  --font-quote-zh: 'Noto Serif HK', 'Canela Deck', serif; /* ZH pull-quote — italic synthesised, no native italic face (interim) */
  --font-sans-zh:  'Noto Sans HK', 'Montserrat', sans-serif;

  /* --- Type scale — TWO LAYERS -----------------------------
     1) PRIMITIVES: Tailwind's step names and values, verbatim
        (tailwindcss/theme.css). Bootstrap agrees on the anchor:
        body is 1rem = 16px. Matching them means `text-lg`,
        `text-2xl` … behave exactly as any Tailwind dev expects,
        instead of silently resolving to brand-specific values.
     2) ROLES: the brand vocabulary. Roles NEVER carry a raw size —
        each one points at a primitive, so the scale has a single
        source of truth and roles stay re-mappable.
     --------------------------------------------------------- */

  /* 1 · Primitives ----------------------------------------- */
  --text-xs:       0.75rem;   /* @kind spacing */ /* 12 */
  --text-sm:       0.875rem;  /* @kind spacing */ /* 14 */
  --text-base:     1rem;      /* @kind spacing */ /* 16 — the rem anchor */
  --text-lg:       1.125rem;  /* @kind spacing */ /* 18 */
  --text-xl:       1.25rem;   /* @kind spacing */ /* 20 */
  --text-2xl:      1.5rem;    /* @kind spacing */ /* 24 */
  --text-3xl:      1.875rem;  /* @kind spacing */ /* 30 */
  --text-4xl:      2.25rem;   /* @kind spacing */ /* 36 */
  --text-5xl:      3rem;      /* @kind spacing */ /* 48 */

  /* 2 · Roles (reference primitives only) ------------------- */
  --text-hero:     clamp(var(--text-4xl), 1.6rem + 3.2vw, var(--text-5xl)); /* @kind spacing */ /* 36 → 48 */
  --text-display:  var(--text-4xl);  /* @kind spacing */ /* 36 — display caps */
  --text-quote:    clamp(var(--text-2xl), 1.2rem + 1.5vw, var(--text-3xl)); /* @kind spacing */ /* 24 → 30 */
  --text-title:    var(--text-2xl);  /* @kind spacing */ /* 24 — card / section title */
  --text-subhead:  var(--text-xl);   /* @kind spacing */ /* 20 */
  --text-body:     var(--text-base); /* @kind spacing */ /* 16 — body default */
  --text-body-zh:  var(--text-base); /* @kind spacing */ /* 16 — CJK body */
  --text-subtitle: var(--text-xs);   /* @kind spacing */ /* 12 — uppercase subtitle */
  --text-eyebrow:  var(--text-xs);   /* @kind spacing */ /* 12 — uppercase micro-label (weight + tracking set it apart) */

  /* --- Weights -------------------------------------------- */
  /* 100/300 exist because the faces ship (specimens, external display work).
     PRODUCT FLOOR IS --w-regular (400) — never set UI text below it. */
  --w-thin:100;     /* @kind other */
  --w-light:300;    /* @kind other */
  --w-regular:400;  /* @kind other */
  --w-medium:500;   /* @kind other */
  --w-semibold:600; /* @kind other */
  --w-bold:700;     /* @kind other */
  --w-black:900;    /* @kind other */

  /* --- Line heights --------------------------------------- */
  --lh-tight:   0.98; /* @kind other */
  --lh-display: 1.06; /* @kind other */
  --lh-snug:    1.15; /* @kind other */
  --lh-body:    1.70; /* @kind other */
  --lh-body-zh: 1.85; /* @kind other */
  --lh-quote:   1.36; /* @kind other */

  /* --- Tracking ------------------------------------------- */
  --ls-eyebrow:  0.18em; /* @kind other */
  --ls-subtitle: 0.13em; /* @kind other */
  --ls-caps:     0.02em; /* @kind other */
  --ls-logo:     0.06em; /* @kind other */
  --ls-normal:   0;       /* @kind other */
}

/* ============================================================
   ROLE CLASSES — apply directly, or read the vars above.
   ============================================================ */

.piaf-logo {
  font-family: var(--font-logo);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-logo);
  text-transform: uppercase;
  line-height: 1;
}

.piaf-hero {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--text-hero);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.piaf-hero em { font-style: italic; font-weight: var(--w-regular); }

.piaf-display-caps {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.piaf-title {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--text-title);
  line-height: var(--lh-snug);
}

.piaf-quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: var(--w-medium);
  font-size: var(--text-quote);
  line-height: var(--lh-quote);
  text-wrap: pretty;
}

.piaf-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-black);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.piaf-subtitle {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--text-subtitle);
  letter-spacing: var(--ls-subtitle);
  text-transform: uppercase;
}

.piaf-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

/* Traditional-Chinese roles ---------------------------------- */
.piaf-title-zh {
  font-family: var(--font-serif-zh);
  font-weight: var(--w-regular);
  line-height: 1.3;
}
.piaf-body-zh {
  font-family: var(--font-sans-zh);
  font-weight: var(--w-regular);
  font-size: var(--text-body-zh);
  line-height: var(--lh-body-zh);
}
.piaf-quote-zh {
  font-family: var(--font-quote-zh);
  font-style: italic;            /* synthesised oblique — Noto Serif HK ships no italic face (interim) */
  font-weight: var(--w-regular);
  font-size: var(--text-quote);
  line-height: var(--lh-quote);
  text-wrap: pretty;
}