/* ============================================================================
   Tokens - Typography
   system/tokens/typography.css

   Inter is bundled locally under /fonts/inter/. The variable font covers all
   weights 100-900 in one file, including italic. No CDN dependency.

   The font path assumes consumers serve the file at /fonts/inter/InterVariable.woff2
   relative to their site root. If a consumer serves it from a different path,
   they must override the @font-face src URL - but the font tokens themselves
   can be reused unchanged.

   See sibling typography.md for intent, when-to-use, and consumer instructions.
   ============================================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("/fonts/inter/InterVariable.woff2") format('woff2-variations'),
       url("/fonts/inter/InterVariable.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: block;
  src: url("/fonts/inter/InterVariable-Italic.woff2") format('woff2-variations'),
       url("/fonts/inter/InterVariable-Italic.woff2") format('woff2');
}

:root {
  /* ----------------------------------------------------------------------
     Font families
     ---------------------------------------------------------------------- */
  --gm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gm-font-mono: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Mono', monospace;

  /* ----------------------------------------------------------------------
     Font sizes - UI scale
     ---------------------------------------------------------------------- */
  --gm-fs-xs:    0.8125rem;  /* 13px - footer, tech pills */
  --gm-fs-sm:    0.875rem;   /* 14px - captions, labels */
  --gm-fs-base:  1rem;       /* 16px - UI default */
  --gm-fs-body:  1.05rem;    /* 17px - body copy */
  --gm-fs-lg:    1.25rem;    /* 20px - section titles */
  --gm-fs-xl:    1.5rem;     /* 24px - card headings */
  --gm-fs-2xl:   2rem;       /* 32px - section headings min */
  --gm-fs-3xl:   2.8rem;     /* 45px - section headings max */
  --gm-fs-hero-min: 2.4rem;
  --gm-fs-hero-max: 4rem;

  /* Extra-large display sizes (kiosk "readable from 3m") */
  --gm-fs-huge:    2.25rem;  /* 36px - payment title */
  --gm-fs-giant:   4.5rem;   /* 72px - countdown, amount */
  --gm-fs-display: 6rem;     /* 96px - cash order number */

  /* Fluid typography */
  --gm-fs-hero:    clamp(var(--gm-fs-hero-min), 5vw, var(--gm-fs-hero-max));
  --gm-fs-section: clamp(var(--gm-fs-2xl), 4vw, var(--gm-fs-3xl));

  /* ----------------------------------------------------------------------
     Tracking
     ---------------------------------------------------------------------- */
  --gm-tracking-tighter: -0.04em;  /* hero headlines */
  --gm-tracking-tight:   -0.03em;  /* section headings, cards */
  --gm-tracking-normal:  0;
  --gm-tracking-wide:    0.12em;   /* section labels, uppercase */

  /* ----------------------------------------------------------------------
     Line heights
     ---------------------------------------------------------------------- */
  --gm-lh-tight: 1.1;
  --gm-lh-snug:  1.3;
  --gm-lh-base:  1.5;
  --gm-lh-loose: 1.7;
}

/* The .gm scope rule that applies the font lives in system/base.css. */