/* ─────────────────────────────────────────────────────────────
   The Career Portfolio — Typography tokens
   Display: Playfair Display (serif, editorial warmth)
   Text/UI: DM Sans (humanist sans, friendly + clear)
   ───────────────────────────────────────────────────────────── */
:root {
  /* Families */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    var(--font-sans);
  --font-logo:    'Fredoka', 'Trebuchet MS', var(--font-sans);  /* the TCP wordmark */

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

  /* ── Type scale (fluid-ready, 1.250 major-third-ish) ──
     Pair every size with the matching line-height token. */
  --text-display-2xl: 4.5rem;   /* 72px — hero */
  --text-display-xl:  3.5rem;   /* 56px */
  --text-display-lg:  2.75rem;  /* 44px */
  --text-h1: 2.25rem;  /* 36px */
  --text-h2: 1.75rem;  /* 28px */
  --text-h3: 1.375rem; /* 22px */
  --text-h4: 1.125rem; /* 18px */
  --text-lg:   1.125rem; /* 18px lead paragraph */
  --text-base: 1rem;     /* 16px body */
  --text-sm:   0.875rem; /* 14px */
  --text-xs:   0.75rem;  /* 12px caption/label */

  /* Line heights */
  --lh-tight:   1.08;  /* @kind font */
  --lh-snug:    1.18;  /* @kind font */
  --lh-normal:  1.5;   /* @kind font */
  --lh-relaxed: 1.65;  /* @kind font */

  /* Letter spacing */
  --ls-tight:  -0.02em;  /* @kind font */
  --ls-normal: 0;        /* @kind font */
  --ls-wide:   0.02em;   /* @kind font */
  --ls-label:  0.08em;   /* @kind font */

  /* ── Semantic roles ── */
  --type-hero-family:   var(--font-display); /* @kind font */
  --type-hero-weight:   var(--fw-bold);      /* @kind font */
  --type-heading-family:var(--font-display); /* @kind font */
  --type-eyebrow-family:var(--font-sans);    /* @kind font */
  --type-eyebrow-weight:var(--fw-semibold);  /* @kind font */
  --type-body-family:   var(--font-sans);    /* @kind font */
  --type-body-weight:   var(--fw-regular);   /* @kind font */
  --type-ui-family:     var(--font-sans);    /* @kind font */
  --type-ui-weight:     var(--fw-medium);    /* @kind font */
}