/* ============================================================
   TYPOGRAPHY — Daniela Beutlhauser
   Display: Cormorant Garamond (alt: Playfair Display)
   Body:    Lato (alt: Montserrat for UI)
   Accent:  Dancing Script (signature only)
   ============================================================ */

:root {
  /* --- Families --- */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-display-alt: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Lato', 'Montserrat', system-ui, sans-serif;
  --font-ui: 'Montserrat', 'Lato', system-ui, sans-serif;
  --font-signature: 'Dancing Script', cursive;

  /* --- Weights --- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Type scale (fluid-friendly, rem-based on 16px) --- */
  --text-display-xl: 4.5rem;   /* 72px — Titelseiten */
  --text-display-lg: 3.25rem;  /* 52px — große Headlines */
  --text-display-md: 2.5rem;   /* 40px */
  --text-h1: 2rem;             /* 32px */
  --text-h2: 1.5rem;           /* 24px */
  --text-h3: 1.25rem;          /* 20px */
  --text-body-lg: 1.125rem;    /* 18px */
  --text-body: 1rem;           /* 16px */
  --text-body-sm: 0.875rem;    /* 14px */
  --text-caption: 0.75rem;     /* 12px */

  /* --- Line heights --- */
  --leading-tight: 1.1;        /* display headlines */
  --leading-snug: 1.3;         /* subheads */
  --leading-body: 1.6;         /* Fließtext (brand spec) */
  --leading-loose: 1.8;

  /* --- Letter spacing --- */
  --tracking-tight: -0.02em;   /* large serif display */
  --tracking-normal: 0;
  --tracking-wide: 0.08em;     /* UI labels, eyebrows (uppercase) */
  --tracking-wider: 0.16em;    /* fine eyebrow / kicker */

  /* --- Semantic roles --- */
  --type-display: var(--weight-bold) var(--text-display-lg)/var(--leading-tight) var(--font-display);
  --type-h1: var(--weight-semibold) var(--text-h1)/var(--leading-snug) var(--font-display);
  --type-h2: var(--weight-semibold) var(--text-h2)/var(--leading-snug) var(--font-display);
  --type-subhead: var(--weight-semibold) var(--text-body-lg)/var(--leading-snug) var(--font-ui);
  --type-body: var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-body);
  --type-caption: var(--weight-regular) var(--text-caption)/var(--leading-snug) var(--font-body);
  --type-eyebrow: var(--weight-semibold) var(--text-caption)/1 var(--font-ui);
}