/* ============================================================
   Vitaalands — Typography tokens
   Display: Sora (card titles / hero)   UI + body: Outfit
   ============================================================ */

:root {
  /* ---- Families (brand canon: Sora display · Inter body · JetBrains mono) ---- */
  --font-display: 'Sora', 'Clash Display', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Weights ---- */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */
  --fw-black:    900; /* @kind font */

  /* ---- Type scale (role → size / line-height / weight / tracking) ---- */
  /* Hero — splash & marquee wordmark */
  --t-hero-size: 56px;
  --t-hero-lh:   1.02; /* @kind other */
  --t-hero-ls:   -0.03em; /* @kind other */
  --t-hero-fw:   var(--fw-black); /* @kind font */

  /* H1 — screen title */
  --t-h1-size: 40px;
  --t-h1-lh:   1.08; /* @kind other */
  --t-h1-ls:   -0.02em; /* @kind other */
  --t-h1-fw:   var(--fw-extra); /* @kind font */

  /* H2 — section */
  --t-h2-size: 28px;
  --t-h2-lh:   1.15; /* @kind other */
  --t-h2-ls:   -0.015em; /* @kind other */
  --t-h2-fw:   var(--fw-bold); /* @kind font */

  /* Card title */
  --t-card-size: 20px;
  --t-card-lh:   1.25; /* @kind other */
  --t-card-ls:   -0.01em; /* @kind other */
  --t-card-fw:   var(--fw-bold); /* @kind font */

  /* Body */
  --t-body-size: 16px;
  --t-body-lh:   1.55; /* @kind other */
  --t-body-ls:   0; /* @kind other */
  --t-body-fw:   var(--fw-regular); /* @kind font */

  /* Body small */
  --t-body-sm-size: 14px;
  --t-body-sm-lh:   1.5; /* @kind other */

  /* Caption */
  --t-caption-size: 12px;
  --t-caption-lh:   1.4; /* @kind other */
  --t-caption-fw:   var(--fw-semibold); /* @kind font */

  /* Button */
  --t-button-size: 14px;
  --t-button-fw:   var(--fw-bold); /* @kind font */
  --t-button-ls:   0.01em; /* @kind other */

  /* Tab label */
  --t-tab-size: 11px;
  --t-tab-fw:   var(--fw-bold); /* @kind font */
  --t-tab-ls:   0.04em; /* @kind other */

  /* Overline / eyebrow — used heavily in the app (uppercase, wide tracking) */
  --t-overline-size: 10px;
  --t-overline-fw:   var(--fw-black); /* @kind font */
  --t-overline-ls:   0.2em; /* @kind other */
}