/*
 * Tabsamo Group — Brand Typography
 * 2026-05-12
 *
 * Type DNA shared across Tabsamo · eHR · Baacil · Saakuut:
 *   Display: Fraunces (variable serif, opsz/wght/SOFT axes)
 *   Body:    Inter (variable)
 *   Mono:    JetBrains Mono
 *   Arabic:  Amiri
 *
 * Tabsamo's variation from the family: tighter tracking on display,
 * slightly higher contrast on body. Reads more "VC deck" than "small journal."
 *
 * All fonts are OFL-licensed via Google Fonts.
 */

/* ─── Font imports ───────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Inter:wght@300..900&family=JetBrains+Mono:wght@400..700&family=Amiri:wght@400;700&display=swap');

/* ─── Stacks (with safe fallbacks) ───────────────────────────────────── */
:root {
  --font-display: 'Fraunces', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-arabic:  'Amiri', 'Noto Naskh Arabic', 'Geeza Pro', serif;
}

/* ─── Modular scale (1.250 — major third, slightly tighter than eHR) ──── */
:root {
  --fs-7xl: 5.96rem;   /* 95.4px — display only, hero of hero */
  --fs-6xl: 4.77rem;   /* 76.3px — hero headline */
  --fs-5xl: 3.82rem;   /* 61.1px — page title */
  --fs-4xl: 3.05rem;   /* 48.8px — major section */
  --fs-3xl: 2.44rem;   /* 39.1px — section */
  --fs-2xl: 1.95rem;   /* 31.3px — subsection */
  --fs-xl:  1.56rem;   /* 25.0px — card title */
  --fs-lg:  1.25rem;   /* 20.0px — lead paragraph */
  --fs-md:  1.00rem;   /* 16.0px — body */
  --fs-sm:  0.80rem;   /* 12.8px — caption, eyebrow */
  --fs-xs:  0.64rem;   /* 10.2px — micro-label */
}

/* ─── Line heights & tracking ───────────────────────────────────────── */
:root {
  --lh-tight:   1.05;   /* Display, hero */
  --lh-snug:    1.20;   /* Subheads */
  --lh-normal:  1.45;   /* Body */
  --lh-relaxed: 1.65;   /* Long-form prose */

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-eyebrow: 0.16em;
}

/* ─── Base resets ───────────────────────────────────────────────────── */
html { font-feature-settings: 'kern' 1, 'liga' 1; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv11' 1, 'ss01' 1; /* Inter: single-storey a, slashed 0 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Display headings (Fraunces) ───────────────────────────────────── */
h1, h2, h3, .display, .h-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
  color: var(--color-text-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.h-hero {
  font-family: var(--font-display);
  font-size: var(--fs-6xl);
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-strong);
}

h1, .h-1 { font-size: var(--fs-5xl); }
h2, .h-2 { font-size: var(--fs-3xl); font-variation-settings: 'opsz' 96, 'SOFT' 30; }
h3, .h-3 { font-size: var(--fs-xl);  font-variation-settings: 'opsz' 48, 'SOFT' 20; }

/* ─── Body & UI (Inter) ─────────────────────────────────────────────── */
.body-lg { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--color-text); }
.body    { font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--color-text); }
.body-sm { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--color-text-mute); }

/* ─── Lede (the opening paragraph of a section) ─────────────────────── */
.lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  font-variation-settings: 'opsz' 24, 'SOFT' 40;
}
.lede::first-letter {
  font-family: var(--font-display);
  font-size: 3.2em;
  font-weight: 500;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.08em 0 0;
  color: var(--c-tabsamo-blue);
  font-variation-settings: 'opsz' 144, 'SOFT' 70;
}

/* ─── Eyebrow (small caps label above a section title) ──────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--c-tabsamo-blue);
  line-height: 1;
}

/* ─── Mono (data, IDs, code) ────────────────────────────────────────── */
.mono, code, kbd, samp, .tabular {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
  font-size: 0.95em;
}

.id-number {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: 0.02em;
}

/* ─── Arabic ────────────────────────────────────────────────────────── */
.arabic, [lang="ar"] {
  font-family: var(--font-arabic);
  line-height: 1.7;
  direction: rtl;
  text-align: right;
}

/* ─── Badges & tags ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 0.35em 0.7em;
  border-radius: var(--radius-pill);
  background: var(--c-tabsamo-blue-faint);
  color: var(--c-tabsamo-blue-deep);
  line-height: 1;
}

.badge-brass {
  background: rgba(182, 139, 74, 0.12);
  color: var(--c-brass-deep);
}

.badge-emerald {
  background: var(--c-emerald-soft);
  color: var(--c-emerald-deep);
}

.badge-outline {
  background: transparent;
  border: 1px solid var(--c-stone);
  color: var(--color-text-mute);
}

/* ─── Pull quote ────────────────────────────────────────────────────── */
.pull-quote {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--color-text-strong);
  font-variation-settings: 'opsz' 96, 'SOFT' 60;
  border-left: 2px solid var(--c-brass);
  padding-left: 1.25em;
}

/* ─── Wordmark utility ──────────────────────────────────────────────── */
.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  letter-spacing: -0.015em;
  color: var(--color-text-strong);
}

/* ─── Pairing rules (reference) ─────────────────────────────────────────
 *
 * 1. Display (Fraunces) ALWAYS at SOFT ≥30. Below 30 it reads brittle.
 *    Hero SOFT 50–70 for the warmest opening.
 * 2. Body (Inter) ALWAYS with cv11 + ss01 features on — gives a single-storey
 *    `a` and slashed zero. Distinguishes Tabsamo body from generic Inter.
 * 3. Numbers + IDs: always JetBrains Mono with tnum+zero on.
 * 4. NEVER mix Display weights below 400 — Fraunces light reads anemic at scale.
 * 5. Eyebrow → H2 → Lede → Body is the canonical section opening sequence.
 *
 * ──────────────────────────────────────────────────────────────────── */