/* LinguaLab Typography v1 — iOS-aligned SF system stack + dynamic type support
   Add alongside your theme: <link rel="stylesheet" href="ll-typography.css">
*/

/* 1) Font stacks */
:root{
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: -apple-system, 'SF Pro Display', 'SF Pro Text', system-ui, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* Base sizes tuned for iOS feel */
  --fs-base: 17px;
  --lh-base: 1.5;
  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-h3: 18px;
}

/* 2) Global smoothing + numeric alignment */
html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
}
body{
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  text-rendering: optimizeLegibility;
}
.mono, code, pre, kbd { font-family: var(--font-mono); }
.pill, .badge { font-variant-numeric: tabular-nums; }

/* 3) Headings with display face + gentle tracking */
h1,h2,h3{
  font-family: var(--font-display);
  letter-spacing: -0.012em;
  line-height: 1.18;
  margin: 0 0 6px 0;
  font-weight: 700;
}
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); font-weight: 650; }

/* 4) Buttons & labels weight for clarity */
button, .btn, label, .label{ font-weight: 600; }

/* 5) Small text variants */
.small{ font-size: 0.88rem; opacity: .9; }
.caption{ font-size: 0.82rem; opacity: .85; }

/* 6) Dynamic Type mapping on iOS
   These CSS font keywords follow the user's text size setting on iOS.
   Safe fallback: they are ignored elsewhere.
*/
@supports (font: -apple-system-body){
  body{ font: -apple-system-body; }
  h1{ font: -apple-system-title1; }
  h2{ font: -apple-system-title2; }
  h3{ font: -apple-system-headline; }
  .small{ font: -apple-system-footnote; }
  .caption{ font: -apple-system-caption1; }
}

/* 7) Prevent fake bold/italic synthesis artifacts */
html{ font-synthesis-weight: none; font-synthesis-style: none; }