/* ============================================================
   Time Sellers — Typography tokens
   Figtree (Google Sans stand-in) carries display + UI.
   Nunito = mascot / playful. JetBrains Mono = spec/numerals.
   The faces are self-hosted: ../fonts/fonts.css declares them.
   Generated into the design system's tokens.json
   (design-system/tools/gen-tokens.mjs).
   ============================================================ */
:root {
  --font-display: 'Figtree', 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Figtree', 'Google Sans Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-playful: 'Nunito', 'Figtree', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Google Sans Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Type scale (px) ---- */
  --fs-display-xl: 64px;   /* hero, ≥desktop */
  --fs-display-l:  48px;
  --fs-display-m:  36px;
  --fs-h1:         28px;
  --fs-h2:         22px;
  --fs-h3:         18px;
  --fs-body-l:     17px;
  --fs-body:       15px;   /* base UI */
  --fs-body-s:     13px;
  --fs-caption:    12px;
  --fs-micro:      11px;
  --fs-eyebrow:    12px;   /* uppercase labels (YOUR ESTIMATE) */

  /* ---- Line heights ---- */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* ---- Weights ---- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;
  --fw-black:    900;

  /* ---- Letter spacing ---- */
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:  0;
  --ls-eyebrow:  0.09em;
  --ls-wide:     0.04em;
}

/* ---- THE READING TEXT: the chat's message text (Radek 2026-10-19; the
   phone size 14 → 13 px 2026-10-20) AND a card's text (fix round W30-11,
   Radek 2026-11-02: "card body text uses the chat's font size, through one
   shared CSS value, not per card") — ONE value, 15px desktop, 13px on a
   phone (≤700px). px, like the card scale: the customer app's ×0.8 phone
   text scale does not apply to it. The chat reads it as `text-chat`
   (customer-app-template/web/src/theme.css) and its Markdown as
   `--chat-type` (a document re-points it for its own larger text,
   files/document.css); a card reads it as `--card-type-body`, below. ---- */
:root {
  --chat-type: 15px;
}

@media (max-width: 700px) {
  :root {
    --chat-type: 13px;
  }
}

/* ---- The card type scale (design-system/project/mobile-and-ios.md
   rule 23; first drawn as the feed card's --fc-* sizes): every text size inside a
   card, its sheets, menus and editor layer — px only, never em/rem (mixing
   them made iOS sizes drift). Desktop / phone (≤700px):
     --card-type-body     = --chat-type, 15 / 13   a card's body text: its
                          text (a draft, a card's Markdown, prose), a
                          prompt, inputs, rows, the text an editor edits —
                          the chat's size by construction, so the two can
                          never drift apart (fix round W30-11)
     --card-type-heading  15 / 14   a card's own headings and figures (an
                          event's title, a section heading, a price, the
                          sheet title's base, the brand tile's letters)
     --card-type-small    13 / 12   buttons, chips, small print
     --card-type-label    11 / 10   UPPERCASE labels
   Tailwind: text-card-body … text-card-label (tailwind-theme.css). ---- */
:root {
  --card-type-body: var(--chat-type);
  --card-type-heading: 15px;
  --card-type-small: 13px;
  --card-type-label: 11px;
}

@media (max-width: 700px) {
  :root {
    --card-type-heading: 14px;
    --card-type-small: 12px;
    --card-type-label: 10px;
  }
}