/* ──────────────────────────────────────────────────────────────────
   Toore — Typography tokens
   Inter is the single typeface across the whole system — it's what
   toore.io ships (confirmed from the live site). UI, body, headings
   and display are all Inter, distinguished by weight and tracking:
   it runs tight (negative tracking) at every size.

   Inter is loaded from Google Fonts (the official webfont host for the
   family). 🚩 If you self-host Toore's licensed Inter files, drop them
   into fonts/ and swap this @import for @font-face rules.
   ────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* ── Families ──────────────────────────────────────────────────── */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* same family as --font-sans; kept as an alias for display contexts */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Scale (px, fixed) ─────────────────────────────────────────── */
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-30: 30px;
  --text-40: 40px;
  --text-56: 56px;
  --text-80: 80px;
  --text-128: 128px;

  /* ── Letter-spacing ────────────────────────────────────────────── */
  --tracking-tight: -0.05em;   /* huge display, e.g. BRANDBOARD */
  --tracking-snug:  -0.03em;   /* h1–h3, labels */
  --tracking-base:  -0.02em;   /* body */
  --tracking-wide:   0.04em;   /* small caps / eyebrow labels only */
}

/* ── Semantic typography helpers ──────────────────────────────────── */
.t-display-xl {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-128);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-display { font: 700 var(--text-80)/1 var(--font-sans); letter-spacing: var(--tracking-tight); }
.t-h1 { font: 700 var(--text-40)/1.05 var(--font-sans); letter-spacing: var(--tracking-snug); }
.t-h2 { font: 700 var(--text-24)/1 var(--font-sans); letter-spacing: var(--tracking-snug); }
.t-h3 { font: 600 var(--text-20)/1.1 var(--font-sans); letter-spacing: var(--tracking-snug); }
.t-label-caps {
  font: 700 var(--text-24)/1 var(--font-sans);
  letter-spacing: var(--tracking-snug);
  text-transform: uppercase;
}

.t-body { font: 400 var(--text-16)/1.3 var(--font-sans); letter-spacing: var(--tracking-base); }
.t-body-sm { font: 400 var(--text-14)/1.3 var(--font-sans); letter-spacing: var(--tracking-base); }
.t-caption { font: 500 var(--text-12)/1.3 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--fg-2); }

/* Tagline / prominent product copy — Inter, Medium, tracked tight */
.t-display-script { font: 500 var(--text-30)/1.15 var(--font-display); letter-spacing: var(--tracking-snug); }
.t-tagline { font: 500 var(--text-20)/1.2 var(--font-display); letter-spacing: var(--tracking-snug); text-transform: none; }
.t-product { font: 500 var(--text-20)/1 var(--font-display); letter-spacing: var(--tracking-snug); }