/* ============================================================
   Barak Ron — typography design system (EN + HE)

   Scale (one size per role):
     --text-heading   ALL section titles (hero, practices, offer, contact…)
     --text-subhead   ALL supporting lines / ledes under titles
     --text-body      running copy
     --text-title     nested titles inside cards / lists / doc h2–h3

   Families:
     EN — Instrument Sans (display) + Public Sans (body) + Inter (nav)
     HE — Assistant for display, body, and nav (activated via html[lang=he])
   ============================================================ */

:root{
  /* ——— Families: English (default) ——— */
  --font-display:'Instrument Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-nav:'Inter', 'Public Sans', -apple-system, sans-serif;

  /* ——— Families: Hebrew ——— */
  --font-display-he:'Assistant', 'Instrument Sans', 'Segoe UI', Tahoma, 'Arial Hebrew', sans-serif;
  --font-body-he:'Assistant', 'Public Sans', 'Segoe UI', Tahoma, 'Arial Hebrew', sans-serif;
  --font-nav-he:'Assistant', 'Inter', 'Public Sans', 'Segoe UI', Tahoma, sans-serif;

  /* Active family aliases (components use these) */
  --sans:var(--font-display);
  --body:var(--font-body);
  --nav-font:var(--font-nav);

  /* ——— Type scale ——— */
  /* One shared size for every section heading on the site */
  --text-heading:clamp(36px, 3.8vw, 50px);
  /* One shared size for every subhead / lede */
  --text-subhead:17px;
  /* Body */
  --text-body:15px;
  /* Nested titles (cards, steps, in-doc h2) — not section headings */
  --text-title:clamp(30px, calc(1.8vw + 8px), 34px);

  /* Back-compat aliases (older class names still reference these) */
  --text-split-heading:var(--text-heading);
  --text-split-subhead:var(--text-subhead);
  --text-hero:var(--text-heading);
  --text-card-title:var(--text-title);
  --title-display:var(--text-heading);

  /* UI chrome (not marketing type) */
  --text-ui:14px;
  --text-label:11px;
  --text-caption:13px;

  /* Rhythm */
  --leading-heading:1.08;
  --leading-subhead:1.5;
  --leading-body:1.65;
  --tracking-heading:.02em;
  --tracking-heading-he:0;
  --tracking-heading-active:var(--tracking-heading);
}

/* Hebrew pages flip the stacks and tighten heading tracking */
html[lang="he"],
html[dir="rtl"]{
  --sans:var(--font-display-he);
  --body:var(--font-body-he);
  --nav-font:var(--font-nav-he);
  --tracking-heading-active:var(--tracking-heading-he);
}

/* English phrases are longer — smaller type so titles stay clear of the photo */
html[lang="en"]{
  --text-heading:clamp(28px, 2.6vw, 36px);
  --text-split-heading:var(--text-heading);
  --text-hero:var(--text-heading);
  --title-display:var(--text-heading);
}

/* Phones: one step down across the board. A two-line title such as
   "commentary & coverage" filled the whole column at the desktop size and
   sat flush against the screen edge on narrower handsets. Every heading on
   the site reads this one token, so lowering it here keeps them all equal. */
@media (max-width:860px){
  :root{--text-heading:clamp(28px, 8.2vw, 36px)}
  html[lang="en"]{--text-heading:clamp(22px, 6.4vw, 28px)}
}

/* ——— Utility / semantic roles ——— */
.type-heading,
h1, h2.section-title{
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--text-heading);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading-active);
}

.type-subhead{
  font-family:var(--body);
  font-weight:400;
  font-size:var(--text-subhead);
  line-height:var(--leading-subhead);
}

.type-body{
  font-family:var(--body);
  font-weight:400;
  font-size:var(--text-body);
  line-height:var(--leading-body);
}

.type-title{
  font-family:var(--sans);
  font-weight:500;
  font-size:var(--text-title);
  line-height:1.15;
  letter-spacing:var(--tracking-heading-active);
}