/* =========================================================================
   Baliston Health — Typography System
   Single source of truth for fonts and type scale.

   Philosophy: ONE size per semantic level. ONE weight (600 semi-bold) for
   all headings. Italic em provides accent via lilac + slightly lighter
   weight, not via dramatic weight contrast.

   Architecture:
     1. Font loading
     2. Font-family tokens
     3. Heading scale  (h1 → h4, single tokens)
     4. Body scale
     5. Eyebrow scale
     6. Utility classes
     7. Defaults + safety net
     8. Legacy aliases (backwards-compat)

   This file MUST load before main.css.
   ========================================================================= */

/* --- 1. Font loading ----------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@200,300,400,500,600,700,800,900,1,2&display=swap');


/* --- 2. Font-family tokens ----------------------------------------------- */

:root {
  --font-display: 'Montserrat', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Satoshi', 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}


/* --- 3. Heading scale (one per level) ------------------------------------ */

:root {
  --text-h1: clamp(48px, 7vw, 88px);    /* page hero — every page uses the same H1 */
  --text-h2: clamp(32px, 4.2vw, 52px);  /* section header */
  --text-h3: 24px;                      /* card title / sub-heading */
  --text-h4: 18px;                      /* small card title / sub-sub */

  --leading-h1: 1.05;
  --leading-h2: 1.15;
  --leading-h3: 1.3;
  --leading-h4: 1.4;

  --tracking-h1: -1.2px;
  --tracking-h2: -0.6px;
  --tracking-h3: -0.2px;
  --tracking-h4: 0;

  /* All headings share one weight. */
  --weight-heading: 500;       /* medium */
  --weight-heading-em: 400;    /* italic em runs slightly lighter for accent */
}


/* --- 4. Body scale (Satoshi) --------------------------------------------- */

:root {
  --text-lede:    18px;   /* section intro paragraph */
  --text-body-lg: 17px;
  --text-body-md: 15px;   /* default body */
  --text-body-sm: 14px;
  --text-meta:    13px;
  --text-micro:   12px;
}


/* --- 5. Eyebrow scale (Montserrat uppercase) ----------------------------- */

:root {
  --text-eyebrow-xl: 12px;  /* section opener (canonical small) */
  --text-eyebrow-lg: 12px;  /* legacy alias — same as xl */
  --text-eyebrow:    11px;  /* chip */
  --text-eyebrow-sm: 10px;  /* tag */

  --tracking-eyebrow:    2px;
  --tracking-eyebrow-sm: 1.6px;
  --tracking-eyebrow-xs: 1.4px;
}


/* --- 6. Utility classes -------------------------------------------------- */

.t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
}
.t-h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); }
.t-h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); }
.t-h3 { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }
.t-h4 { font-size: var(--text-h4); line-height: var(--leading-h4); letter-spacing: var(--tracking-h4); }

/* Italic em accent — used inside h1/h2/h3 to emphasise part of a heading. */
.t-h1 em, .t-h2 em, .t-h3 em, .t-h4 em,
h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  font-weight: var(--weight-heading-em);
  color: var(--lilac, #8b7ec8);
}

.t-lede    { font-family: var(--font-body); font-weight: 300; font-size: var(--text-lede);    line-height: 1.75; }
.t-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body-lg); line-height: 1.65; }
.t-body-md { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body-md); line-height: 1.6; }
.t-body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body-sm); line-height: 1.6; }
.t-meta    { font-family: var(--font-body); font-weight: 500; font-size: var(--text-meta);    line-height: 1.5; }
.t-micro   { font-family: var(--font-body); font-weight: 500; font-size: var(--text-micro);   line-height: 1.5; }

.t-eyebrow-xl,
.t-eyebrow-lg,
.t-eyebrow,
.t-eyebrow-sm {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1;
}
.t-eyebrow-xl { font-size: var(--text-eyebrow-xl); font-weight: 600; letter-spacing: var(--tracking-eyebrow); }
.t-eyebrow-lg { font-size: var(--text-eyebrow-lg); font-weight: 700; letter-spacing: var(--tracking-eyebrow); }
.t-eyebrow    { font-size: var(--text-eyebrow);    font-weight: 700; letter-spacing: var(--tracking-eyebrow-sm); }
.t-eyebrow-sm { font-size: var(--text-eyebrow-sm); font-weight: 600; letter-spacing: var(--tracking-eyebrow-xs); }


/* --- 7. Defaults + safety net -------------------------------------------- */

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Semantic h1-h4 inherit the canonical system automatically. */
h1 { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); }
h2 { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); }
h3 { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }
h4 { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-h4); line-height: var(--leading-h4); letter-spacing: var(--tracking-h4); }
h5, h6 { font-family: var(--font-display); font-weight: var(--weight-heading); }
button, input, select, textarea { font-family: inherit; }

/* Inline-style safety net — applies display font to legacy heading-like
   classes that don't declare their own font-family. */
[class$="-eyebrow"],   [class*="-eyebrow "],   [class*="-eyebrow-"],
[class$="-h1"],        [class*="-h1 "],
[class$="-h2"],        [class*="-h2 "],
[class$="-h3"],        [class*="-h3 "],
[class$="-h4"],        [class*="-h4 "],
[class$="-title"],     [class*="-title "],
[class$="-name"],      [class*="-name "],
[class$="-step"],      [class*="-step "],
[class$="-num"],       [class*="-num "],
[class$="-stat-num"],  [class*="-stat-num "],
[class*="hero-h"] {
  font-family: var(--font-display);
}

.mission-text,
.trust-label,
.eyebrow { font-family: var(--font-display); }


/* --- 8. Legacy aliases (backwards-compat) -------------------------------
   Older inline CSS still references the editorial-* and card-* tokens.
   We map them to the simplified scale so nothing breaks. New code should
   use --text-h1 .. --text-h4 directly. */

:root {
  /* Editorial scale → heading scale */
  --text-editorial-3xl: var(--text-h1);
  --text-editorial-2xl: var(--text-h1);
  --text-editorial-xl:  var(--text-h2);
  --text-editorial-lg:  var(--text-h2);
  --text-editorial-md:  var(--text-h2);
  --text-editorial-sm:  var(--text-h2);

  /* Card scale → heading scale */
  --text-card-lg: var(--text-h3);
  --text-card-md: var(--text-h3);
  --text-card-sm: var(--text-h4);

  /* Tracking aliases */
  --tracking-tight-3xl: var(--tracking-h1);
  --tracking-tight-2xl: var(--tracking-h1);
  --tracking-tight-xl:  var(--tracking-h1);
  --tracking-tight-lg:  var(--tracking-h2);
  --tracking-tight-md:  var(--tracking-h2);
  --tracking-tight-sm:  var(--tracking-h3);
  --tracking-normal:    0;

  /* Legacy --serif / --sans aliases for inline rules. */
  --serif:    var(--font-display);
  --sans:     var(--font-body);
  --s3-serif: var(--font-display);
  --s3-sans:  var(--font-body);
}