/* ===========================================================================
   Pretence Games & Pretencify — Typography tokens
   Display = ABC Camera Bold (playful, rounded, "dot-cut")
   Serif   = Source Serif 4 (editorial headings, quotes)
   Body/UI = Roboto
   =========================================================================== */
:root {
  /* --- Families ----------------------------------------------------------- */
  --font-display: "ABC Camera", "Source Serif 4", Georgia, serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- 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 */

  /* --- Display scale (ABC Camera) — headlines ----------------------------- */
  --type-display-xl: 700 clamp(3rem, 8vw, 5.5rem)/0.96 var(--font-display);
  --type-display-lg: 700 clamp(2.5rem, 6vw, 4rem)/1.0 var(--font-display);
  --type-display-md: 700 clamp(2rem, 4.5vw, 3rem)/1.02 var(--font-display);
  --type-display-sm: 700 1.75rem/1.05 var(--font-display);

  /* --- Serif scale (Source Serif 4) — sub-heads, editorial ---------------- */
  --type-serif-xl: 600 2.5rem/1.1 var(--font-serif);
  --type-serif-lg: 600 2rem/1.15 var(--font-serif);
  --type-serif-md: 600 1.5rem/1.2 var(--font-serif);
  --type-serif-sm: 600 1.25rem/1.25 var(--font-serif);
  --type-quote: 500 1.375rem/1.45 var(--font-serif);

  /* --- Body scale (Roboto) ------------------------------------------------ */
  --type-body-lg: 400 1.125rem/1.6 var(--font-body);
  --type-body-md: 400 1rem/1.6 var(--font-body);
  --type-body-sm: 400 0.875rem/1.55 var(--font-body);
  --type-label: 500 0.9375rem/1.3 var(--font-body);

  /* --- Eyebrow / overline (uppercase, tracked, Roboto) -------------------- */
  --type-eyebrow: 500 0.8125rem/1.2 var(--font-body);
  --tracking-eyebrow: 0.14em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;

  /* --- Letter-spacing for display (slightly tight) ------------------------ */
  --tracking-display: -0.005em;
}

/* Optional helper classes (tokens are the source of truth; these just apply) */
.pg-display-xl { font: var(--type-display-xl); letter-spacing: var(--tracking-display); }
.pg-display-lg { font: var(--type-display-lg); letter-spacing: var(--tracking-display); }
.pg-display-md { font: var(--type-display-md); letter-spacing: var(--tracking-display); }
.pg-serif-lg   { font: var(--type-serif-lg); }
.pg-serif-md   { font: var(--type-serif-md); }
.pg-body       { font: var(--type-body-md); }
.pg-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}