/* ============================================================
   CanBake · "Thai Tea" — Typography tokens
   System font by default (San Francisco / Roboto / Segoe).
   The scale must work on the system font alone (spec NFR-004);
   an optional display serif is [NEEDS APPROVAL] and not shipped.
   ============================================================ */

:root {
  /* Font families */
  --font-system: -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: var(--font-system);
  /* Reserved display role — currently aliases system (serif pending approval) */
  --font-display: var(--font-system);

  /* ---- Type scale ---- size / weight / line-height / tracking ---- */
  --type-display-size: 34px;   --type-display-weight: 700; --type-display-lh: 40px; --type-display-ls: -0.4px;
  --type-title1-size:  28px;   --type-title1-weight: 700;  --type-title1-lh: 34px;  --type-title1-ls: -0.2px;
  --type-title2-size:  24px;   --type-title2-weight: 700;  --type-title2-lh: 30px;  --type-title2-ls: -0.2px;
  --type-title3-size:  20px;   --type-title3-weight: 700;  --type-title3-lh: 26px;  --type-title3-ls: 0;
  --type-headline-size:17px;   --type-headline-weight: 600;--type-headline-lh: 22px;--type-headline-ls: 0;
  --type-bodystrong-size:16px; --type-bodystrong-weight:600;--type-bodystrong-lh:22px;--type-bodystrong-ls:0;
  --type-body-size:    16px;   --type-body-weight: 400;    --type-body-lh: 24px;    --type-body-ls: 0;
  --type-callout-size: 15px;   --type-callout-weight: 500; --type-callout-lh: 20px; --type-callout-ls: 0;
  --type-subhead-size: 14px;   --type-subhead-weight: 600; --type-subhead-lh: 18px; --type-subhead-ls: 0;
  --type-footnote-size:13px;   --type-footnote-weight: 400;--type-footnote-lh: 18px;--type-footnote-ls: 0;
  --type-caption-size: 12px;   --type-caption-weight: 500; --type-caption-lh: 16px; --type-caption-ls: 0;
  --type-micro-size:   11px;   --type-micro-weight: 700;   --type-micro-lh: 14px;   --type-micro-ls: 0.2px;
}

/* ---- Convenience text classes (used by specimen cards) ---- */
.t-display    { font: var(--type-display-weight) var(--type-display-size)/var(--type-display-lh) var(--font-display); letter-spacing: var(--type-display-ls); }
.t-title1     { font: var(--type-title1-weight) var(--type-title1-size)/var(--type-title1-lh) var(--font-display); letter-spacing: var(--type-title1-ls); }
.t-title2     { font: var(--type-title2-weight) var(--type-title2-size)/var(--type-title2-lh) var(--font-display); letter-spacing: var(--type-title2-ls); }
.t-title3     { font: var(--type-title3-weight) var(--type-title3-size)/var(--type-title3-lh) var(--font-sans); }
.t-headline   { font: var(--type-headline-weight) var(--type-headline-size)/var(--type-headline-lh) var(--font-sans); }
.t-bodystrong { font: var(--type-bodystrong-weight) var(--type-bodystrong-size)/var(--type-bodystrong-lh) var(--font-sans); }
.t-body       { font: var(--type-body-weight) var(--type-body-size)/var(--type-body-lh) var(--font-sans); }
.t-callout    { font: var(--type-callout-weight) var(--type-callout-size)/var(--type-callout-lh) var(--font-sans); }
.t-subhead    { font: var(--type-subhead-weight) var(--type-subhead-size)/var(--type-subhead-lh) var(--font-sans); }
.t-footnote   { font: var(--type-footnote-weight) var(--type-footnote-size)/var(--type-footnote-lh) var(--font-sans); }
.t-caption    { font: var(--type-caption-weight) var(--type-caption-size)/var(--type-caption-lh) var(--font-sans); }
.t-micro      { font: var(--type-micro-weight) var(--type-micro-size)/var(--type-micro-lh) var(--font-sans); letter-spacing: var(--type-micro-ls); text-transform: uppercase; }