/*
  PrimeMedia Press — design tokens
  Editorial system in the register of Forbes / FT: ink, bone paper and a
  single burgundy accent lifted from the press mark. No secondary hues.
*/

:root {
  /* ---------- Color ---------- */
  --pm-ink:            #14151A; /* primary text, rules on paper, dark grounds */
  --pm-graphite:        #3C3E45; /* secondary text, captions, metadata */
  --pm-graphite-soft:  #6B6E76; /* tertiary text, placeholder, disabled */
  --pm-paper:           #F8F6F2; /* page ground — clean ivory, not beige. Kept deliberately close to white: a stronger warm cast reads as a muddy/dirty tint once blended under a translucent header or backdrop-blur on mobile screens. */
  --pm-paper-white:    #FFFFFF; /* photo mats, cards on paper */
  --pm-burgundy:        #7A1F2B; /* primary accent — from the press mark */
  --pm-burgundy-deep:  #4A1017; /* pressed state, badge fill, CTA ground */
  --pm-burgundy-tint:  #F5EAE8; /* faint accent fill — use sparingly, prefer a burgundy rule/border over a full tinted fill (a tinted fill next to warm paper reads muddy) */
  --pm-hairline:        rgba(20, 21, 26, 0.14);   /* dividers on paper */
  --pm-hairline-on-dark: rgba(245, 241, 233, 0.28); /* dividers on ink/photo */
  --pm-scrim:            linear-gradient(180deg, rgba(20,21,26,0) 0%, rgba(20,21,26,0.78) 78%, rgba(20,21,26,0.92) 100%);

  /* ---------- Type families ---------- */
  --pm-font-serif: 'PM Serif', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --pm-font-sans:  'PM Sans', 'Golos Text', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- Type scale (documentation / web context, rem) ----------
     Slide canvases use fixed px at 1080×1350 — see /templates for the
     literal sizes (eyebrow 22px, kicker 30px, headline 64–120px,
     body 34–40px, caption 24px, counter 20px). Ratio ≈ 1.333 (Forbes-style
     jump between body and display sizes). */
  --pm-size-caption:   0.8125rem;  /* 13px */
  --pm-size-small:     0.9375rem;  /* 15px */
  --pm-size-body:       1.125rem;   /* 18px */
  --pm-size-lede:        1.375rem;   /* 22px */
  --pm-size-h4:            1.75rem;    /* 28px */
  --pm-size-h3:            2.25rem;    /* 36px */
  --pm-size-h2:            3.25rem;    /* 52px */
  --pm-size-h1:            4.75rem;    /* 76px */
  --pm-size-display:     6.5rem;     /* 104px */

  --pm-leading-tight:   1.05;
  --pm-leading-snug:    1.2;
  --pm-leading-body:     1.6;

  --pm-tracking-label:  0.16em;  /* eyebrows, kickers, nav */
  --pm-tracking-micro:  0.22em;  /* counters, vertical captions, case numbers */
  --pm-tracking-tight:  -0.01em; /* large serif display */

  /* ---------- Spacing (8px base) ---------- */
  --pm-space-1:  0.5rem;
  --pm-space-2:  1rem;
  --pm-space-3:  1.5rem;
  --pm-space-4:  2rem;
  --pm-space-5:  3rem;
  --pm-space-6:  4rem;
  --pm-space-7:  6rem;
  --pm-space-8:  8rem;

  /* ---------- Grid ---------- */
  --pm-grid-columns: 12;
  --pm-grid-gutter:  1.5rem;
  --pm-grid-margin:  6.4vw;       /* web / doc margin */
  --pm-slide-margin: 72px;        /* slide document-frame inset, 1080 canvas */
  --pm-slide-size:   1080px 1350px; /* Instagram portrait 4:5 */

  /* ---------- Shape / line ---------- */
  --pm-radius: 0;                 /* editorial — no rounded corners anywhere */
  --pm-rule-hairline: 1px;
  --pm-rule-thick: 2px;

  /* ---------- Motion ---------- */
  --pm-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --pm-duration: 240ms;
}