/* ============================================================
   Fischkarten — Typography tokens
   ============================================================ */
:root {
  /* ---- Families ------------------------------------------- */
  --font-display: 'Pacifico', 'Brush Script MT', cursive;   /* page titles, fish names */
  --font-script:  'Satisfy', cursive;                       /* section labels, accents */
  --font-accent:  'Lobster', 'Pacifico', cursive;           /* alternate accent titles */
  --font-serif:   'Lora', Georgia, 'Times New Roman', serif;/* body copy, descriptions */
  --font-ui:      'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; /* buttons, chrome */

  /* ---- Type scale (px) ------------------------------------ */
  --text-2xs: 12px;
  --text-xs:  13px;
  --text-sm:  15px;
  --text-md:  17px;   /* base body */
  --text-lg:  20px;
  --text-xl:  24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;

  /* ---- Display sizes (script faces run large) ------------- */
  --display-sm: 26px;
  --display-md: 34px;
  --display-lg: 44px;

  /* ---- Weights (serif/ui only — scripts are single weight)- */
  --weight-regular: 400;
  --weight-medium:  600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ---- Line heights --------------------------------------- */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Tracking ------------------------------------------- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* ---- Semantic roles ------------------------------------- */
  --role-page-title:    var(--font-display);
  --role-section-label: var(--font-script);
  --role-body:          var(--font-serif);
  --role-button:        var(--font-ui);
}