@troshab/slidev-theme-troshab 0.1.0

package/scripts/shiki-audit.mjs

@@ -0,0 +1,300 @@
+#!/usr/bin/env node
+
+/**
+ * Shiki Syntax Highlighting Audit for slidev-theme-troshab
+ *
+ * 3 sections:
+ *   1. Dracula Spec Alignment — token families match official spec
+ *   2. Contrast Verification — WCAG 4.5:1 + APCA Lc 60+ (short-read content)
+ *   3. Token Distinguishability — OKLCH hue separation >= 30 deg
+ *
+ * Run: node scripts/shiki-audit.mjs
+ *
+ * Scientific basis:
+ *   - Arditi & Cho (2005, IOVS) — Lc 60 threshold for content text (24px+)
+ *   - Sharma & Bala (2002, Color Res. Appl.) — min 30 deg hue for color-deficient
+ *   - Fairchild (2013, Color Appearance Models) — OKLCH perceptual uniformity
+ *   - Dracula Theme Spec (draculatheme.com) — canonical token-to-color mapping
+ */
+
+import { readFileSync } from 'fs'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+import {
+  contrastRatio, apcaContrast, hexToLinear,
+  parsePalette, findMatchingBrace, fmt, fmtLc,
+} from './shared/css-utils.mjs'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+// ---------------------------------------------------------------------------
+// Paths & Parse
+// ---------------------------------------------------------------------------
+
+const colorsPath = resolve(__dirname, '..', 'styles', 'colors.css')
+const palette = parsePalette(colorsPath)
+
+// ---------------------------------------------------------------------------
+// Parse Shiki tokens from colors.css
+// ---------------------------------------------------------------------------
+
+function parseShikiTokens(cssPath) {
+  const css = readFileSync(cssPath, 'utf8')
+  const darkStart = css.indexOf('.dark {')
+  const darkEnd = darkStart >= 0 ? findMatchingBrace(css, darkStart) : -1
+
+  function extractShiki(text) {
+    const tokens = {}
+    const re = /--shiki-token-([\w-]+):\s*var\(--color-([\w-]+)\)\s*;/g
+    let m
+    while ((m = re.exec(text)) !== null) {
+      tokens[m[1]] = m[2]
+    }
+    const bgMatch = text.match(/--shiki-color-background:\s*var\(--color-([\w-]+)\)\s*;/)
+    if (bgMatch) tokens['_background'] = bgMatch[1]
+    return tokens
+  }
+
+  const darkBlock = darkStart >= 0 && darkEnd >= 0 ? css.slice(darkStart, darkEnd + 1) : ''
+  const lightBlock = darkStart >= 0 ? css.slice(0, darkStart) + css.slice(darkEnd + 1) : css
+
+  const lightShiki = extractShiki(lightBlock)
+  const darkShiki = { ...lightShiki, ...extractShiki(darkBlock) }
+  return { light: lightShiki, dark: darkShiki }
+}
+
+const shikiVars = parseShikiTokens(colorsPath)
+
+// ---------------------------------------------------------------------------
+// OKLCH conversion (for hue comparison)
+// ---------------------------------------------------------------------------
+
+function hexToOklch(hex) {
+  const [rL, gL, bL] = hexToLinear(hex)
+
+  // Linear sRGB -> CIE XYZ (D65)
+  const x = 0.4124564 * rL + 0.3575761 * gL + 0.1804375 * bL
+  const y = 0.2126729 * rL + 0.7151522 * gL + 0.0721750 * bL
+  const z = 0.0193339 * rL + 0.1191920 * gL + 0.9503041 * bL
+
+  // XYZ -> LMS (using Oklab M1 matrix)
+  const l_ = 0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z
+  const m_ = 0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z
+  const s_ = 0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z
+
+  // Cube root
+  const lC = Math.cbrt(l_)
+  const mC = Math.cbrt(m_)
+  const sC = Math.cbrt(s_)
+
+  // LMS -> Lab (using Oklab M2 matrix)
+  const L = 0.2104542553 * lC + 0.7936177850 * mC - 0.0040720468 * sC
+  const a = 1.9779984951 * lC - 2.4285922050 * mC + 0.4505937099 * sC
+  const b = 0.0259040371 * lC + 0.7827717662 * mC - 0.8086757660 * sC
+
+  const C = Math.sqrt(a * a + b * b)
+  let h = Math.atan2(b, a) * (180 / Math.PI)
+  if (h < 0) h += 360
+
+  return { L, C, h }
+}
+
+/** Angular hue difference (0-180 degrees). */
+function hueDiff(h1, h2) {
+  let d = Math.abs(h1 - h2)
+  if (d > 180) d = 360 - d
+  return d
+}
+
+// ---------------------------------------------------------------------------
+// Canonical Dracula spec mapping
+// ---------------------------------------------------------------------------
+
+const DRACULA_SPEC = {
+  comment:           'drac-comment',
+  punctuation:       'drac-pink',
+  keyword:           'drac-pink',
+  string:            'drac-yellow',
+  'string-expression': 'drac-yellow',
+  function:          'drac-green',
+  constant:          'drac-purple',
+  parameter:         'drac-orange',
+  link:              'drac-cyan',
+}
+
+const TOKEN_NAMES = Object.keys(DRACULA_SPEC)
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function dualStatus(ratio, minRatio, lc, minLc) {
+  const wcagOk = ratio >= minRatio
+  const apcaOk = Math.abs(lc) >= minLc
+  if (wcagOk && apcaOk) return 'OK'
+  if (!wcagOk) return 'FAIL'
+  return 'WARN'
+}
+
+function statusIcon(s) {
+  if (s === 'FAIL') return '!'
+  if (s === 'WARN') return '~'
+  return ' '
+}
+
+/** Extract Dracula family name from palette ref (e.g. "drac-pink-700" -> "drac-pink"). */
+function familyOf(paletteRef) {
+  const m = paletteRef.match(/^([\w]+-[\w]+)-\d+$/)
+  return m ? m[1] : paletteRef
+}
+
+// ===== MAIN =====
+
+console.log('Shiki Syntax Highlighting Audit - slidev-theme-troshab')
+console.log('='.repeat(76))
+
+let issues = []
+
+// --- Section 1: Dracula Spec Alignment ---
+
+console.log('\n1. DRACULA SPEC ALIGNMENT')
+console.log('   Canonical mapping from spec.draculatheme.com')
+console.log('-'.repeat(76))
+
+for (const theme of ['light', 'dark']) {
+  const shiki = shikiVars[theme]
+  console.log(`\n  ${theme.toUpperCase()} THEME:`)
+  for (const token of TOKEN_NAMES) {
+    const paletteRef = shiki[token]
+    const expectedFamily = DRACULA_SPEC[token]
+    if (!paletteRef) {
+      console.log(`  ! ${token.padEnd(20)} MISSING`)
+      issues.push(`[${theme}] ${token}: missing shiki token`)
+      continue
+    }
+    const actualFamily = familyOf(paletteRef)
+    const match = actualFamily === expectedFamily
+    const icon = match ? ' ' : '!'
+    const status = match ? 'OK' : 'MISMATCH'
+    console.log(`  ${icon} ${token.padEnd(20)} ${paletteRef.padEnd(22)} expected: ${expectedFamily.padEnd(14)} ${status}`)
+    if (!match) {
+      issues.push(`[${theme}] ${token}: family ${actualFamily} != expected ${expectedFamily}`)
+    }
+  }
+}
+
+// --- Section 2: Contrast Verification ---
+
+console.log('\n\n2. CONTRAST VERIFICATION (font-size-small: 18px, WCAG 4.5:1, APCA Lc 60+)')
+console.log('   Code blocks are short-read content (Lc 60), not body text (Lc 75)')
+console.log('-'.repeat(76))
+
+for (const theme of ['light', 'dark']) {
+  const shiki = shikiVars[theme]
+  const bgRef = shiki['_background']
+  const bgHex = bgRef ? palette[bgRef] : null
+  if (!bgHex) {
+    console.log(`\n  ${theme.toUpperCase()}: shiki background missing!`)
+    issues.push(`[${theme}] shiki background: missing`)
+    continue
+  }
+  console.log(`\n  ${theme.toUpperCase()} on shiki-bg ${bgRef} (${bgHex}):`)
+  for (const token of TOKEN_NAMES) {
+    const paletteRef = shiki[token]
+    if (!paletteRef) { console.log(`  ? ${token}: missing`); continue }
+    const fgHex = palette[paletteRef]
+    if (!fgHex) { console.log(`  ? ${token}: palette ref ${paletteRef} not found`); continue }
+    const ratio = contrastRatio(fgHex, bgHex)
+    const lc = apcaContrast(fgHex, bgHex)
+    const minLc = 60
+    const status = dualStatus(ratio, 4.5, lc, minLc)
+    const icon = statusIcon(status)
+    console.log(`  ${icon} ${(token + ' (' + paletteRef + ')').padEnd(35)} ${fmt(ratio).padStart(8)}  ${fmtLc(lc)}  (${minLc}+ ${status})`)
+    if (status === 'FAIL') issues.push(`[${theme}] shiki ${token} (${paletteRef}): ${fmt(ratio)} < 4.5:1`)
+    if (status === 'WARN') issues.push(`[${theme}] shiki ${token}: APCA ${fmtLc(lc)} < Lc ${minLc} (WCAG OK)`)
+  }
+}
+
+// --- Section 3: Token Distinguishability ---
+
+console.log('\n\n3. TOKEN DISTINGUISHABILITY (OKLCH hue separation >= 30 deg)')
+console.log('   Exempt: punctuation/keyword share drac-pink per Dracula spec')
+console.log('-'.repeat(76))
+
+// Pairs that are exempt from hue-diff check (same color per spec)
+const EXEMPT_PAIRS = new Set([
+  'punctuation:keyword',
+  'string:string-expression',
+])
+
+for (const theme of ['light', 'dark']) {
+  const shiki = shikiVars[theme]
+  console.log(`\n  ${theme.toUpperCase()} THEME:`)
+
+  // Collect token hues
+  const tokenHues = {}
+  for (const token of TOKEN_NAMES) {
+    const ref = shiki[token]
+    if (!ref) continue
+    const hex = palette[ref]
+    if (!hex) continue
+    const oklch = hexToOklch(hex)
+    tokenHues[token] = { hex, oklch, ref }
+  }
+
+  // Check all unique pairs
+  let pairCount = 0
+  let warnCount = 0
+  const tokens = Object.keys(tokenHues)
+  for (let i = 0; i < tokens.length; i++) {
+    for (let j = i + 1; j < tokens.length; j++) {
+      const a = tokens[i]
+      const b = tokens[j]
+      const pairKey = `${a}:${b}`
+      const pairKeyRev = `${b}:${a}`
+      if (EXEMPT_PAIRS.has(pairKey) || EXEMPT_PAIRS.has(pairKeyRev)) continue
+
+      pairCount++
+      const hA = tokenHues[a].oklch.h
+      const hB = tokenHues[b].oklch.h
+      const diff = hueDiff(hA, hB)
+      const ok = diff >= 30
+      if (!ok) {
+        warnCount++
+        const icon = '~'
+        console.log(`  ${icon} ${a} / ${b}:  hue ${hA.toFixed(0)} vs ${hB.toFixed(0)} = ${diff.toFixed(0)} deg  WARN (<30)`)
+        issues.push(`[${theme}] hue: ${a}/${b} only ${diff.toFixed(0)} deg apart`)
+      }
+    }
+  }
+  if (warnCount === 0) {
+    console.log(`    All ${pairCount} token pairs have >= 30 deg hue separation`)
+  }
+}
+
+// --- Summary ---
+
+console.log('\n' + '='.repeat(76))
+console.log('SUMMARY')
+console.log('='.repeat(76))
+
+if (issues.length === 0) {
+  console.log('\nAll checks passed!')
+} else {
+  const fails = issues.filter(i => !i.includes('APCA') && !i.includes('hue:'))
+  const warns = issues.filter(i => i.includes('APCA') || i.includes('hue:'))
+  if (fails.length > 0) {
+    console.log(`\n${fails.length} FAIL(s):`)
+    fails.forEach((issue, i) => console.log(`  ${i + 1}. ${issue}`))
+  }
+  if (warns.length > 0) {
+    console.log(`\n${warns.length} WARN(s):`)
+    warns.forEach((issue, i) => console.log(`  ${i + 1}. ${issue}`))
+  }
+}
+
+console.log()
+
+// Exit code: FAIL = 1, WARN-only = 0, hue WARNs don't fail
+const hasFail = issues.some(i => !i.includes('APCA') && !i.includes('hue:'))
+process.exit(hasFail ? 1 : 0)

package/scripts/typography-audit.mjs

@@ -0,0 +1,300 @@
+#!/usr/bin/env node
+
+/**
+ * Typography & CSS Anti-Pattern Audit for slidev-theme-troshab
+ *
+ * Checks font sizes, weights, line heights, spacing, measure, and CSS anti-patterns.
+ * Run: node scripts/typography-audit.mjs
+ *
+ * Standards:
+ *   - BDA Style Guide (2018) — dyslexia-friendly typography
+ *   - WCAG 1.4.12 Text Spacing (resilience test, not mandatory defaults)
+ *   - ISO 9241 display ergonomics
+ *   - Lancaster / York presentation guidelines
+ *
+ * Scientific basis:
+ *   - Zorzi et al. (2012, PNAS 109:11455) — letter-spacing +20% reading speed
+ *   - Pelli et al. (2007, J. Vision) — crowding as dyslexic reading bottleneck
+ *   - Chung (2004, Vision Research) — optimal line-spacing 1.25-1.5x
+ *   - Kolers et al. (1981) — reading speed U-curve vs line-spacing
+ *   - Rayner et al. (1998, 2013, QJEP) — excessive word-spacing slows saccades
+ *   - Rello & Baeza-Yates (2013, ACM ASSETS) — sans-serif > serif for dyslexia
+ *   - Henderson et al. (2013, Br. J. Ed. Tech.) — cream bg -12-15% eye fatigue
+ *   - Wilkins et al. (2001, 2005, Ophthal. Physiol. Opt.) — visual stress from #FFF
+ */
+
+import { readFileSync } from 'fs'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+import { parseCssVar, scanCssPattern } from './shared/css-utils.mjs'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+// ---------------------------------------------------------------------------
+// Paths
+// ---------------------------------------------------------------------------
+
+const basePath = resolve(__dirname, '..', 'styles', 'base.css')
+const colorsPath = resolve(__dirname, '..', 'styles', 'colors.css')
+const motionPath = resolve(__dirname, '..', 'styles', 'motion.css')
+
+const baseCss = readFileSync(basePath, 'utf8')
+const colorsCss = readFileSync(colorsPath, 'utf8')
+const motionCss = readFileSync(motionPath, 'utf8')
+const allCss = baseCss + '\n' + colorsCss + '\n' + motionCss
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+let issues = []
+let warns = []
+
+function parseRem(val) {
+  if (!val) return null
+  const m = val.match(/([\d.]+)rem/)
+  return m ? parseFloat(m[1]) : null
+}
+
+function parseUnitless(val) {
+  if (!val) return null
+  const m = val.match(/([\d.]+)/)
+  return m ? parseFloat(m[1]) : null
+}
+
+function parseEm(val) {
+  if (!val) return null
+  const m = val.match(/([\d.]+)em/)
+  return m ? parseFloat(m[1]) : null
+}
+
+function parseCh(val) {
+  if (!val) return null
+  const m = val.match(/([\d.]+)ch/)
+  return m ? parseFloat(m[1]) : null
+}
+
+function remToPx(rem) {
+  return rem * 16
+}
+
+function check(name, value, min, max, unit, source) {
+  if (value === null) {
+    issues.push(`${name}: not found`)
+    console.log(`  ! ${name.padEnd(30)} NOT FOUND`)
+    return
+  }
+  const inRange = value >= min && (max === null || value <= max)
+  const rangeStr = max !== null ? `${min}-${max}${unit}` : `>= ${min}${unit}`
+  const status = inRange ? 'OK' : 'FAIL'
+  const icon = inRange ? ' ' : '!'
+  console.log(`  ${icon} ${name.padEnd(30)} ${value}${unit}`.padEnd(52) + `  ${rangeStr.padEnd(16)}  ${status}  (${source})`)
+  if (!inRange) issues.push(`${name}: ${value}${unit} not in ${rangeStr} (${source})`)
+}
+
+function warn(name, value, threshold, unit, source) {
+  if (value === null) return
+  const ok = value >= threshold
+  const status = ok ? 'OK' : 'INFO'
+  const icon = ok ? ' ' : '~'
+  console.log(`  ${icon} ${name.padEnd(30)} ${value}${unit}`.padEnd(52) + `  >= ${threshold}${unit}`.padEnd(16) + `  ${status}  (${source})`)
+  if (!ok) warns.push(`${name}: ${value}${unit} < ${threshold}${unit} (${source})`)
+}
+
+// ===== MAIN =====
+
+console.log('Typography & CSS Anti-Pattern Audit - slidev-theme-troshab')
+console.log('='.repeat(76))
+
+// --- Section 1: Font sizes ---
+
+console.log('\n1. FONT SIZES (presentation minimums)')
+console.log('-'.repeat(76))
+
+const fontSizeH1 = parseRem(parseCssVar(baseCss, '--font-size-h1'))
+const fontSizeH2 = parseRem(parseCssVar(baseCss, '--font-size-h2'))
+const fontSizeBase = parseRem(parseCssVar(baseCss, '--font-size-base'))
+const fontSizeSmall = parseRem(parseCssVar(baseCss, '--font-size-small'))
+
+check('--font-size-h1', fontSizeH1, 2, null, 'rem', 'heading min')
+check('--font-size-h2', fontSizeH2, 1.75, null, 'rem', 'sub-heading min')
+check('--font-size-base', fontSizeBase, 1.5, null, 'rem', 'Lancaster Portal')
+check('--font-size-small', fontSizeSmall, 1.125, null, 'rem', 'York guide')
+
+if (fontSizeH1) console.log(`\n  APCA context: h1 = ${remToPx(fontSizeH1)}px -> Lc 45+ (large headline)`)
+if (fontSizeH2) console.log(`  APCA context: h2 = ${remToPx(fontSizeH2)}px -> Lc 45+ (large headline)`)
+if (fontSizeBase) console.log(`  APCA context: base = ${remToPx(fontSizeBase)}px -> Lc 60+ (content text)`)
+if (fontSizeSmall) console.log(`  APCA context: small = ${remToPx(fontSizeSmall)}px -> Lc 75+ (body text)`)
+
+// --- Section 2: Font weights ---
+
+console.log('\n\n2. FONT WEIGHTS (ISO 9241 / projector readability)')
+console.log('-'.repeat(76))
+
+const weightNormal = parseUnitless(parseCssVar(baseCss, '--font-weight-normal'))
+check('--font-weight-normal', weightNormal, 400, null, '', 'ISO 9241')
+
+// Scan all CSS for light weights (100/200/300)
+const lightWeightMatches = scanCssPattern(allCss, /font-weight:\s*(100|200|300)\b/g)
+
+if (lightWeightMatches.length === 0) {
+  console.log('  No light font weights (100-300) found.                                    OK')
+} else {
+  for (const m of lightWeightMatches) {
+    // Get surrounding context (selector)
+    const before = allCss.slice(Math.max(0, m.index - 100), m.index)
+    const selectorMatch = before.match(/([^\n{}]+)\{[^{}]*$/)
+    const selector = selectorMatch ? selectorMatch[1].trim() : '(unknown)'
+    console.log(`  ! font-weight: ${m[1]} in "${selector}"`.padEnd(60) + 'FAIL  (ISO 9241)')
+    issues.push(`Light font weight ${m[1]} found in "${selector}"`)
+  }
+}
+
+// --- Section 3: Line heights & spacing ---
+
+console.log('\n\n3. LINE HEIGHTS & SPACING (BDA + WCAG 1.4.12)')
+console.log('-'.repeat(76))
+
+const lhHeading = parseUnitless(parseCssVar(baseCss, '--line-height-heading'))
+const lhBody = parseUnitless(parseCssVar(baseCss, '--line-height-body'))
+const lhReading = parseUnitless(parseCssVar(baseCss, '--line-height-reading'))
+const lhCode = parseUnitless(parseCssVar(baseCss, '--line-height-code'))
+const letterBody = parseEm(parseCssVar(baseCss, '--letter-spacing-body'))
+const wordBody = parseEm(parseCssVar(baseCss, '--word-spacing-body'))
+const paragraphSpacing = parseEm(parseCssVar(baseCss, '--paragraph-spacing'))
+const measure = parseCh(parseCssVar(baseCss, '--measure'))
+const measureNarrow = parseCh(parseCssVar(baseCss, '--measure-narrow'))
+
+check('--line-height-heading', lhHeading, 1.1, null, '', 'typography')
+check('--line-height-body', lhBody, 1.3, null, '', 'BDA slides')
+check('--line-height-reading', lhReading, 1.5, null, '', 'WCAG / BDA')
+check('--line-height-code', lhCode, 1.3, null, '', 'code readability')
+check('--letter-spacing-body', letterBody, 0.001, null, 'em', 'BDA > 0')
+check('--paragraph-spacing', paragraphSpacing, 0.5, null, 'em', 'readability')
+check('--measure', measure, 55, 75, 'ch', 'Baymard/BDA')
+check('--measure-narrow', measureNarrow, 35, 55, 'ch', 'column constraint')
+
+// BDA word/letter ratio
+if (letterBody && wordBody) {
+  const ratio = wordBody / letterBody
+  check('word/letter ratio', ratio, 3.5, null, 'x', 'BDA >= 3.5x')
+}
+
+// WCAG 1.4.12 resilience (informational)
+console.log('\n  WCAG 1.4.12 Text Spacing resilience (informational):')
+if (lhBody) warn('line-height vs 1.5x', lhBody, 1.5, '', 'WCAG override')
+if (paragraphSpacing) warn('paragraph-spacing vs 2em', paragraphSpacing, 2, 'em', 'WCAG override')
+if (letterBody) warn('letter-spacing vs 0.12em', letterBody, 0.12, 'em', 'WCAG override')
+if (wordBody) warn('word-spacing vs 0.16em', wordBody, 0.16, 'em', 'WCAG override')
+
+// --- Section 4: CSS anti-patterns ---
+
+console.log('\n\n4. CSS ANTI-PATTERNS')
+console.log('-'.repeat(76))
+
+let antiPatternCount = 0
+
+// 4a. text-align: justify
+const justifyMatches = scanCssPattern(allCss, /text-align:\s*justify/g)
+if (justifyMatches.length === 0) {
+  console.log('    text-align: justify'.padEnd(52) + 'not found'.padEnd(16) + '  OK    (BDA)')
+} else {
+  for (const m of justifyMatches) {
+    console.log(`  ! text-align: justify found`.padEnd(52) + ''.padEnd(16) + '  FAIL  (BDA)')
+    issues.push('text-align: justify found (BDA forbids)')
+    antiPatternCount++
+  }
+}
+
+// 4b. text-transform: uppercase on body selectors
+const uppercaseMatches = scanCssPattern(allCss, /text-transform:\s*uppercase/g)
+if (uppercaseMatches.length === 0) {
+  console.log('    text-transform: uppercase'.padEnd(52) + 'not found'.padEnd(16) + '  OK    (BDA)')
+} else {
+  for (const m of uppercaseMatches) {
+    const before = allCss.slice(Math.max(0, m.index - 200), m.index)
+    const selectorMatch = before.match(/([^\n{}]+)\{[^{}]*$/)
+    const selector = selectorMatch ? selectorMatch[1].trim() : '(unknown)'
+    // Allow in small UI elements like tags, labels
+    const isUiElement = /\.tag|\.label|\.badge|\.btn|\.step-number|\.timeline-date/i.test(selector)
+    if (isUiElement) {
+      console.log(`    text-transform: uppercase in "${selector}"`.padEnd(52) + 'UI element'.padEnd(16) + '  OK    (allowed)')
+    } else {
+      console.log(`  ~ text-transform: uppercase in "${selector}"`.padEnd(52) + ''.padEnd(16) + '  WARN  (BDA)')
+      warns.push(`text-transform: uppercase in "${selector}" (BDA: avoid on body text)`)
+      antiPatternCount++
+    }
+  }
+}
+
+// 4c. font-style: italic on body default
+const italicMatches = scanCssPattern(baseCss, /font-style:\s*italic/g)
+for (const m of italicMatches) {
+  const before = baseCss.slice(Math.max(0, m.index - 200), m.index)
+  const selectorMatch = before.match(/([^\n{}]+)\{[^{}]*$/)
+  const selector = selectorMatch ? selectorMatch[1].trim() : '(unknown)'
+  // Italic in blockquote/cite is acceptable
+  const isQuote = /blockquote|cite|em\b|\.quote/i.test(selector)
+  if (isQuote) {
+    console.log(`    font-style: italic in "${selector}"`.padEnd(52) + 'quote context'.padEnd(16) + '  OK    (acceptable)')
+  } else {
+    console.log(`  ~ font-style: italic in "${selector}"`.padEnd(52) + ''.padEnd(16) + '  WARN  (BDA)')
+    warns.push(`font-style: italic in "${selector}" (BDA: avoid on body default)`)
+    antiPatternCount++
+  }
+}
+if (italicMatches.length === 0) {
+  console.log('    font-style: italic on body'.padEnd(52) + 'not found'.padEnd(16) + '  OK    (BDA)')
+}
+
+// 4d. @font-face without font-display: swap
+const fontFaceBlocks = scanCssPattern(baseCss, /@font-face\s*\{[^}]*\}/g)
+let missingFontDisplay = 0
+for (const m of fontFaceBlocks) {
+  if (!m[0].includes('font-display')) {
+    const familyMatch = m[0].match(/font-family:\s*'([^']+)'/)
+    const family = familyMatch ? familyMatch[1] : '(unknown)'
+    console.log(`  ! @font-face "${family}" missing font-display: swap`.padEnd(52) + ''.padEnd(16) + '  FAIL  (perf/a11y)')
+    issues.push(`@font-face "${family}" missing font-display: swap`)
+    missingFontDisplay++
+  }
+}
+if (missingFontDisplay === 0) {
+  console.log('    @font-face font-display: swap'.padEnd(52) + 'all present'.padEnd(16) + '  OK    (perf/a11y)')
+}
+
+// 4e. font-family root ends with sans-serif
+const fontSans = parseCssVar(baseCss, '--font-sans')
+if (fontSans) {
+  const endsWithGeneric = /,\s*(sans-serif|serif|monospace|cursive|fantasy)\s*$/.test(fontSans)
+  if (endsWithGeneric) {
+    console.log('    --font-sans generic fallback'.padEnd(52) + 'present'.padEnd(16) + '  OK    (Oxford/BDA)')
+  } else {
+    console.log(`  ! --font-sans missing generic fallback`.padEnd(52) + ''.padEnd(16) + '  FAIL  (Oxford/BDA)')
+    issues.push('--font-sans missing generic fallback (sans-serif)')
+  }
+} else {
+  console.log(`  ? --font-sans not found`)
+}
+
+// --- Section 5: Summary ---
+
+console.log('\n' + '='.repeat(76))
+console.log('SUMMARY')
+console.log('='.repeat(76))
+
+if (issues.length === 0 && warns.length === 0) {
+  console.log('\nAll checks passed!')
+} else {
+  if (issues.length > 0) {
+    console.log(`\n${issues.length} FAIL(s):`)
+    issues.forEach((issue, i) => console.log(`  ${i + 1}. ${issue}`))
+  }
+  if (warns.length > 0) {
+    console.log(`\n${warns.length} WARN/INFO:`)
+    warns.forEach((w, i) => console.log(`  ${i + 1}. ${w}`))
+  }
+}
+
+console.log()
+process.exit(issues.length > 0 ? 1 : 0)