/* ═══════════════════════════════════════════════════════════════════════════
   skill.re · /cdn/css/type-system.css
   Self-Hosted WOFF2 Typography, 8-Role Fluid Scale & Weight Discipline
   (font_best.md — TYP-01..08, UX-01)
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Figtree';
  src: url('/cdn/fonts/Figtree-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree Fallback';
  src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial');
  size-adjust: 100.8%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/cdn/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Unified Font Stacks (TYP-01, TYP-03 — ends 4-font clash) ────────── */
  --font-sans:      'Figtree', 'Figtree Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   var(--font-sans);
  --font-editorial: var(--font-sans);
  --font-serif:     var(--font-sans);
  --font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* TWC font aliases */
  --twc-font:           var(--font-sans);
  --twc-font-display:   var(--font-display);
  --twc-font-editorial: var(--font-sans);
  --twc-font-mono:      var(--font-mono);

  /* ── 8-Role Fluid clamp() Type Scale (font_best.md Part 2) ───────────── */
  --text-xs:      clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* 12px–13px, never below 12px */
  --text-sm:      clamp(0.8125rem, 0.79rem + 0.18vw, 0.875rem);  /* 13px–14px */
  --text-base:    clamp(0.9375rem, 0.91rem + 0.2vw, 1rem);       /* 15px–16px */
  --text-lg:      clamp(1.0625rem, 1.01rem + 0.3vw, 1.1875rem);  /* 17px–19px */
  --text-xl:      clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20px–24px */
  --text-2xl:     clamp(1.5rem, 1.35rem + 0.8vw, 2rem);          /* 24px–32px */
  --text-3xl:     clamp(1.875rem, 1.65rem + 1.2vw, 2.5rem);      /* 30px–40px */
  --text-display: clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem);       /* 36px–52px */

  /* Legacy scale aliases */
  --fs-12: var(--text-xs);
  --fs-14: var(--text-sm);
  --fs-16: var(--text-base);
  --fs-18: var(--text-lg);
  --fs-24: var(--text-xl);
  --fs-32: var(--text-2xl);
  --fs-48: var(--text-display);

  --twc-text-xs:   var(--text-xs);
  --twc-text-sm:   var(--text-sm);
  --twc-text-base: var(--text-base);
  --twc-text-lg:   var(--text-lg);
  --twc-text-xl:   var(--text-xl);
  --twc-text-2xl:  var(--text-2xl);
  --twc-text-3xl:  var(--text-display);
}

/* ── 3-Weight Discipline: {400, 500, 600} Only (TYP-02) ────────────────── */
html {
  font-size: 16px;
  font-synthesis: none;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
h1 i, h2 i, h3 i, h4 i, h5 i, h6 i {
  font-style: normal;
  font-weight: 600;
}

strong, b, th, label,
.btn, .twc-btn, button,
.pill, .badge, .chip, .twc-tag,
.tabs a, .tabs button,
.side .item, .side-item {
  font-weight: 500;
}

p, li, dd, figcaption {
  text-wrap: pretty;
}

code, pre, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

/* ── Tabular Numerals for Data & Metrics (TYP-06) ──────────────────────── */
table, td, th, time,
.kpi, .kpi .v, .stat, .num, .score, .price, .timer, .pct, .badge, .mono, .ct, .pager-info {
  font-variant-numeric: tabular-nums;
}

/* ── iOS Safari Auto-Zoom Prevention: >= 16px Form Controls (TYP-04/05) ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
.twc-input,
.twc-select,
.twc-textarea,
.searchbar input,
.chat-input input {
  font-size: max(16px, 1rem);
}

/* ── Prose Measure & Accessible Link Underlines (TYP-07, TYP-08) ───────── */
.prose,
.lesson-body,
.cd-desc,
.rd-body,
.art-body {
  max-width: 65ch;
}

:where(p, li, dd, blockquote, .prose, .lesson-body, .rd-body, .cd-desc) a:not(.btn):not(.twc-btn):not(.pill):not(.tag):not(.chip) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}