/* Floryn Packaging — Typography tokens
   Display & brand voice: Montserrat (geometric, often UPPERCASE with tracking).
   Body & UI: Mulish (humanist, comfortable reading).
   The brand sets section/label text in ALL-CAPS with generous letter-spacing —
   that tracked uppercase eyebrow is a signature device. */

:root {
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Mulish', system-ui, sans-serif;
  --font-mono:    'SFMono-Regular', ui-monospace, 'Menlo', monospace;

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* Type scale (px) — display uses Montserrat, text uses Mulish */
  --fs-display-2xl: 76px;  /* hero / cover */
  --fs-display-xl:  56px;
  --fs-display-lg:  42px;
  --fs-h1:          34px;
  --fs-h2:          27px;
  --fs-h3:          21px;
  --fs-h4:          18px;
  --fs-body-lg:     18px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     13px;
  --fs-eyebrow:     12px;  /* tracked uppercase label */

  /* Line heights */
  --lh-tight:   1.04; /* @kind font */
  --lh-snug:    1.18; /* @kind font */
  --lh-heading: 1.22; /* @kind font */
  --lh-body:    1.55; /* @kind font */
  --lh-relaxed: 1.7; /* @kind font */

  /* Letter spacing */
  --ls-display:  -0.02em;  /* @kind font */
  --ls-heading:  -0.01em; /* @kind font */
  --ls-body:     0; /* @kind font */
  --ls-eyebrow:  0.18em;   /* @kind font */
  --ls-button:   0.04em; /* @kind font */

  /* Semantic roles */
  --text-eyebrow-transform: uppercase; /* @kind other */
}