/* ─────────────────────────────────────────────────────────────
   Eicon · Typography tokens
   Two families: Poppins for everything functional (UI, body,
   numerals) and Playfair Display — always italic — for artist
   names and editorial accents. Headings are tight, semibold
   Poppins with negative tracking; never serif.
   ───────────────────────────────────────────────────────────── */
:root {
  /* ── Families ── */
  --sans: 'Poppins', -apple-system, system-ui, 'Segoe UI', sans-serif;  /* @kind font */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;       /* @kind font */

  --font-ui: var(--sans);
  --font-body: var(--sans);
  --font-display: var(--serif);   /* use italic — see --accent-style */
  --accent-style: italic;         /* @kind other */

  /* ── Weights ── */
  --w-light: 300;      /* @kind font */
  --w-regular: 400;    /* @kind font */
  --w-medium: 500;     /* @kind font */
  --w-semibold: 600;   /* @kind font */
  --w-bold: 700;       /* @kind font */

  /* ── Type scale (px — mobile-first, values used across the app) ── */
  --t-display: 46px;   /* hero numerals (Discovery Points) */
  --t-h1: 30px;        /* screen / artwork titles */
  --t-h2: 27px;        /* page titles, sheet titles */
  --t-h3: 21px;        /* section + card titles */
  --t-title: 18px;     /* list-row titles */
  --t-body: 16px;      /* body copy, inputs */
  --t-label: 14.5px;   /* button labels, secondary */
  --t-caption: 13px;   /* captions, meta, timestamps */
  --t-micro: 12px;     /* uppercase eyebrows, pins */

  /* ── Line heights ── */
  --lh-tight: 1.12;    /* @kind other */
  --lh-snug: 1.25;     /* @kind other */
  --lh-body: 1.55;     /* @kind other */

  /* ── Letter-spacing ── */
  --ls-display: -1px;     /* @kind other */
  --ls-heading: -0.5px;   /* @kind other */
  --ls-tight: -0.2px;     /* @kind other */
  --ls-eyebrow: 0.6px;    /* @kind other */
  --ls-nav: 0.4px;        /* @kind other */

  /* ── Semantic aliases ── */
  --heading-font: var(--sans);
  --heading-weight: var(--w-semibold);
  --body-font: var(--sans);
  --artist-font: var(--serif);   /* render in italic */
}