/* ==========================================================================
   TYPOGRAPHY — Canon Website OS
   ==========================================================================
   Ground truth: the OS names one typeface ("font Inter") and no explicit
   scale. The scale below is this system's own design decision, built for
   conversion pages: a big, confident display size for dream-outcome
   headlines, then a restrained functional scale beneath it so body copy,
   proof, and FAQ stay easy to scan.
   ========================================================================== */

:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* Each step is a `font` shorthand (style weight size/line-height family) —
     use `font: var(--font-h1);` — plus a paired letter-spacing var where the
     step needs one. */

  --font-display:   var(--weight-extrabold) 4rem/1.05 var(--font-sans);      /* 64px — hero dream-outcome headline */
  --tracking-display: -0.02em;

  --font-h1:        var(--weight-bold) 2.75rem/1.15 var(--font-sans);       /* 44px */
  --tracking-h1:    -0.015em;

  --font-h2:        var(--weight-bold) 2rem/1.2 var(--font-sans);           /* 32px */
  --tracking-h2:    -0.01em;

  --font-h3:        var(--weight-semibold) 1.5rem/1.3 var(--font-sans);     /* 24px */
  --tracking-h3:    0em;

  --font-h4:        var(--weight-semibold) 1.25rem/1.4 var(--font-sans);    /* 20px */
  --tracking-h4:    0em;

  --font-body-lg:   var(--weight-regular) 1.25rem/1.55 var(--font-sans);    /* 20px — subheads under H1 */
  --font-body:      var(--weight-regular) 1rem/1.6 var(--font-sans);        /* 16px */
  --font-small:     var(--weight-regular) 0.875rem/1.5 var(--font-sans);    /* 14px — captions, fine print */

  --font-micro:     var(--weight-medium) 0.75rem/1.4 var(--font-sans);      /* 12px — meta, timestamps */
  --tracking-micro: 0.02em;

  --font-eyebrow:   var(--weight-bold) 0.8125rem/1.2 var(--font-sans);      /* 13px — uppercase kicker above H1 */
  --tracking-eyebrow: 0.08em;

  --font-button:    var(--weight-semibold) 1rem/1 var(--font-sans);         /* 16px */

  /* tabular numerals for prices, comparison tables, countdown/urgency timers */
  --font-feature-tabular: 'tnum' 1;
}