/* ============================================================
   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 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-draft  15 / 14   a draft's text, the text an editor edits
     --card-type-body   14 / 13   body copy, inputs, rows
     --card-type-small  13 / 12   buttons, chips, small print
     --card-type-label  11 / 10   UPPERCASE labels
   Tailwind: text-card-draft … text-card-label (tailwind-theme.css). ---- */
:root {
  --card-type-draft: 15px;
  --card-type-body: 14px;
  --card-type-small: 13px;
  --card-type-label: 11px;
}

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