/* ============================================================
   Happy Quills — Typography tokens
   Display headlines set in Creative Vintage (vintage serif),
   everything else in Poppins. Headlines are BIG, tight, and
   often sit inside colored highlight blocks.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Creative Vintage", "Playfair Display", Georgia, serif;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Brittany Signature", "Sapphire Script", "Segoe Script", cursive;

  /* ---- Weights (Poppins) ---- */
  --fw-light: 300;    /* @kind other */
  --fw-regular: 400;  /* @kind other */
  --fw-medium: 500;   /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700;     /* @kind other */
  --fw-extrabold: 800;/* @kind other */
  --fw-black: 900;    /* @kind other */

  /* ---- Type scale ---- */
  --fs-display-xl: 88px;   /* carousel hero headline */
  --fs-display-lg: 64px;   /* big statement */
  --fs-display-md: 44px;   /* section title */
  --fs-display-sm: 32px;   /* card title */
  --fs-h1: 34px;
  --fs-h2: 26px;
  --fs-h3: 20px;
  --fs-body-lg: 20px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;

  /* ---- Line heights ---- */
  --lh-tight: 0.98;   /* @kind other */
  --lh-snug: 1.15;    /* @kind other */
  --lh-normal: 1.5;   /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-tight: -0.01em; /* @kind other */
  --ls-normal: 0;      /* @kind other */
  --ls-wide: 0.04em;   /* @kind other */
  --ls-caps: 0.08em;   /* @kind other */

  /* ---- Semantic roles ---- */
  --role-hero-family: var(--font-display);
  --role-hero-weight: var(--fw-regular);
  --role-hero-line: var(--lh-tight);

  --role-heading-family: var(--font-display);
  --role-body-family: var(--font-sans);
  --role-body-weight: var(--fw-regular);
  --role-label-family: var(--font-sans);
  --role-label-weight: var(--fw-bold);
}