/* Little Twiglets — Typography tokens
   Quicksand: headings, logo, buttons, UI labels (rounded geometric, friendly)
   Zilla Slab: body copy, long-form text (slab serif — contrast + legibility) */

:root{
  --font-display: "Quicksand", "Trebuchet MS", sans-serif;
  --font-body:    "Zilla Slab", Georgia, "Times New Roman", serif;
  --font-ui:      "Quicksand", "Trebuchet MS", sans-serif;

  /* Weights */
  --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 */

  /* Type scale — 1.25 major-third, base 18px (body-first, warm reading size) */
  --fs-xs:   0.75rem;   /* 12px — captions, overlines */
  --fs-sm:   0.875rem;  /* 14px — fine print, labels */
  --fs-base: 1rem;      /* 16px — small body */
  --fs-md:   1.125rem;  /* 18px — default body */
  --fs-lg:   1.375rem;  /* 22px — lead paragraph */
  --fs-xl:   1.75rem;   /* 28px — h4 / card titles */
  --fs-2xl:  2.25rem;   /* 36px — h3 */
  --fs-3xl:  3rem;      /* 48px — h2 */
  --fs-4xl:  4rem;      /* 64px — h1 / hero */
  --fs-5xl:  5.25rem;   /* 84px — display */

  /* Line heights */
  --lh-tight:   1.05; /* @kind other */
  --lh-heading: 1.15; /* @kind other */
  --lh-snug:    1.35; /* @kind other */
  --lh-body:    1.6; /* @kind other */

  /* Letter spacing — Quicksand headings look best slightly tightened;
     overlines / small caps get generous tracking */
  --ls-display: -0.01em; /* @kind other */
  --ls-heading: 0; /* @kind other */
  --ls-body:    0; /* @kind other */
  --ls-label:   0.04em; /* @kind other */
  --ls-overline: 0.14em; /* @kind other */
}