/* [cafeteria] typography — font stacks + ready-to-use type tokens.
   The raw sizes/line-heights live in fig-tokens.css (unitless floats, ×1px).
   Here we add fallback-bearing family stacks and a small set of semantic
   text styles used across the system and specimen cards. */

:root {
  /* Family stacks (the fig token --cafe-type-font-family-* are bare names). */
  --font-sans: "Satoshi Variable", "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* Apple system stack: -apple-system / BlinkMacSystemFont resolve to SF Pro
     on Apple platforms, so no named webfont (and no @font-face) is needed. */
  --font-ios: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Baskervville", "Baskerville", "Libre Baskerville", Georgia, "Times New Roman", serif;
  /* Display-only marker face — Tape Builder titles (cassette label + page title).
     Not part of the UI type ramp; never used for body, labels or captions. */
  --font-marker: "Permanent Marker", var(--font-sans), cursive;

  /* Brand weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* Computed length aliases (fig sizes are unitless → ×1px) */
  --type-hero: calc(var(--scale-850) * 1px);   /* 34 */
  --type-h1: calc(var(--scale-850) * 1px);
  --type-h2: calc(var(--scale-550) * 1px);     /* 22 */
  --type-h3: calc(var(--scale-500) * 1px);     /* 20 */
  --type-h5: calc(var(--scale-450) * 1px);     /* 18 */
  --type-h6: calc(var(--scale-400) * 1px);     /* 16 */
  --type-body: calc(var(--scale-350) * 1px);   /* 14 */
  --type-label: calc(var(--scale-300) * 1px);  /* 12 */
  --type-caption: calc(var(--scale-300) * 1px);/* 12 */

  /* Display / presentation type — decks & hero moments only (unitless → ×1px).
     Product UI tops out at --font-size-headings-h1 (34) / --font-size-hero (180);
     these fill the deck range in between, derived as clean fractions of hero. */
  --font-size-display-0: calc(var(--font-size-hero) * 2 / 3); /* 120 */
  --font-size-display-1: calc(var(--font-size-hero) / 2);     /* 90  */
  --font-size-display-2: calc(var(--font-size-hero) * 0.4);   /* 72  */
  --font-size-display-3: calc(var(--font-size-hero) * 0.3);   /* 54  */
  --font-size-display-4: calc(var(--font-size-hero) / 4);     /* 45  */
}

/* Specimen / utility text classes (used by cards + kits, optional). */
.cafe-hero    { font-family: var(--font-sans); font-weight: 900; font-size: var(--type-hero); line-height: 1.05; letter-spacing: -0.02em; }
.cafe-h1      { font-family: var(--font-sans); font-weight: 700; font-size: var(--type-h1); line-height: 1.1; letter-spacing: -0.015em; }
.cafe-h2      { font-family: var(--font-sans); font-weight: 700; font-size: var(--type-h2); line-height: 1.2; letter-spacing: -0.01em; }
.cafe-h3      { font-family: var(--font-sans); font-weight: 500; font-size: var(--type-h3); line-height: 1.25; }
.cafe-body    { font-family: var(--font-sans); font-weight: 400; font-size: var(--type-body); line-height: 1.5; }
.cafe-label   { font-family: var(--font-sans); font-weight: 500; font-size: var(--type-label); line-height: 1.3; }
.cafe-mono    { font-family: var(--font-mono); font-weight: 400; font-size: var(--type-caption); line-height: 1.4; letter-spacing: 0.01em; }
.cafe-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }