@etus/seven-skill 0.1.0-beta.1

package/cli/engine/detect-antipatterns-browser.js

@@ -0,0 +1,3014 @@
+/**
+ * Seven Design System — in-browser anti-pattern detector.
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * GENERATED — do not edit. Rebuild: node build/build-browser-detector.mjs
+ * Source modules: cli/engine/shared/constants.mjs, cli/engine/registry/seven-antipatterns.mjs, cli/engine/shared/color.mjs, cli/engine/token-data.generated.mjs, cli/engine/shared/tokens.mjs, cli/engine/rules/checks.mjs, cli/engine/browser/injected/index.mjs
+ *
+ * Detector architecture adapted from impeccable (Paul Bakaus, Apache-2.0).
+ */
+(function () {
+if (typeof window === 'undefined') return
+// ── cli/engine/shared/constants.mjs ──
+// SPDX-License-Identifier: Apache-2.0
+// ETUS Digital — Seven Design System. Detector architecture adapted from
+// impeccable (Paul Bakaus, Apache-2.0). See packages/seven-skill/NOTICE.md.
+
+// ─── Seven-specific catalogs ────────────────────────────────────────────────
+
+/**
+ * The only sans face allowed in Seven. Note this INVERTS impeccable's
+ * `OVERUSED_FONTS` rule: impeccable flags Inter as overused, Seven mandates it.
+ */
+const INTER_FAMILY_NAMES = new Set([
+  'inter',
+  'inter-variable',
+  'intervariable',
+  'inter var',
+])
+
+/** The only mono face allowed in Seven. */
+const JETBRAINS_MONO_FAMILY_NAMES = new Set([
+  'jetbrains mono',
+  'jetbrains-mono',
+  'jetbrainsmono',
+])
+
+/** Generic / system fallbacks that never count as a non-Inter face. */
+const SYSTEM_FONT_FALLBACK_TOKENS = new Set([
+  'system-ui',
+  '-apple-system',
+  'blinkmacsystemfont',
+  'segoe ui',
+  'roboto',
+  'helvetica',
+  'helvetica neue',
+  'arial',
+  'sans-serif',
+  'serif',
+  'monospace',
+  'ui-monospace',
+  'ui-sans-serif',
+  'ui-serif',
+  'ui-rounded',
+  'menlo',
+  'consolas',
+  'courier new',
+  'inherit',
+  'initial',
+  'unset',
+  'revert',
+])
+
+/** HTML tags whose own styling never trips element-level rules. */
+const SAFE_TAGS = new Set([
+  'html', 'head', 'body', 'script', 'style', 'link', 'meta', 'title', 'br',
+  'svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'g', 'defs', 'use',
+])
+
+/** European Portuguese vocabulary that must not appear in pt-BR chrome. */
+const PT_PT_VOCAB_PAIRS = [
+  { ptPt: 'ficheiro', ptBr: 'arquivo' },
+  { ptPt: 'ficheiros', ptBr: 'arquivos' },
+  { ptPt: 'telemóvel', ptBr: 'celular' },
+  { ptPt: 'telemóveis', ptBr: 'celulares' },
+  { ptPt: 'ecrã', ptBr: 'tela' },
+  { ptPt: 'ecrãs', ptBr: 'telas' },
+  { ptPt: 'rato', ptBr: 'mouse' },
+  { ptPt: 'autocarro', ptBr: 'ônibus' },
+  { ptPt: 'gestor', ptBr: 'gerente' },
+  { ptPt: 'utilizador', ptBr: 'usuário' },
+  { ptPt: 'utilizadores', ptBr: 'usuários' },
+  { ptPt: 'sítio', ptBr: 'site' },
+  { ptPt: 'apagar', ptBr: 'excluir' },
+]
+
+/**
+ * Package names whose source is exempt from rules that would mis-fire on
+ * token-defining or skill-defining code. Resolved by walking up to the
+ * nearest package.json — works inside the monorepo and inside a consumer's
+ * node_modules alike.
+ */
+const SEVEN_INTERNAL_PACKAGES = new Set(['@etus/ui', '@etus/tokens', '@etus/seven-skill'])
+
+/** Path segments whose files define tokens and may carry raw color literals. */
+const TOKEN_DEFINITION_PATH_SEGMENTS = [
+  'packages/tokens/sources/',
+  'packages/tokens/sd/',
+  'packages/tokens/dist/',
+  'docs/tokens-json/',
+]
+
+/** Test fixtures are always scanned regardless of the package they sit in. */
+const FIXTURES_PATH_SEGMENT = '/tests/fixtures/'
+
+// ── cli/engine/registry/seven-antipatterns.mjs ──
+const ANTIPATTERNS = [
+  // ── Seven text rules (Phase 1) ───────────────────────────────────────────
+  {
+    id: 'non-inter-font',
+    category: 'quality',
+    name: 'Non-Inter font family',
+    description:
+      'Font family is not Inter, JetBrains Mono, or a system fallback. Seven is Inter-only for sans and JetBrains Mono for code. Substitute Inter at the same size and surface the swap.',
+    skillReference: 'reference/typography.md',
+  },
+  {
+    id: 'hardcoded-color-not-token',
+    category: 'quality',
+    name: 'Hardcoded color literal',
+    description:
+      'Hex, rgb, hsl, or OKLCH color literal where an @etus/tokens CSS variable exists. Runtime code consumes var(--token); raw color literals belong only in packages/tokens/sources. When the literal matches a token value, the finding names the exact token.',
+    skillReference: 'reference/color-and-contrast.md',
+  },
+  {
+    id: 'raw-tailwind-palette-color',
+    category: 'quality',
+    name: 'Raw Tailwind palette color',
+    description:
+      'A Tailwind default-palette color utility (bg-green-500, text-neutral-900, border-red-200, ring-blue-500). The palette paints a color that bypasses @etus/tokens exactly as a hex literal does. Use a Seven color token via bg-[color:var(--*)] or the equivalent utility.',
+    skillReference: 'reference/color-and-contrast.md',
+  },
+  {
+    id: 'missing-color-type-hint',
+    category: 'quality',
+    name: 'Missing Tailwind v4 color type hint',
+    description:
+      'A Tailwind v4 arbitrary value referencing a color token is missing the color: hint (e.g. bg-[var(--primary)] instead of bg-[color:var(--primary)]). Lightning CSS drops the unhinted value silently.',
+    skillReference: 'reference/color-and-contrast.md',
+  },
+  {
+    id: 'missing-length-type-hint',
+    category: 'quality',
+    name: 'Missing Tailwind v4 length type hint',
+    description:
+      'A Tailwind v4 text-[var(--*)] arbitrary value resolving to a length is missing the length: hint. Lightning CSS drops the unhinted value silently.',
+    skillReference: 'reference/color-and-contrast.md',
+  },
+  {
+    id: 'leading-none-with-length-var',
+    category: 'quality',
+    name: 'leading-none with arbitrary length var',
+    description:
+      'leading-none combined with text-[length:var(--*)] zeroes line-height in Tailwind v4. Use leading-tight, leading-snug, a literal leading-[1.1], or inline style.',
+    skillReference: 'reference/typography.md',
+  },
+  {
+    id: 'fuchsia-in-ui-chrome',
+    category: 'slop',
+    name: 'Fuchsia on UI chrome',
+    description:
+      'Fuchsia is reserved for charts in Seven. On UI chrome (buttons, inputs, borders) it is an anti-pattern. Allowed inside <svg> and on elements tagged data-role="chart".',
+    skillReference: 'reference/color-and-contrast.md',
+  },
+  {
+    id: 'pt-pt-vocab',
+    category: 'quality',
+    name: 'European Portuguese vocabulary',
+    description:
+      'European Portuguese vocabulary in pt-BR chrome. Seven product copy is Brazilian Portuguese; use the pt-BR equivalent.',
+    skillReference: 'reference/ux-writing.md',
+  },
+  {
+    id: 'pure-black-or-white',
+    category: 'quality',
+    name: 'Pure black or white',
+    description:
+      'Pure #000 or #fff. Seven uses tinted neutrals from the OKLCH ramp; pure black and white read as harsh and unrefined.',
+    skillReference: 'reference/color-and-contrast.md',
+  },
+
+  // ── Inverted / retuned for Seven ─────────────────────────────────────────
+  {
+    id: 'side-stripe-border',
+    category: 'slop',
+    name: 'Side-stripe accent border',
+    description:
+      'A border-left or border-right thicker than 1px used as a colored accent stripe — the most recognizable tell of AI-generated UIs and banned in Seven. Use a full 1px var(--border), a background tint, a leading icon, or restructure the element.',
+    skillReference: 'reference/spatial-design.md',
+  },
+  {
+    id: 'gradient-text-decorative',
+    category: 'slop',
+    name: 'Decorative gradient text',
+    description:
+      'Decorative gradient text (background-clip: text + gradient). Seven text is solid color from the OKLCH ramp; gradient fills on headings and metrics are banned.',
+    skillReference: 'reference/color-and-contrast.md',
+  },
+  {
+    id: 'shadows-not-borders',
+    category: 'slop',
+    name: 'Glow shadow instead of border',
+    description:
+      'A colored, blurred box-shadow on a dark surface (the AI "dark glow" look) — or a shadow standing in for card chrome. Seven cards carry hierarchy with 1px borders; shadows are reserved for overlays.',
+    skillReference: 'reference/spatial-design.md',
+  },
+
+  // ── Universal design-quality / a11y rules ────────────────────────────────
+  {
+    id: 'low-contrast',
+    category: 'quality',
+    name: 'Low contrast text',
+    description:
+      'Text does not meet WCAG 2.1 AA contrast (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background using Seven token pairs.',
+    skillReference: 'reference/color-and-contrast.md',
+  },
+  {
+    id: 'gray-on-color',
+    category: 'quality',
+    name: 'Gray text on colored background',
+    description:
+      'Gray text looks washed out on a colored background. Use a darker shade of the background hue, or a near-white foreground token, for legible contrast.',
+    skillReference: 'reference/color-and-contrast.md',
+  },
+  {
+    id: 'nested-cards',
+    category: 'slop',
+    name: 'Nested cards',
+    description:
+      'A card inside a card. Seven flattens hierarchy — use a section divider, a labeled list, or a Tabs view instead of nesting bordered containers.',
+    skillReference: 'reference/spatial-design.md',
+  },
+  {
+    id: 'monotonous-spacing',
+    category: 'quality',
+    name: 'Monotonous spacing',
+    description:
+      'The same spacing value used everywhere — no rhythm. Seven rhythm is intentional: tighter inside a card, looser between cards, looser still between sections.',
+    skillReference: 'reference/spatial-design.md',
+  },
+  {
+    id: 'flat-type-hierarchy',
+    category: 'quality',
+    name: 'Flat type hierarchy',
+    description:
+      'Font sizes too close together — no clear hierarchy. Walk the Seven Text/Heading ramp; pair scale with weight contrast.',
+    skillReference: 'reference/typography.md',
+  },
+  {
+    id: 'layout-transition',
+    category: 'quality',
+    name: 'Layout property animation',
+    description:
+      'Animating width, height, padding, or margin triggers reflow and looks janky. Seven motion animates transform and opacity only.',
+    skillReference: 'reference/motion-design.md',
+  },
+  {
+    id: 'line-length',
+    category: 'quality',
+    name: 'Line length too long',
+    description:
+      'Text lines wider than ~80 characters are hard to read. Add a max-width (65ch to 75ch) to body text containers.',
+    skillReference: 'reference/spatial-design.md',
+  },
+  {
+    id: 'cramped-padding',
+    category: 'quality',
+    name: 'Cramped padding',
+    description:
+      'Text sits too close to the edge of its container. Add padding scaled to the font size inside bordered or tinted containers.',
+    skillReference: 'reference/spatial-design.md',
+  },
+  {
+    id: 'body-text-viewport-edge',
+    category: 'quality',
+    name: 'Body text touching viewport edge',
+    description:
+      'Body paragraphs bleed flush against the viewport edge with no container padding. Wrap content in a padded container or apply max-width with mx-auto.',
+    skillReference: 'reference/spatial-design.md',
+  },
+  {
+    id: 'tight-leading',
+    category: 'quality',
+    name: 'Tight line height',
+    description:
+      'Line height below 1.3x the font size makes multi-line text hard to read. Seven body text uses 1.5 leading.',
+    skillReference: 'reference/typography.md',
+  },
+  {
+    id: 'skipped-heading',
+    category: 'quality',
+    name: 'Skipped heading level',
+    description:
+      'Heading levels skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation; skipping levels breaks the document outline.',
+    skillReference: 'reference/typography.md',
+  },
+  {
+    id: 'justified-text',
+    category: 'quality',
+    name: 'Justified text',
+    description:
+      'Justified text without hyphenation creates rivers of uneven word spacing. Use text-align: left for body copy.',
+    skillReference: 'reference/typography.md',
+  },
+  {
+    id: 'tiny-text',
+    category: 'quality',
+    name: 'Tiny body text',
+    description:
+      'Body text below 12px is hard to read. Seven body content uses --text-base (16px); labels use --text-xs (12px) at minimum.',
+    skillReference: 'reference/typography.md',
+  },
+  {
+    id: 'all-caps-body',
+    category: 'quality',
+    name: 'All-caps body text',
+    description:
+      'Long passages in uppercase are hard to read. Seven reserves uppercase for short monospaced data-table column headers; body copy is sentence case.',
+    skillReference: 'reference/typography.md',
+  },
+  {
+    id: 'wide-tracking',
+    category: 'quality',
+    name: 'Wide letter spacing on body text',
+    description:
+      'Letter spacing above 0.05em on body text slows reading. Seven labels use Inter at default tracking; wide tracking is a Display-only choice.',
+    skillReference: 'reference/typography.md',
+  },
+  {
+    id: 'bounce-easing',
+    category: 'slop',
+    name: 'Bounce or elastic easing',
+    description:
+      'Bounce, elastic, or spring easing. Seven motion is decelerated and stops — no overshoot in chrome. Use --ease-default or --ease-out-quart.',
+    skillReference: 'reference/motion-design.md',
+  },
+  {
+    id: 'everything-centered',
+    category: 'slop',
+    name: 'Everything centered',
+    description:
+      'Every text element is center-aligned. Seven chrome is left-aligned with intentional asymmetry; center only deliberate display surfaces.',
+    skillReference: 'reference/spatial-design.md',
+  },
+
+  // ── Seven element-level rules ────────────────────────────────────────────
+  {
+    id: 'missing-tactile-press',
+    category: 'quality',
+    name: 'Clickable without tactile press',
+    description:
+      'A clickable affordance (button, role="button", interactive list item) with no transform-based micro-press transition. Seven gives every affordance the system-wide tactile press (hover translateY -1px, active 0.5px).',
+    skillReference: 'reference/motion-design.md',
+  },
+  {
+    id: 'pill-on-button',
+    category: 'slop',
+    name: 'Pill radius on a button',
+    description:
+      'A button with border-radius 9999 / rounded-full. Buttons stay on the component radius scale (md 8). Pill radius is for badges, status indicators, and avatar triggers only.',
+    skillReference: 'reference/spatial-design.md',
+  },
+  {
+    id: 'radius-mixed-scales',
+    category: 'quality',
+    name: 'Mixed radius scales',
+    description:
+      'A component-scale radius (4 / 8 / 12) mixed with a surface-scale radius (16 / 20 / 24 / 32) on the same element. The two radius stacks are not interchangeable; mixing them produces "almost looks right" drift.',
+    skillReference: 'reference/spatial-design.md',
+  },
+  {
+    id: 'non-lucide-icon',
+    category: 'slop',
+    name: 'Non-Lucide icon',
+    description:
+      'An inline <svg> that is not a Lucide icon (Lucide uses 24x24 viewBox, 2px stroke, round line caps and joins, no fill). Seven uses the Lucide set exclusively.',
+    skillReference: 'reference/typography.md',
+  },
+  {
+    id: 'emoji-in-chrome',
+    category: 'slop',
+    name: 'Emoji in UI chrome',
+    description:
+      'An emoji character inside button, label, or heading text. Seven chrome uses Lucide icons, not emoji glyphs, which render inconsistently across platforms.',
+    skillReference: 'reference/ux-writing.md',
+  },
+  {
+    id: 'forbidden-em-dash',
+    category: 'quality',
+    name: 'Em-dash or en-dash in copy',
+    description:
+      'An em-dash or en-dash in user-facing copy. Seven copy uses a comma, a colon, or a sentence break; the long dash reads as machine-generated prose.',
+    skillReference: 'reference/ux-writing.md',
+  },
+]
+
+// ── cli/engine/shared/color.mjs ──
+// SPDX-License-Identifier: Apache-2.0
+// ETUS Digital — Seven Design System. Detector architecture adapted from
+// impeccable (Paul Bakaus, Apache-2.0). See packages/seven-skill/NOTICE.md.
+
+// ─── Color utilities ────────────────────────────────────────────────────────
+
+function isNeutralColor(color) {
+  if (!color || color === 'transparent') return true
+
+  // rgb/rgba — channel spread. Threshold 30 is ~11.7% of the 0-255 range.
+  const rgb = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/)
+  if (rgb) {
+    return Math.max(+rgb[1], +rgb[2], +rgb[3]) - Math.min(+rgb[1], +rgb[2], +rgb[3]) < 30
+  }
+
+  // oklch()/lch() — chroma is the second numeric component. Seven's tokens are
+  // OKLCH throughout, so this path matters: chroma >= 0.02 reads as tinted.
+  const oklch = color.match(/oklch\(\s*[\d.]+%?\s*([\d.-]+)/i)
+  if (oklch) return parseFloat(oklch[1]) < 0.02
+  const lch = color.match(/lch\(\s*[\d.]+%?\s*([\d.-]+)/i)
+  if (lch) return parseFloat(lch[1]) < 3
+
+  // oklab()/lab() — a and b are signed axes; chroma = hypot(a, b).
+  const oklab = color.match(/oklab\(\s*[\d.]+%?\s*([\d.-]+)\s+([\d.-]+)/i)
+  if (oklab) return Math.hypot(parseFloat(oklab[1]), parseFloat(oklab[2])) < 0.02
+  const lab = color.match(/lab\(\s*[\d.]+%?\s*([\d.-]+)\s+([\d.-]+)/i)
+  if (lab) return Math.hypot(parseFloat(lab[1]), parseFloat(lab[2])) < 3
+
+  // hsl/hsla — saturation is the second numeric component (percent).
+  const hsl = color.match(/hsla?\(\s*[\d.-]+\s*,?\s*([\d.]+)%/i)
+  if (hsl) return parseFloat(hsl[1]) < 10
+
+  // hwb(hue whiteness% blackness%) — gray when whiteness + blackness >= 100.
+  const hwb = color.match(/hwb\(\s*[\d.-]+\s+([\d.]+)%\s+([\d.]+)%/i)
+  if (hwb) {
+    const w = parseFloat(hwb[1])
+    const b = parseFloat(hwb[2])
+    return 1 - Math.min(100, w + b) / 100 < 0.1
+  }
+
+  // Unknown format — err on the side of DETECTING rather than skipping.
+  return false
+}
+
+function parseRgb(color) {
+  if (!color || color === 'transparent') return null
+  const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/)
+  if (!m) return null
+  return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] }
+}
+
+function parseHex(hex) {
+  if (!hex) return null
+  const m = hex.match(/^#([0-9a-f]{3,8})$/i)
+  if (!m) return null
+  const h = m[1]
+  if (h.length === 3) {
+    return { r: parseInt(h[0] + h[0], 16), g: parseInt(h[1] + h[1], 16), b: parseInt(h[2] + h[2], 16), a: 1 }
+  }
+  if (h.length === 6 || h.length === 8) {
+    return {
+      r: parseInt(h.slice(0, 2), 16),
+      g: parseInt(h.slice(2, 4), 16),
+      b: parseInt(h.slice(4, 6), 16),
+      a: h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1,
+    }
+  }
+  return null
+}
+
+function relativeLuminance({ r, g, b }) {
+  const [rs, gs, bs] = [r / 255, g / 255, b / 255].map((c) =>
+    c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+  )
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
+}
+
+function contrastRatio(c1, c2) {
+  const l1 = relativeLuminance(c1)
+  const l2 = relativeLuminance(c2)
+  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05)
+}
+
+function hasChroma(c, threshold = 30) {
+  if (!c) return false
+  return Math.max(c.r, c.g, c.b) - Math.min(c.r, c.g, c.b) >= threshold
+}
+
+function getHue(c) {
+  if (!c) return 0
+  const r = c.r / 255
+  const g = c.g / 255
+  const b = c.b / 255
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  if (max === min) return 0
+  const d = max - min
+  let h
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
+  else if (max === g) h = ((b - r) / d + 2) / 6
+  else h = ((r - g) / d + 4) / 6
+  return Math.round(h * 360)
+}
+
+function colorToHex(c) {
+  if (!c) return '?'
+  return '#' + [c.r, c.g, c.b].map((v) => v.toString(16).padStart(2, '0')).join('')
+}
+
+/**
+ * Fuchsia / magenta detection. Seven reserves fuchsia for charts; on UI chrome
+ * it is an anti-pattern. A color is "fuchsia" when it has real chroma and its
+ * hue sits in the magenta band (roughly 280-340 degrees).
+ */
+function isFuchsia(c) {
+  if (!c || !hasChroma(c, 40)) return false
+  const hue = getHue(c)
+  return hue >= 280 && hue <= 340
+}
+
+/**
+ * OKLCH -> sRGB. Seven's color tokens are OKLCH; matching them to hex/rgb
+ * literals in code needs this conversion. Follows the CSS Color 4 / Björn
+ * Ottosson reference. L is 0-1, C is chroma, H is degrees.
+ */
+function oklchToRgb(L, C, H) {
+  const hRad = (H * Math.PI) / 180
+  const a = C * Math.cos(hRad)
+  const b = C * Math.sin(hRad)
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b
+  const l = l_ ** 3
+  const m = m_ ** 3
+  const s = s_ ** 3
+  const lr = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s
+  const lg = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s
+  const lb = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  const gamma = (x) => (x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055)
+  return [gamma(lr), gamma(lg), gamma(lb)].map((v) => Math.round(Math.max(0, Math.min(1, v)) * 255))
+}
+
+/** Canonical form for an exact-string token match: trimmed, lowercased,
+ *  whitespace-collapsed. Shared by the token-data build step and the runtime
+ *  accessor. */
+function normalizeRaw(value) {
+  return String(value).trim().toLowerCase().replace(/\s+/g, ' ')
+}
+
+/**
+ * Reduce any color literal (oklch, hex, rgb/rgba) to a canonical `r,g,b,a`
+ * key. Shared by the token-data build step and the runtime token accessor so
+ * a literal in consumer code matches a Seven token regardless of format.
+ * Returns null when the value is not a recognized color.
+ */
+function colorToRgbaKey(value) {
+  if (!value || typeof value !== 'string') return null
+  const v = value.trim().toLowerCase()
+
+  const oklch = v.match(/oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+)(%?))?\s*\)/)
+  if (oklch) {
+    const L = oklch[2] === '%' ? parseFloat(oklch[1]) / 100 : parseFloat(oklch[1])
+    const C = parseFloat(oklch[3])
+    const H = parseFloat(oklch[4])
+    let alpha = 1
+    if (oklch[5] !== undefined) {
+      alpha = oklch[6] === '%' ? parseFloat(oklch[5]) / 100 : parseFloat(oklch[5])
+    }
+    const [r, g, b] = oklchToRgb(L, C, H)
+    return `${r},${g},${b},${alpha.toFixed(2)}`
+  }
+
+  const hex = v.match(/^#([0-9a-f]{3,8})$/)
+  if (hex) {
+    const h = hex[1]
+    let r
+    let g
+    let b
+    let a = 1
+    if (h.length === 3 || h.length === 4) {
+      r = parseInt(h[0] + h[0], 16)
+      g = parseInt(h[1] + h[1], 16)
+      b = parseInt(h[2] + h[2], 16)
+      if (h.length === 4) a = parseInt(h[3] + h[3], 16) / 255
+    } else if (h.length === 6 || h.length === 8) {
+      r = parseInt(h.slice(0, 2), 16)
+      g = parseInt(h.slice(2, 4), 16)
+      b = parseInt(h.slice(4, 6), 16)
+      if (h.length === 8) a = parseInt(h.slice(6, 8), 16) / 255
+    } else {
+      return null
+    }
+    return `${r},${g},${b},${a.toFixed(2)}`
+  }
+
+  const rgb = v.match(/rgba?\(\s*(\d+)\s*[, ]\s*(\d+)\s*[, ]\s*(\d+)\s*(?:[,/]\s*([\d.]+)(%?))?\s*\)/)
+  if (rgb) {
+    let a = 1
+    if (rgb[4] !== undefined) a = rgb[5] === '%' ? parseFloat(rgb[4]) / 100 : parseFloat(rgb[4])
+    return `${+rgb[1]},${+rgb[2]},${+rgb[3]},${a.toFixed(2)}`
+  }
+
+  return null
+}
+
+// ── cli/engine/token-data.generated.mjs ──
+// SPDX-License-Identifier: Apache-2.0
+// ETUS Digital — Seven Design System.
+//
+// GENERATED — do not edit. Rebuild: node build/build-token-data.mjs
+// Source: @etus/tokens (dist/tokens.meta.json). When @etus/tokens rebuilds
+// from a Figma sync, regenerate this snapshot so the detector stays a mirror
+// of the design system.
+
+const TOKEN_DATA = {
+  "colorByRgba": {
+    "0,0,0,1.00": "--base-black",
+    "0,0,0,0.20": "--base-black-20",
+    "0,0,0,0.40": "--base-black-40",
+    "0,0,0,0.60": "--base-black-60",
+    "0,0,0,0.80": "--base-black-80",
+    "0,0,0,0.00": "--base-transparent",
+    "255,255,255,1.00": "--base-white",
+    "219,234,254,1.00": "--blue-100",
+    "191,219,254,1.00": "--blue-200",
+    "147,197,253,1.00": "--blue-300",
+    "96,165,250,1.00": "--blue-400",
+    "239,246,255,1.00": "--blue-50",
+    "59,130,246,1.00": "--blue-500",
+    "37,99,235,1.00": "--blue-600",
+    "29,78,216,1.00": "--blue-700",
+    "30,64,175,1.00": "--blue-800",
+    "30,58,138,1.00": "--blue-900",
+    "23,37,84,1.00": "--blue-950",
+    "6,110,62,1.00": "--brand-green-dark",
+    "178,250,153,1.00": "--brand-green-light",
+    "141,247,104,1.00": "--brand-green-primary",
+    "59,228,118,1.00": "--brand-green-secondary",
+    "218,253,206,1.00": "--brand-green-soft",
+    "21,21,20,1.00": "--brand-neutral-black",
+    "62,62,60,1.00": "--brand-neutral-dark",
+    "110,109,104,1.00": "--brand-neutral-gray-01",
+    "144,142,137,1.00": "--brand-neutral-gray-02",
+    "190,187,183,1.00": "--brand-neutral-gray-03",
+    "214,212,209,1.00": "--brand-neutral-gray-04",
+    "235,233,229,1.00": "--brand-neutral-gray-05",
+    "243,242,239,1.00": "--brand-neutral-gray-06",
+    "251,250,249,1.00": "--brand-neutral-off-white",
+    "209,250,235,1.00": "--brand-primary-100",
+    "163,245,214,1.00": "--brand-primary-200",
+    "117,240,194,1.00": "--brand-primary-300",
+    "71,235,173,1.00": "--brand-primary-400",
+    "232,253,245,1.00": "--brand-primary-50",
+    "25,230,153,1.00": "--brand-primary-500",
+    "20,184,122,1.00": "--brand-primary-600",
+    "15,138,92,1.00": "--brand-primary-700",
+    "10,92,61,1.00": "--brand-primary-800",
+    "5,46,31,1.00": "--brand-primary-900",
+    "2,23,15,1.00": "--brand-primary-950",
+    "238,254,234,1.00": "--brand-secondary-100",
+    "210,252,199,1.00": "--brand-secondary-200",
+    "189,251,171,1.00": "--brand-secondary-300",
+    "152,250,115,1.00": "--brand-secondary-400",
+    "247,254,245,1.00": "--brand-secondary-50",
+    "143,245,102,1.00": "--brand-secondary-500",
+    "110,190,77,1.00": "--brand-secondary-600",
+    "80,141,55,1.00": "--brand-secondary-700",
+    "50,92,34,1.00": "--brand-secondary-800",
+    "25,50,15,1.00": "--brand-secondary-900",
+    "12,30,6,1.00": "--brand-secondary-950",
+    "160,227,243,1.00": "--brand-secondary-blue-01",
+    "191,237,248,1.00": "--brand-secondary-blue-02",
+    "210,244,252,1.00": "--brand-secondary-blue-03",
+    "197,240,122,1.00": "--brand-secondary-green-01",
+    "215,244,164,1.00": "--brand-secondary-green-02",
+    "228,251,189,1.00": "--brand-secondary-green-03",
+    "245,179,216,1.00": "--brand-secondary-pink-01",
+    "250,209,232,1.00": "--brand-secondary-pink-02",
+    "253,222,239,1.00": "--brand-secondary-pink-03",
+    "240,238,122,1.00": "--brand-secondary-yellow-01",
+    "247,245,166,1.00": "--brand-secondary-yellow-02",
+    "253,251,190,1.00": "--brand-secondary-yellow-03",
+    "244,222,252,1.00": "--fuchsia-100",
+    "236,191,250,1.00": "--fuchsia-200",
+    "227,156,247,1.00": "--fuchsia-300",
+    "219,116,244,1.00": "--fuchsia-400",
+    "250,240,254,1.00": "--fuchsia-50",
+    "212,68,241,1.00": "--fuchsia-500",
+    "172,43,197,1.00": "--fuchsia-600",
+    "131,30,151,1.00": "--fuchsia-700",
+    "93,18,107,1.00": "--fuchsia-800",
+    "53,7,62,1.00": "--fuchsia-900",
+    "37,4,44,1.00": "--fuchsia-950",
+    "220,252,231,1.00": "--green-100",
+    "187,247,208,1.00": "--green-200",
+    "134,239,172,1.00": "--green-300",
+    "74,222,128,1.00": "--green-400",
+    "240,253,244,1.00": "--green-50",
+    "34,197,94,1.00": "--green-500",
+    "22,163,74,1.00": "--green-600",
+    "21,128,61,1.00": "--green-700",
+    "22,101,52,1.00": "--green-800",
+    "20,83,45,1.00": "--green-900",
+    "5,46,22,1.00": "--green-950",
+    "245,245,245,1.00": "--neutral-100",
+    "229,229,229,1.00": "--neutral-200",
+    "212,212,212,1.00": "--neutral-300",
+    "163,163,163,1.00": "--neutral-400",
+    "250,250,250,1.00": "--neutral-50",
+    "115,115,115,1.00": "--neutral-500",
+    "82,82,82,1.00": "--neutral-600",
+    "64,64,64,1.00": "--neutral-700",
+    "38,38,38,1.00": "--neutral-800",
+    "23,23,23,1.00": "--neutral-900",
+    "10,10,10,1.00": "--neutral-950",
+    "254,226,226,1.00": "--red-100",
+    "254,202,202,1.00": "--red-200",
+    "252,165,165,1.00": "--red-300",
+    "248,113,113,1.00": "--red-400",
+    "254,242,242,1.00": "--red-50",
+    "239,68,68,1.00": "--red-500",
+    "220,38,38,1.00": "--red-600",
+    "185,28,28,1.00": "--red-700",
+    "153,27,27,1.00": "--red-800",
+    "127,29,29,1.00": "--red-900",
+    "69,10,10,1.00": "--red-950",
+    "254,249,195,1.00": "--yellow-100",
+    "254,240,138,1.00": "--yellow-200",
+    "253,224,71,1.00": "--yellow-300",
+    "250,204,21,1.00": "--yellow-400",
+    "254,252,232,1.00": "--yellow-50",
+    "234,179,8,1.00": "--yellow-500",
+    "202,138,4,1.00": "--yellow-600",
+    "161,98,7,1.00": "--yellow-700",
+    "133,77,14,1.00": "--yellow-800",
+    "113,63,18,1.00": "--yellow-900",
+    "66,32,6,1.00": "--yellow-950",
+    "148,163,184,1.00": "--asset-palette-status-draft-color",
+    "100,116,139,1.00": "--asset-palette-type-archive-color",
+    "100,116,139,0.18": "--asset-palette-type-archive-tint",
+    "6,182,212,1.00": "--asset-palette-type-audio-color",
+    "6,182,212,0.16": "--asset-palette-type-audio-tint",
+    "236,72,153,1.00": "--asset-palette-type-code-css-color",
+    "236,72,153,0.14": "--asset-palette-type-code-css-tint",
+    "234,179,8,0.16": "--asset-palette-type-code-js-tint",
+    "167,139,250,1.00": "--asset-palette-type-code-json-color",
+    "167,139,250,0.16": "--asset-palette-type-code-json-tint",
+    "59,130,246,0.14": "--asset-palette-type-code-ts-tint",
+    "56,189,248,1.00": "--asset-palette-type-code-tsx-color",
+    "56,189,248,0.14": "--asset-palette-type-code-tsx-tint",
+    "167,139,250,0.18": "--asset-palette-type-design-figma-tint",
+    "234,179,8,0.18": "--asset-palette-type-design-illustrator-tint",
+    "59,130,246,0.16": "--asset-palette-type-design-raster-tint",
+    "220,38,38,0.14": "--asset-palette-type-doc-pdf-tint",
+    "37,99,235,0.16": "--asset-palette-type-doc-text-tint",
+    "249,115,22,1.00": "--asset-palette-type-image-color",
+    "249,115,22,0.16": "--asset-palette-type-image-tint",
+    "25,230,153,0.18": "--asset-palette-type-vector-tint",
+    "239,68,68,0.16": "--asset-palette-type-video-tint",
+    "0,0,0,0.08": "--avatar-border-contrast",
+    "217,119,6,1.00": "--border-semantic-warning",
+    "255,255,255,0.95": "--feed-item-background-highlight",
+    "255,255,255,0.90": "--lightbox-button-background",
+    "255,255,255,0.80": "--lightbox-button-background-hover",
+    "255,255,255,0.10": "--lightbox-overlay-background",
+    "255,215,168,1.00": "--priority-high-bg",
+    "144,53,0,1.00": "--priority-high-text",
+    "234,239,245,1.00": "--priority-low-bg",
+    "105,115,125,1.00": "--priority-low-text",
+    "253,232,154,1.00": "--priority-medium-bg",
+    "112,81,0,1.00": "--priority-medium-text",
+    "255,212,205,1.00": "--priority-urgent-bg",
+    "162,5,25,1.00": "--priority-urgent-text",
+    "0,0,0,0.30": "--sheet-overlay-bg-blur",
+    "255,255,255,0.50": "--sheet-overlay-bg-light",
+    "199,247,199,1.00": "--status-approved-bg",
+    "0,139,29,1.00": "--status-approved-dot",
+    "0,90,0,1.00": "--status-approved-text",
+    "149,160,171,1.00": "--status-cancelled-dot",
+    "134,144,155,1.00": "--status-cancelled-text",
+    "255,227,153,1.00": "--status-changes-requested-bg",
+    "209,146,0,1.00": "--status-changes-requested-dot",
+    "122,74,0,1.00": "--status-changes-requested-text",
+    "230,98,0,1.00": "--status-escalated-dot",
+    "119,129,140,1.00": "--status-expired-text",
+    "192,237,255,1.00": "--status-in-review-bg",
+    "0,130,230,1.00": "--status-in-review-dot",
+    "0,86,164,1.00": "--status-in-review-text",
+    "212,9,36,1.00": "--status-rejected-dot",
+    "194,154,0,1.00": "--task-status-in-review-dot",
+    "224,229,235,1.00": "--task-status-todo-bg",
+    "133,97,221,1.00": "--tip",
+    "244,241,255,1.00": "--tip-bg"
+  },
+  "colorByRaw": {
+    "oklch(0.00% 0.0000 0)": "--base-black",
+    "oklch(0.00% 0.0000 0 / 20.0%)": "--base-black-20",
+    "oklch(0.00% 0.0000 0 / 40.0%)": "--base-black-40",
+    "oklch(0.00% 0.0000 0 / 60.0%)": "--sheet-overlay-bg-default",
+    "oklch(0.00% 0.0000 0 / 80.0%)": "--overlay",
+    "oklch(0.00% 0.0000 0 / 0.0%)": "--base-transparent",
+    "oklch(100.00% 0.0000 0)": "--tooltip-content-foreground",
+    "oklch(93.19% 0.0316 255.59)": "--blue-100",
+    "oklch(88.23% 0.0571 254.13)": "--alert-variant-info-border",
+    "oklch(80.91% 0.0956 251.81)": "--status-info-subtle-foreground",
+    "oklch(71.37% 0.1434 254.62)": "--blue-400",
+    "oklch(97.05% 0.0142 254.60)": "--featured-icon-color-info-bg",
+    "oklch(62.31% 0.1880 259.81)": "--color-firefox",
+    "oklch(54.61% 0.2152 262.88)": "--status-indicator-dot-color-info",
+    "oklch(48.82% 0.2172 264.38)": "--feature-item-tone-info-fg",
+    "oklch(42.44% 0.1809 265.64)": "--status-info-border",
+    "oklch(37.91% 0.1378 265.52)": "--blue-900",
+    "oklch(28.23% 0.0874 267.94)": "--status-info-subtle",
+    "oklch(47.37% 0.1147 155.11)": "--brand-green-dark",
+    "oklch(91.50% 0.1458 137.94)": "--brand-green-light",
+    "oklch(88.23% 0.2057 138.41)": "--brand-green-primary",
+    "oklch(81.06% 0.2032 150.12)": "--brand-green-secondary",
+    "oklch(95.70% 0.0719 137.74)": "--brand-green-soft",
+    "oklch(19.53% 0.0020 106.58)": "--brand-neutral-black",
+    "oklch(36.32% 0.0034 106.57)": "--brand-neutral-dark",
+    "oklch(53.41% 0.0078 97.45)": "--brand-neutral-gray-01",
+    "oklch(64.69% 0.0077 88.67)": "--brand-neutral-gray-02",
+    "oklch(79.33% 0.0065 75.40)": "--brand-neutral-gray-03",
+    "oklch(87.07% 0.0047 78.30)": "--brand-neutral-gray-04",
+    "oklch(93.45% 0.0058 84.57)": "--brand-neutral-gray-05",
+    "oklch(96.11% 0.0041 91.45)": "--brand-neutral-gray-06",
+    "oklch(98.56% 0.0017 67.80)": "--brand-neutral-off-white",
+    "oklch(95.21% 0.0467 171.12)": "--toggle-variant-default-bg-on",
+    "oklch(90.88% 0.0912 168.55)": "--primary-border",
+    "oklch(87.18% 0.1296 166.48)": "--primary-subtle-foreground",
+    "oklch(84.11% 0.1609 163.31)": "--sidebar-ring",
+    "oklch(97.65% 0.0243 170.99)": "--surface-selected",
+    "oklch(81.75% 0.1821 159.79)": "--toggle-variant-outline-bg-on",
+    "oklch(69.20% 0.1533 159.90)": "--spinner-gradient-end",
+    "oklch(56.08% 0.1221 160.56)": "--feature-item-tone-subtle-fg",
+    "oklch(42.11% 0.0897 161.06)": "--primary-border",
+    "oklch(26.88% 0.0527 163.85)": "--select-item-focus-fg",
+    "oklch(18.34% 0.0338 166.67)": "--toggle-variant-outline-color-on",
+    "oklch(97.98% 0.0312 139.44)": "--secondary-foreground",
+    "oklch(94.80% 0.0824 139.21)": "--secondary-border",
+    "oklch(92.69% 0.1227 138.76)": "--secondary-subtle-foreground",
+    "oklch(89.58% 0.1950 137.90)": "--brand-secondary-background",
+    "oklch(98.93% 0.0139 138.71)": "--secondary-subtle",
+    "oklch(87.82% 0.2037 137.75)": "--tags-input-tag-background",
+    "oklch(72.57% 0.1684 137.62)": "--button-secondary-color-border-hover",
+    "oklch(58.24% 0.1354 137.66)": "--focus-ring-secondary-color",
+    "oklch(42.97% 0.0993 137.99)": "--secondary-hover",
+    "oklch(28.73% 0.0661 137.75)": "--secondary",
+    "oklch(21.23% 0.0502 138.22)": "--tags-input-tag-foreground",
+    "oklch(87.65% 0.0705 214.23)": "--brand-secondary-blue-01",
+    "oklch(91.74% 0.0496 213.90)": "--brand-secondary-blue-02",
+    "oklch(94.53% 0.0369 213.51)": "--brand-secondary-blue-03",
+    "oklch(89.98% 0.1534 125.85)": "--brand-secondary-green-01",
+    "oklch(92.74% 0.1074 124.65)": "--brand-secondary-green-02",
+    "oklch(95.61% 0.0839 124.49)": "--brand-secondary-green-03",
+    "oklch(83.87% 0.0897 344.52)": "--brand-secondary-pink-01",
+    "oklch(90.22% 0.0546 343.48)": "--brand-secondary-pink-02",
+    "oklch(93.10% 0.0406 343.74)": "--brand-secondary-pink-03",
+    "oklch(92.74% 0.1387 107.93)": "--brand-secondary-yellow-01",
+    "oklch(95.38% 0.0993 106.91)": "--brand-secondary-yellow-02",
+    "oklch(97.51% 0.0778 106.19)": "--brand-secondary-yellow-03",
+    "oklch(92.74% 0.0464 317.08)": "--fuchsia-100",
+    "oklch(86.29% 0.0932 318.07)": "--fuchsia-200",
+    "oklch(79.32% 0.1454 318.64)": "--fuchsia-300",
+    "oklch(72.33% 0.2034 319.49)": "--fuchsia-400",
+    "oklch(96.70% 0.0213 316.46)": "--fuchsia-50",
+    "oklch(65.95% 0.2608 320.32)": "--color-safari",
+    "oklch(55.67% 0.2346 320.38)": "--fuchsia-600",
+    "oklch(45.62% 0.1930 320.21)": "--fuchsia-700",
+    "oklch(35.68% 0.1512 320.61)": "--fuchsia-800",
+    "oklch(24.61% 0.1035 320.37)": "--fuchsia-900",
+    "oklch(19.86% 0.0826 320.14)": "--fuchsia-950",
+    "oklch(96.24% 0.0434 156.74)": "--green-100",
+    "oklch(92.50% 0.0806 155.99)": "--alert-variant-success-border",
+    "oklch(87.12% 0.1363 154.45)": "--success-subtle-foreground",
+    "oklch(80.03% 0.1821 151.71)": "--green-400",
+    "oklch(98.19% 0.0181 155.83)": "--featured-icon-color-success-bg",
+    "oklch(72.27% 0.1920 149.58)": "--success",
+    "oklch(62.71% 0.1699 149.21)": "--timeline-marker-color-success",
+    "oklch(52.73% 0.1371 150.07)": "--alert-variant-success-fg",
+    "oklch(44.79% 0.1083 151.33)": "--status-success-border",
+    "oklch(39.25% 0.0896 152.54)": "--green-900",
+    "oklch(26.64% 0.0628 152.93)": "--success-subtle",
+    "oklch(97.02% 0.0000 0)": "--topbar-root-background",
+    "oklch(92.19% 0.0000 0)": "--topbar-root-border-color",
+    "oklch(86.99% 0.0000 0)": "--text-disabled",
+    "oklch(71.55% 0.0000 0)": "--border-semantic-strong",
+    "oklch(98.51% 0.0000 0)": "--surface-sunken",
+    "oklch(55.55% 0.0000 0)": "--toolbar-button-foreground-muted",
+    "oklch(43.86% 0.0000 0)": "--status-disabled-foreground",
+    "oklch(37.15% 0.0000 0)": "--status-disabled-border",
+    "oklch(26.86% 0.0000 0)": "--status-disabled-disabled",
+    "oklch(20.46% 0.0000 0)": "--slider-tooltip-fg",
+    "oklch(14.48% 0.0000 0)": "--tooltip-content-background",
+    "oklch(93.56% 0.0309 17.72)": "--red-100",
+    "oklch(88.45% 0.0593 18.33)": "--alert-variant-destructive-border",
+    "oklch(80.77% 0.1035 19.57)": "--status-destructive-subtle-foreground",
+    "oklch(71.06% 0.1661 22.22)": "--status-destructive-hover",
+    "oklch(97.05% 0.0129 17.38)": "--featured-icon-color-destructive-bg",
+    "oklch(63.68% 0.2078 25.33)": "--timeline-marker-color-error",
+    "oklch(57.71% 0.2152 27.33)": "--asset-palette-type-doc-pdf-color",
+    "oklch(50.54% 0.1905 27.52)": "--alert-variant-destructive-fg",
+    "oklch(44.37% 0.1613 26.90)": "--status-destructive-border",
+    "oklch(39.58% 0.1331 25.72)": "--red-900",
+    "oklch(25.75% 0.0886 26.04)": "--status-destructive-subtle",
+    "oklch(97.29% 0.0693 103.19)": "--yellow-100",
+    "oklch(94.51% 0.1243 101.54)": "--alert-variant-warning-border",
+    "oklch(90.52% 0.1657 98.11)": "--warning-subtle-foreground",
+    "oklch(86.06% 0.1731 91.94)": "--timeline-marker-color-warning",
+    "oklch(98.73% 0.0262 102.21)": "--featured-icon-color-warning-bg",
+    "oklch(79.52% 0.1617 86.05)": "--asset-palette-type-design-illustrator-color",
+    "oklch(68.06% 0.1423 75.83)": "--text-warning",
+    "oklch(55.38% 0.1207 66.44)": "--feature-item-tone-warning-fg",
+    "oklch(47.62% 0.1034 61.91)": "--status-warning-border",
+    "oklch(42.10% 0.0897 57.71)": "--yellow-900",
+    "oklch(28.57% 0.0639 53.81)": "--badge-color-warning-fg",
+    "transparent": "--toggle-variant-outline-bg-default",
+    "oklch(71.07% 0.0351 256.79)": "--asset-palette-status-draft-color",
+    "oklch(55.44% 0.0407 257.42)": "--asset-palette-type-code-env-color",
+    "rgb(100 116 139 / 0.18)": "--asset-palette-type-code-env-tint",
+    "oklch(71.48% 0.1257 215.22)": "--asset-palette-type-audio-color",
+    "rgb(6 182 212 / 0.16)": "--asset-palette-type-audio-tint",
+    "oklch(65.59% 0.2118 354.31)": "--asset-palette-type-code-css-color",
+    "rgb(236 72 153 / 0.14)": "--asset-palette-type-code-css-tint",
+    "rgb(234 179 8 / 0.16)": "--asset-palette-type-code-js-tint",
+    "oklch(70.90% 0.1592 293.54)": "--asset-palette-type-design-figma-color",
+    "rgb(167 139 250 / 0.16)": "--asset-palette-type-code-json-tint",
+    "rgb(59 130 246 / 0.14)": "--asset-palette-type-code-ts-tint",
+    "oklch(75.35% 0.1390 232.66)": "--asset-palette-type-code-tsx-color",
+    "rgb(56 189 248 / 0.14)": "--asset-palette-type-code-tsx-tint",
+    "rgb(167 139 250 / 0.18)": "--asset-palette-type-design-figma-tint",
+    "rgb(234 179 8 / 0.18)": "--asset-palette-type-design-illustrator-tint",
+    "rgb(59 130 246 / 0.16)": "--asset-palette-type-design-raster-tint",
+    "rgb(220 38 38 / 0.14)": "--asset-palette-type-doc-pdf-tint",
+    "rgb(37 99 235 / 0.16)": "--asset-palette-type-doc-text-tint",
+    "oklch(70.49% 0.1867 47.60)": "--asset-palette-type-image-color",
+    "rgb(249 115 22 / 0.16)": "--asset-palette-type-image-tint",
+    "rgb(25 230 153 / 0.18)": "--asset-palette-type-vector-tint",
+    "rgb(239 68 68 / 0.16)": "--asset-palette-type-video-tint",
+    "rgba(0, 0, 0, 0.08)": "--avatar-border-contrast",
+    "oklch(66.58% 0.1574 58.32)": "--border-semantic-warning",
+    "oklch(100.00% 0.0000 0 / 94.9%)": "--feed-item-background-highlight",
+    "9999px": "--image-rounded-circle",
+    "0.375rem": "--image-rounded-rounded",
+    "oklch(100.00% 0.0000 0 / 90.2%)": "--lightbox-button-background",
+    "oklch(100.00% 0.0000 0 / 80.0%)": "--split-button-divider-color-contrast",
+    "oklch(100.00% 0.0000 0 / 10.2%)": "--lightbox-overlay-background",
+    "oklch(93% 0.10 55)": "--status-escalated-bg",
+    "oklch(45% 0.15 55)": "--status-escalated-text",
+    "oklch(95% 0.01 250)": "--task-status-backlog-bg",
+    "oklch(55% 0.02 250)": "--task-status-todo-text",
+    "oklch(93% 0.10 95)": "--task-status-in-review-bg",
+    "oklch(45% 0.15 95)": "--task-status-in-review-text",
+    "oklch(93% 0.08 25)": "--task-status-blocked-bg",
+    "oklch(45% 0.18 25)": "--task-status-blocked-text",
+    "oklch(0% 0 0 / 30%)": "--sheet-overlay-bg-blur",
+    "oklch(100% 0 0 / 50%)": "--sheet-overlay-bg-light",
+    "oklch(93% 0.08 145)": "--task-status-done-bg",
+    "oklch(55% 0.18 145)": "--task-status-done-dot",
+    "oklch(40% 0.15 145)": "--task-status-done-text",
+    "oklch(70% 0.02 250)": "--task-status-todo-dot",
+    "oklch(65% 0.02 250)": "--status-pending-dot",
+    "oklch(93% 0.10 85)": "--status-changes-requested-bg",
+    "oklch(70% 0.18 85)": "--status-changes-requested-dot",
+    "oklch(45% 0.15 85)": "--status-changes-requested-text",
+    "oklch(65% 0.20 55)": "--status-escalated-dot",
+    "oklch(60% 0.02 250)": "--task-status-backlog-text",
+    "oklch(93% 0.08 250)": "--task-status-in-progress-bg",
+    "oklch(60% 0.18 250)": "--task-status-in-progress-dot",
+    "oklch(45% 0.15 250)": "--task-status-in-progress-text",
+    "oklch(55% 0.22 25)": "--task-status-blocked-dot",
+    "oklch(70% 0.18 95)": "--task-status-in-review-dot",
+    "oklch(92% 0.01 250)": "--task-status-todo-bg",
+    "oklch(58.97% 0.1820 293.54)": "--tip",
+    "oklch(96.50% 0.0250 293.54)": "--tip-bg"
+  },
+  "fontFamilies": [
+    "inter"
+  ],
+  "radii": {
+    "all": [
+      0,
+      1,
+      1.5,
+      2,
+      3,
+      4,
+      5,
+      6,
+      7,
+      8,
+      10,
+      12,
+      13,
+      14,
+      16,
+      20,
+      24,
+      32,
+      999,
+      9999
+    ],
+    "component": [
+      1,
+      1.5,
+      2,
+      3,
+      4,
+      5,
+      6,
+      7,
+      8,
+      10,
+      12
+    ],
+    "surface": [
+      13,
+      14,
+      16,
+      20,
+      24,
+      32
+    ],
+    "pill": [
+      999,
+      9999
+    ]
+  },
+  "fontSizesPx": [
+    10,
+    12,
+    13,
+    14,
+    16,
+    18,
+    20,
+    24,
+    30,
+    32,
+    36,
+    48,
+    60,
+    72,
+    96
+  ],
+  "lineHeights": [
+    "1",
+    "1.25",
+    "1.375",
+    "1.5",
+    "1.55",
+    "1.625",
+    "104px",
+    "14px",
+    "16px",
+    "2",
+    "20px",
+    "24px",
+    "28px",
+    "32px",
+    "36px",
+    "40px",
+    "44px",
+    "56px",
+    "68px",
+    "80px"
+  ],
+  "letterSpacings": [
+    "-0.025em",
+    "-0.05em",
+    "0.025em",
+    "0.05em",
+    "0.1em",
+    "0em"
+  ],
+  "durations": {
+    "--duration-fast": "100ms",
+    "--duration-instant": "0ms",
+    "--duration-moderate": "300ms",
+    "--duration-normal": "200ms",
+    "--duration-slow": "300ms",
+    "--duration-slower": "500ms",
+    "--duration-slowest": "700ms",
+    "--accordion-icon-transition-duration": "200ms",
+    "--button-transition-duration": "150ms"
+  },
+  "easings": {
+    "--ease-bounce": "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+    "--ease-default": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "--ease-emphasized": "cubic-bezier(0.2, 0, 0, 1)",
+    "--ease-in": "cubic-bezier(0.4, 0, 1, 1)",
+    "--ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "--ease-linear": "cubic-bezier(0, 0, 1, 1)",
+    "--ease-out": "cubic-bezier(0, 0, 0.2, 1)",
+    "--ease-spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
+  },
+  "shadows": [
+    "--button-shadow-default",
+    "--button-shadow-sm",
+    "--button-shadow-xs",
+    "--card-root-shadow-lg",
+    "--card-root-shadow-sm",
+    "--card-root-shadow-xl",
+    "--collection-batchbar-shadow",
+    "--filetree-footer-dot-ring",
+    "--focus-ring-destructive-shadow",
+    "--focus-ring-ghost-shadow",
+    "--focus-ring-outline-shadow",
+    "--focus-ring-primary-shadow",
+    "--focus-ring-secondary-shadow",
+    "--shadow-lg",
+    "--shadow-md",
+    "--shadow-sm",
+    "--shadow-xl",
+    "--shadow-xs",
+    "--slider-thumb-drop-shadow"
+  ],
+  "spacingPx": [
+    0,
+    1,
+    2,
+    4,
+    8,
+    12,
+    16,
+    20,
+    24,
+    32,
+    40,
+    48,
+    56,
+    64,
+    80,
+    96,
+    128,
+    160,
+    192,
+    224,
+    256
+  ],
+  "semanticColorVars": [
+    "--accent",
+    "--accent-foreground",
+    "--background",
+    "--border",
+    "--brand-accent-background",
+    "--brand-accent-foreground",
+    "--brand-primary-active",
+    "--brand-primary-background",
+    "--brand-primary-border",
+    "--brand-primary-foreground",
+    "--brand-primary-hover",
+    "--brand-primary-subtle",
+    "--brand-primary-subtle-foreground",
+    "--brand-secondary-active",
+    "--brand-secondary-background",
+    "--brand-secondary-border",
+    "--brand-secondary-foreground",
+    "--brand-secondary-hover",
+    "--brand-secondary-subtle",
+    "--brand-secondary-subtle-foreground",
+    "--card",
+    "--card-foreground",
+    "--chart-1",
+    "--chart-2",
+    "--chart-3",
+    "--chart-4",
+    "--chart-5",
+    "--core-background-background",
+    "--core-background-card",
+    "--core-background-card-foreground",
+    "--core-background-foreground",
+    "--core-background-inversed-foreground",
+    "--core-background-muted",
+    "--core-background-muted-foreground",
+    "--core-background-overlay",
+    "--core-background-popover",
+    "--core-background-popover-foreground",
+    "--core-background-surface",
+    "--core-background-surface-foreground",
+    "--core-border-border",
+    "--core-border-input",
+    "--core-border-ring",
+    "--destructive",
+    "--destructive-border",
+    "--destructive-foreground",
+    "--destructive-hover",
+    "--destructive-subtle",
+    "--destructive-subtle-foreground",
+    "--disabled",
+    "--disabled-background",
+    "--disabled-border",
+    "--disabled-foreground",
+    "--extended-chart-1",
+    "--extended-chart-2",
+    "--extended-chart-3",
+    "--extended-chart-4",
+    "--extended-chart-5",
+    "--foreground",
+    "--info",
+    "--info-border",
+    "--info-foreground",
+    "--info-subtle",
+    "--info-subtle-foreground",
+    "--input",
+    "--inversed-foreground",
+    "--kbd-variant-default-background",
+    "--kbd-variant-default-color",
+    "--kbd-variant-ghost-background",
+    "--kbd-variant-ghost-color",
+    "--kbd-variant-outline-background",
+    "--kbd-variant-outline-border-color",
+    "--kbd-variant-outline-color",
+    "--label-optional-color",
+    "--label-required-color",
+    "--link-color-default",
+    "--link-color-muted",
+    "--link-color-nav",
+    "--link-color-nav-hover",
+    "--link-color-subtle",
+    "--muted",
+    "--muted-foreground",
+    "--overlay",
+    "--paragraph-color-default",
+    "--paragraph-color-destructive",
+    "--paragraph-color-muted",
+    "--paragraph-color-primary",
+    "--paragraph-color-success",
+    "--popover",
+    "--popover-bg",
+    "--popover-border",
+    "--popover-content-background",
+    "--popover-content-foreground",
+    "--popover-fg",
+    "--popover-foreground",
+    "--primary",
+    "--primary-active",
+    "--primary-border",
+    "--primary-foreground",
+    "--primary-hover",
+    "--primary-subtle",
+    "--primary-subtle-foreground",
+    "--ring",
+    "--ring-offset",
+    "--secondary",
+    "--secondary-border",
+    "--secondary-foreground",
+    "--secondary-hover",
+    "--secondary-subtle",
+    "--secondary-subtle-foreground",
+    "--sidebar",
+    "--sidebar-accent",
+    "--sidebar-accent-foreground",
+    "--sidebar-background",
+    "--sidebar-border",
+    "--sidebar-foreground",
+    "--sidebar-ring",
+    "--status-destructive-background",
+    "--status-destructive-border",
+    "--status-destructive-foreground",
+    "--status-destructive-hover",
+    "--status-destructive-subtle",
+    "--status-destructive-subtle-foreground",
+    "--status-disabled-border",
+    "--status-disabled-disabled",
+    "--status-disabled-foreground",
+    "--status-info-background",
+    "--status-info-border",
+    "--status-info-foreground",
+    "--status-info-subtle",
+    "--status-info-subtle-foreground",
+    "--status-success-background",
+    "--status-success-border",
+    "--status-success-foreground",
+    "--status-success-subtle",
+    "--status-success-subtle-foreground",
+    "--status-warning-background",
+    "--status-warning-border",
+    "--status-warning-foreground",
+    "--status-warning-subtle",
+    "--status-warning-subtle-foreground",
+    "--success",
+    "--success-border",
+    "--success-foreground",
+    "--success-subtle",
+    "--success-subtle-foreground",
+    "--surface",
+    "--surface-foreground",
+    "--warning",
+    "--warning-border",
+    "--warning-foreground",
+    "--warning-subtle",
+    "--warning-subtle-foreground"
+  ]
+}
+
+Object.freeze(TOKEN_DATA)
+
+// ── cli/engine/shared/tokens.mjs ──
+// SPDX-License-Identifier: Apache-2.0
+// ETUS Digital — Seven Design System. Detector architecture adapted from
+// impeccable (Paul Bakaus, Apache-2.0). See packages/seven-skill/NOTICE.md.
+
+/*
+ * Token accessor. The single API the rule layer uses to consult Seven's
+ * design tokens. It wraps the build-time snapshot (token-data.generated.mjs,
+ * derived from @etus/tokens) behind semantic accessors so the rules never see
+ * the snapshot's raw shape — the snapshot can change without touching a rule.
+ */
+
+
+/** True when the snapshot carries usable data. Rules fall back to heuristics
+ *  if this is ever false (defensive — not expected in a built package). */
+function tokenDataAvailable() {
+  return Boolean(TOKEN_DATA && Object.keys(TOKEN_DATA.colorByRgba || {}).length > 0)
+}
+
+// ─── Color ──────────────────────────────────────────────────────────────────
+
+/**
+ * Resolve a literal color (hex, rgb, oklch) to the Seven token cssVar that
+ * declares it, or null when no token matches. Format-insensitive: a hex
+ * literal resolves the same OKLCH token as the OKLCH form.
+ */
+function colorToCssVar(rawValue) {
+  if (!rawValue) return null
+  const key = colorToRgbaKey(rawValue)
+  if (key && TOKEN_DATA.colorByRgba[key]) return TOKEN_DATA.colorByRgba[key]
+  const raw = normalizeRaw(rawValue)
+  return TOKEN_DATA.colorByRaw[raw] || null
+}
+
+/** True when the literal color is a declared Seven token value. */
+function isKnownTokenColor(rawValue) {
+  return colorToCssVar(rawValue) !== null
+}
+
+// ─── Typography ─────────────────────────────────────────────────────────────
+
+/**
+ * The sans/mono families Seven sanctions. Derived from the `fontFamily`
+ * tokens, plus JetBrains Mono — Seven's documented code face, which the
+ * current token catalog does not yet declare as a `fontFamily` token.
+ */
+function allowedFontFamilies() {
+  return [...new Set([...TOKEN_DATA.fontFamilies, 'jetbrains mono'])]
+}
+
+function isAllowedFontFamily(name) {
+  if (!name) return false
+  return allowedFontFamilies().includes(String(name).trim().toLowerCase())
+}
+
+function fontSizesPx() {
+  return TOKEN_DATA.fontSizesPx
+}
+
+/** The smallest declared font size — the floor `tiny-text` enforces. */
+function minFontSizePx() {
+  return TOKEN_DATA.fontSizesPx.length > 0 ? TOKEN_DATA.fontSizesPx[0] : 12
+}
+
+function lineHeights() {
+  return TOKEN_DATA.lineHeights
+}
+
+function letterSpacings() {
+  return TOKEN_DATA.letterSpacings
+}
+
+// ─── Shape ──────────────────────────────────────────────────────────────────
+
+function radiusScale() {
+  return TOKEN_DATA.radii
+}
+
+function componentRadiiPx() {
+  return TOKEN_DATA.radii.component
+}
+
+function surfaceRadiiPx() {
+  return TOKEN_DATA.radii.surface
+}
+
+function pillRadiiPx() {
+  return TOKEN_DATA.radii.pill
+}
+
+function spacingScalePx() {
+  return TOKEN_DATA.spacingPx
+}
+
+// ─── Motion ─────────────────────────────────────────────────────────────────
+
+/** Motion duration tokens as `{ cssVar: value }`. */
+function motionDurations() {
+  return TOKEN_DATA.durations
+}
+
+/** Easing tokens as `{ cssVar: cubic-bezier-value }`. Includes `--ease-bounce`
+ *  and `--ease-spring` — Seven's catalog does declare them, so a bounce easing
+ *  is drift only when it is NOT one of these sanctioned tokens. */
+function easingTokens() {
+  return TOKEN_DATA.easings
+}
+
+/** The set of sanctioned cubic-bezier values, normalized for comparison. */
+function sanctionedEasingValues() {
+  return new Set(Object.values(TOKEN_DATA.easings).map((v) => normalizeRaw(v)))
+}
+
+/** Sanctioned easing tokens parsed to [x1, y1, x2, y2] tuples. A cubic-bezier
+ *  in code that matches one of these is a Seven easing token value, not drift —
+ *  even when its curve overshoots (the catalog declares --ease-bounce). */
+function sanctionedEasingBeziers() {
+  const out = []
+  for (const value of Object.values(TOKEN_DATA.easings)) {
+    const m = String(value).match(
+      /cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)/
+    )
+    if (m) out.push([+m[1], +m[2], +m[3], +m[4]])
+  }
+  return out
+}
+
+// ─── Elevation ──────────────────────────────────────────────────────────────
+
+function shadowTokens() {
+  return TOKEN_DATA.shadows
+}
+
+// ─── Semantic roles ─────────────────────────────────────────────────────────
+
+/**
+ * The Seven semantic-color token for a role (success, destructive, warning,
+ * info, muted, accent, ...). Prefers a fill/background variant, then the bare
+ * role token. Returns null when no semantic token carries that role — used to
+ * point a Tailwind palette utility at its Seven equivalent.
+ */
+function suggestSemanticToken(role) {
+  const vars = TOKEN_DATA.semanticColorVars || []
+  const matches = vars.filter((v) => v.includes(role))
+  if (matches.length === 0) return null
+  return (
+    matches.find((v) => v.endsWith('-background')) ||
+    matches.find((v) => v === `--${role}`) ||
+    matches.find((v) => !v.includes('-foreground') && !v.includes('-border')) ||
+    matches[0]
+  )
+}
+
+// ── cli/engine/rules/checks.mjs ──
+// SPDX-License-Identifier: Apache-2.0
+// ETUS Digital — Seven Design System. Detector architecture adapted from
+// impeccable (Paul Bakaus, Apache-2.0). See packages/seven-skill/NOTICE.md.
+
+
+// Detection runs in two worlds: Node (regex + static-html) and a real browser.
+// `window` only exists in the browser; the *-DOM adapters key off this flag.
+const DETECTOR_IS_BROWSER = typeof window !== 'undefined'
+
+// ─── Section 1: Seven text checks (regex-on-source) ─────────────────────────
+// These eight checks scan raw file text and need no computed-style cascade.
+// Every engine runs them: the regex engine over source text, the static-html
+// and browser engines over the markup + stylesheet text they extract.
+
+function lineOf(text, index) {
+  let line = 1
+  for (let i = 0; i < index && i < text.length; i++) {
+    if (text.charCodeAt(i) === 10) line++
+  }
+  return line
+}
+
+function snippetAt(text, index, padding = 40) {
+  const start = Math.max(0, index - padding)
+  const end = Math.min(text.length, index + padding + 20)
+  return text.slice(start, end).replace(/\s+/g, ' ').trim()
+}
+
+function parseFontFamilyValue(raw) {
+  return raw
+    .split(',')
+    .map((s) => s.trim().toLowerCase().replace(/^['"]/, '').replace(/['"]$/, ''))
+}
+
+/**
+ * Classify a CSS variable name as 'color', 'length', or 'unknown' from Seven's
+ * naming conventions. Length wins when both signals appear (e.g.
+ * --button-border-width is a length even though `border` is a color signal).
+ */
+function classifyVarName(name) {
+  const hasColorSignal =
+    /(?:^|-)(?:color|fg|bg|primary|secondary|accent|background|foreground|muted|destructive|warning|success|info|brand|surface|ring|border|stroke|fill|outline)(?:$|-)/i.test(name)
+  const hasLengthSignal =
+    /(?:^|-)(?:width|height|radius|padding|margin|gap|inset|offset|space|font-size|line-height|leading|tracking|letter-spacing|fs|size|weight|duration|delay)(?:$|-)/i.test(name)
+  if (hasLengthSignal) return 'length'
+  if (hasColorSignal) return 'color'
+  if (/-text$/i.test(name)) return 'length'
+  return 'unknown'
+}
+
+/** A value that is exactly `var(--something)` with optional whitespace. */
+function isSingleVarReference(value) {
+  return /^\s*var\(\s*--[a-zA-Z0-9-]+\s*\)\s*$/.test(value)
+}
+
+function isWithinSvgOrChartTag(text, index) {
+  const before = text.slice(Math.max(0, index - 800), index).toLowerCase()
+  const lastSvgOpen = before.lastIndexOf('<svg')
+  const lastSvgClose = before.lastIndexOf('</svg>')
+  if (lastSvgOpen > lastSvgClose) return true
+  return /data-role\s*=\s*['"]chart['"]/i.test(before)
+}
+
+const FONT_FAMILY_RE = /font-family\s*:\s*([^;{}\n]+)/gi
+
+function checkNonInterFont(text) {
+  const findings = []
+  let match
+  while ((match = FONT_FAMILY_RE.exec(text)) !== null) {
+    const parts = parseFontFamilyValue(match[1])
+    const primary = parts[0] ?? ''
+    if (!primary || primary.startsWith('var(') || primary.startsWith('inherit')) continue
+    // Token-grounded: the allowed families come from the @etus/tokens
+    // fontFamily tokens (plus JetBrains Mono and the system fallbacks).
+    if (isAllowedFontFamily(primary) || SYSTEM_FONT_FALLBACK_TOKENS.has(primary)) {
+      continue
+    }
+    findings.push({ id: 'non-inter-font', line: lineOf(text, match.index), snippet: snippetAt(text, match.index) })
+  }
+  return findings
+}
+
+const HEX_COLOR_RE = /#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})\b/g
+const RGB_COLOR_RE = /\brgba?\s*\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*[,/)]/g
+const HSL_COLOR_RE = /\bhsla?\s*\(\s*\d+(?:deg)?\s*,?\s*\d+%/g
+const OKLCH_LITERAL_RE = /\boklch\s*\(\s*[\d.]+/g
+
+/**
+ * Extract the full color value starting at `index` — the regexes above match a
+ * prefix for rgb/hsl/oklch, so the closing paren has to be read back to get a
+ * value the token lookup can resolve.
+ */
+function fullColorAt(text, index) {
+  const rest = text.slice(index, index + 80)
+  if (rest[0] === '#') return (rest.match(/^#[0-9a-fA-F]{3,8}/) || [''])[0]
+  const fn = rest.match(/^(?:rgba?|hsla?|oklch)\s*\([^)]*\)/i)
+  return fn ? fn[0] : ''
+}
+
+function checkHardcodedColorNotToken(text) {
+  const findings = []
+  const seen = new Set()
+  const add = (match) => {
+    const key = `${match.index}:${match[0]}`
+    if (seen.has(key)) return
+    seen.add(key)
+    // Token-grounded: when the literal is a Seven token value, name the token
+    // so the fix is precise instead of a generic "use a variable".
+    const cssVar = colorToCssVar(fullColorAt(text, match.index))
+    const base = snippetAt(text, match.index)
+    findings.push({
+      id: 'hardcoded-color-not-token',
+      line: lineOf(text, match.index),
+      snippet: cssVar ? `${base} (use var(${cssVar}))` : base,
+    })
+  }
+  let m
+  while ((m = HEX_COLOR_RE.exec(text)) !== null) add(m)
+  while ((m = RGB_COLOR_RE.exec(text)) !== null) add(m)
+  while ((m = HSL_COLOR_RE.exec(text)) !== null) add(m)
+  while ((m = OKLCH_LITERAL_RE.exec(text)) !== null) add(m)
+  return findings
+}
+
+// Tailwind default palette colors. A `bg-green-500` / `text-neutral-900` /
+// `border-red-200` utility paints a color that bypasses @etus/tokens exactly
+// as a hex literal does — the token scale never sees it.
+const TW_PALETTE_HUES =
+  'slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose'
+const TW_COLOR_UTILITIES =
+  'bg|text|border|ring|ring-offset|from|to|via|fill|stroke|outline|decoration|divide|placeholder|caret|accent|shadow'
+const RAW_TW_PALETTE_RE = new RegExp(
+  `\\b(?:${TW_COLOR_UTILITIES})-(${TW_PALETTE_HUES})-\\d{2,3}\\b`,
+  'g'
+)
+
+// Each Tailwind hue family maps onto a Seven semantic role. The actual token
+// name for that role is then resolved from the @etus/tokens snapshot, so the
+// finding points at the real Seven equivalent — not a generic "use a token".
+const TW_HUE_TO_ROLE = {
+  red: 'destructive', rose: 'destructive',
+  green: 'success', emerald: 'success', lime: 'success', teal: 'success',
+  amber: 'warning', yellow: 'warning', orange: 'warning',
+  blue: 'info', sky: 'info', cyan: 'info', indigo: 'info',
+  violet: 'accent', purple: 'accent', fuchsia: 'accent', pink: 'accent',
+  slate: 'muted', gray: 'muted', zinc: 'muted', neutral: 'muted', stone: 'muted',
+}
+
+function checkRawTailwindPaletteColor(text) {
+  const findings = []
+  let match
+  RAW_TW_PALETTE_RE.lastIndex = 0
+  while ((match = RAW_TW_PALETTE_RE.exec(text)) !== null) {
+    const role = TW_HUE_TO_ROLE[match[1]]
+    const token = role ? suggestSemanticToken(role) : null
+    const suggestion = token
+      ? `use the Seven ${role} token: bg-[color:var(${token})]`
+      : 'use a Seven color token: bg-[color:var(--...)]'
+    findings.push({
+      id: 'raw-tailwind-palette-color',
+      line: lineOf(text, match.index),
+      snippet: `${match[0]}: Tailwind palette color bypasses @etus/tokens; ${suggestion}`,
+    })
+  }
+  return findings
+}
+
+const COLOR_PROP_RE = /(?:bg|text|border|ring)-\[(?:([a-z]+):)?([^\]]+)\]/g
+
+function checkMissingColorTypeHint(text) {
+  const findings = []
+  let match
+  while ((match = COLOR_PROP_RE.exec(text)) !== null) {
+    const hint = match[1]
+    const value = match[2] ?? ''
+    if (hint) continue
+    if (!isSingleVarReference(value)) continue
+    const varName = value.match(/var\(\s*(--[a-zA-Z0-9-]+)/)?.[1] ?? ''
+    if (classifyVarName(varName) !== 'color') continue
+    findings.push({
+      id: 'missing-color-type-hint',
+      line: lineOf(text, match.index),
+      snippet: snippetAt(text, match.index),
+    })
+  }
+  return findings
+}
+
+const LENGTH_PROP_RE = /\btext-\[(?:([a-z]+):)?([^\]]+)\]/g
+
+function checkMissingLengthTypeHint(text) {
+  const findings = []
+  let match
+  while ((match = LENGTH_PROP_RE.exec(text)) !== null) {
+    const hint = match[1]
+    const value = match[2] ?? ''
+    if (hint) continue
+    if (!isSingleVarReference(value)) continue
+    const varName = value.match(/var\(\s*(--[a-zA-Z0-9-]+)/)?.[1] ?? ''
+    if (classifyVarName(varName) !== 'length') continue
+    findings.push({
+      id: 'missing-length-type-hint',
+      line: lineOf(text, match.index),
+      snippet: snippetAt(text, match.index),
+    })
+  }
+  return findings
+}
+
+const CLASS_ATTR_RE = /\b(?:className|class)\s*=\s*["'`]([^"'`]+)["'`]/g
+
+function checkLeadingNoneWithLengthVar(text) {
+  const findings = []
+  let match
+  while ((match = CLASS_ATTR_RE.exec(text)) !== null) {
+    const classes = match[1] ?? ''
+    if (!/\bleading-none\b/.test(classes)) continue
+    if (!/text-\[length:var\(/.test(classes)) continue
+    findings.push({
+      id: 'leading-none-with-length-var',
+      line: lineOf(text, match.index),
+      snippet: snippetAt(text, match.index),
+    })
+  }
+  return findings
+}
+
+const FUCHSIA_OKLCH_RE = /oklch\(\s*[0-9.]+%?\s+[0-9.]+\s+(2[89][0-9]|3[0-3][0-9])(?:\.[0-9]+)?\s*[/)]/gi
+const FUCHSIA_HEX_RE = /#(?:d9[0-9a-f]{1,2}[0-9a-f]ef|d946ef|e879f9|c026d3|a21caf|86198f)\b/gi
+
+function checkFuchsiaInUiChrome(text) {
+  const findings = []
+  let match
+  while ((match = FUCHSIA_HEX_RE.exec(text)) !== null) {
+    if (isWithinSvgOrChartTag(text, match.index)) continue
+    findings.push({ id: 'fuchsia-in-ui-chrome', line: lineOf(text, match.index), snippet: snippetAt(text, match.index) })
+  }
+  while ((match = FUCHSIA_OKLCH_RE.exec(text)) !== null) {
+    if (isWithinSvgOrChartTag(text, match.index)) continue
+    findings.push({ id: 'fuchsia-in-ui-chrome', line: lineOf(text, match.index), snippet: snippetAt(text, match.index) })
+  }
+  return findings
+}
+
+function checkPtPtVocab(text) {
+  const findings = []
+  for (const pair of PT_PT_VOCAB_PAIRS) {
+    const re = new RegExp(`\\b${pair.ptPt}\\b`, 'giu')
+    let match
+    while ((match = re.exec(text)) !== null) {
+      findings.push({
+        id: 'pt-pt-vocab',
+        line: lineOf(text, match.index),
+        snippet: `${snippetAt(text, match.index)} (use "${pair.ptBr}")`,
+      })
+    }
+  }
+  return findings
+}
+
+const PURE_BLACK_WHITE_RE =
+  /(?:#(?:0{3,4}|0{6}|0{8})\b|#(?:f{3,4}|f{6}|f{8})\b|\brgba?\s*\(\s*0\s*,\s*0\s*,\s*0\s*[,/)]|\brgba?\s*\(\s*255\s*,\s*255\s*,\s*255\s*[,/)])/gi
+
+function checkPureBlackOrWhite(text) {
+  const findings = []
+  let match
+  while ((match = PURE_BLACK_WHITE_RE.exec(text)) !== null) {
+    // Token-grounded: pure black/white are primitives; name the base token.
+    const cssVar = colorToCssVar(fullColorAt(text, match.index))
+    const base = snippetAt(text, match.index)
+    findings.push({
+      id: 'pure-black-or-white',
+      line: lineOf(text, match.index),
+      snippet: cssVar ? `${base} (use var(${cssVar}))` : base,
+    })
+  }
+  return findings
+}
+
+// Emoji characters render as multicolor glyphs regardless of CSS `color` and
+// have no place in Seven chrome copy. The class covers flags, pictographs,
+// symbols, dingbats, variation selectors, ZWJ sequences, and skin-tone
+// modifiers — the same range the upstream detector used to exclude emoji-only
+// text nodes from contrast checks.
+const EMOJI_CHAR_RE = /[\u{1F1E6}-\u{1F1FF}\u{1F300}-\u{1F9FF}\u{1FA00}-\u{1FAFF}\u{2600}-\u{27BF}\u{2300}-\u{23FF}\u{FE0F}\u{200D}\u{1F3FB}-\u{1F3FF}]/u
+const EMOJI_CHARS_GLOBAL = /[\u{1F1E6}-\u{1F1FF}\u{1F300}-\u{1F9FF}\u{1FA00}-\u{1FAFF}\u{2600}-\u{27BF}\u{2300}-\u{23FF}\u{FE0F}\u{200D}\u{1F3FB}-\u{1F3FF}]/gu
+
+function isEmojiOnlyText(text) {
+  if (!text) return false
+  if (!EMOJI_CHAR_RE.test(text)) return false
+  return text.replace(EMOJI_CHARS_GLOBAL, '').trim() === ''
+}
+
+// Chrome elements whose text content must not carry emoji glyphs.
+const CHROME_TEXT_TAG_RE =
+  /<(button|h[1-6]|label|a)\b[^>]*>([\s\S]*?)<\/\1>/gi
+
+function checkEmojiInChrome(text) {
+  const findings = []
+  let match
+  CHROME_TEXT_TAG_RE.lastIndex = 0
+  while ((match = CHROME_TEXT_TAG_RE.exec(text)) !== null) {
+    // Strip nested tags so we only test the rendered text run.
+    const inner = match[2].replace(/<[^>]+>/g, '')
+    if (!EMOJI_CHAR_RE.test(inner)) continue
+    findings.push({
+      id: 'emoji-in-chrome',
+      line: lineOf(text, match.index),
+      snippet: snippetAt(text, match.index),
+    })
+  }
+  return findings
+}
+
+// Em-dash (U+2014) and en-dash (U+2013) in user-facing copy. JSX/HTML text
+// runs and string literals carry copy; the long dash there reads as
+// machine-generated prose.
+const LONG_DASH_RE = /[–—]/g
+
+function checkForbiddenEmDash(text) {
+  // Mask JS/CSS block and line comments before scanning. JSDoc and `//`
+  // explanatory comments are developer prose, not user-facing copy, and they
+  // routinely use the long dash as rhetorical punctuation. Newlines are kept
+  // so line offsets stay accurate for the surviving matches. The `[^:]` guard
+  // on `//` keeps `https://` from being treated as a comment start.
+  const masked = text
+    .replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ' '))
+    .replace(/(^|[^:])\/\/[^\n]*/g, (m, lead) => lead + m.slice(lead.length).replace(/./g, ' '))
+  const findings = []
+  let match
+  LONG_DASH_RE.lastIndex = 0
+  while ((match = LONG_DASH_RE.exec(masked)) !== null) {
+    findings.push({
+      id: 'forbidden-em-dash',
+      line: lineOf(text, match.index),
+      snippet: snippetAt(text, match.index),
+    })
+  }
+  return findings
+}
+
+/**
+ * The Seven text-check set. Every engine iterates this map: the regex engine
+ * runs each check against source text; the static-html and browser engines
+ * run them against the markup and stylesheet text extracted from the
+ * parsed/rendered document. These checks are deliberately text-based.
+ */
+const CHECKS = {
+  'non-inter-font': checkNonInterFont,
+  'hardcoded-color-not-token': checkHardcodedColorNotToken,
+  'raw-tailwind-palette-color': checkRawTailwindPaletteColor,
+  'missing-color-type-hint': checkMissingColorTypeHint,
+  'missing-length-type-hint': checkMissingLengthTypeHint,
+  'leading-none-with-length-var': checkLeadingNoneWithLengthVar,
+  'fuchsia-in-ui-chrome': checkFuchsiaInUiChrome,
+  'pt-pt-vocab': checkPtPtVocab,
+  'pure-black-or-white': checkPureBlackOrWhite,
+  'emoji-in-chrome': checkEmojiInChrome,
+  'forbidden-em-dash': checkForbiddenEmDash,
+}
+
+/** Run every text check against a text blob, returning raw `{ id, line, snippet }`. */
+function runChecks(text, ruleIds = null) {
+  const findings = []
+  for (const [id, check] of Object.entries(CHECKS)) {
+    if (ruleIds && !ruleIds.includes(id)) continue
+    findings.push(...check(text))
+  }
+  return findings
+}
+
+// ─── Section 2: pure element checks (computed-style inputs) ──────────────────
+// These run on extracted style props and DOM-only inputs, so they work in both
+// the static-html cascade and a real browser. They take numbers and resolved
+// colors, never raw DOM nodes — the adapters in Section 4/5 do the extraction.
+
+const BORDER_SAFE_TAGS = new Set([
+  'html', 'head', 'body', 'script', 'style', 'link', 'meta', 'title', 'br',
+  'svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'g', 'defs', 'use',
+  'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'hr', 'input', 'textarea', 'select',
+])
+const HEADING_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
+
+// Seven's two radius stacks, token-grounded from @etus/tokens. Component scale
+// is for buttons/inputs/badges; surface scale is for cards/dialogs/popovers.
+// Mixing them on one element is the `radius-mixed-scales` drift.
+const COMPONENT_RADII = new Set(componentRadiiPx())
+const SURFACE_RADII = new Set(surfaceRadiiPx())
+// The pill/full-radius floor: any radius at or above this is a pill.
+const PILL_RADIUS_MIN = pillRadiiPx()[0] ?? 9999
+
+/**
+ * Side-stripe border check. A border-left or border-right thicker than 1px,
+ * carrying a non-neutral (accent) color, is the banned Seven side stripe.
+ * Top/bottom accents are not the side-stripe pattern and are left alone.
+ */
+function checkBorders(tag, widths, colors) {
+  if (BORDER_SAFE_TAGS.has(tag)) return []
+  const findings = []
+  for (const side of ['Left', 'Right']) {
+    const w = widths[side]
+    if (w <= 1 || isNeutralColor(colors[side])) continue
+    const otherSides = ['Top', 'Right', 'Bottom', 'Left'].filter((s) => s !== side)
+    const maxOther = Math.max(...otherSides.map((s) => widths[s]))
+    // Only a stripe if this side stands out: the others are hairline-or-absent
+    // or this side is at least twice as thick.
+    if (!(maxOther <= 1 || w >= maxOther * 2)) continue
+    findings.push({
+      id: 'side-stripe-border',
+      snippet: `border-${side.toLowerCase()}: ${w}px accent stripe`,
+    })
+  }
+  return findings
+}
+
+/**
+ * Radius-mixed-scales check. A single element resolving border-radius corners
+ * that fall in both the component scale and the surface scale is drift.
+ */
+function checkRadiusMixedScales(tag, cornerRadii) {
+  if (BORDER_SAFE_TAGS.has(tag)) return []
+  const rounded = cornerRadii.map((r) => Math.round(r)).filter((r) => r > 0)
+  const hasComponent = rounded.some((r) => COMPONENT_RADII.has(r))
+  const hasSurface = rounded.some((r) => SURFACE_RADII.has(r))
+  if (hasComponent && hasSurface) {
+    return [{
+      id: 'radius-mixed-scales',
+      snippet: `mixed radius scales: ${[...new Set(rounded)].join('px / ')}px on one element`,
+    }]
+  }
+  return []
+}
+
+const BUTTON_TAGS = new Set(['button'])
+
+/** Pill radius on a button. Buttons stay on the component radius scale. */
+function checkPillOnButton(tag, role, radiusPx, classList) {
+  const isButton = BUTTON_TAGS.has(tag) || role === 'button'
+  if (!isButton) return []
+  const classStr = typeof classList === 'string' ? classList : ''
+  if (radiusPx >= PILL_RADIUS_MIN || /\brounded-full\b/.test(classStr)) {
+    return [{ id: 'pill-on-button', snippet: `pill radius on <${tag}>` }]
+  }
+  return []
+}
+
+const INTERACTIVE_ROLES = new Set(['button', 'link', 'menuitem', 'tab', 'option'])
+
+/**
+ * Tactile-press check. Every Seven affordance gets the system-wide micro-press
+ * — a transform transition that the hover/active states drive. A clickable
+ * element whose transition-property covers neither `transform` nor `all` has
+ * opted out.
+ */
+function checkTactilePress(tag, role, transitionProperty, classList, hasClickHandler) {
+  const isClickable =
+    tag === 'button' ||
+    (tag === 'a' && role === 'button') ||
+    INTERACTIVE_ROLES.has(role) ||
+    hasClickHandler
+  if (!isClickable) return []
+  const props = (transitionProperty || '')
+    .split(',')
+    .map((p) => p.trim().toLowerCase())
+    .filter(Boolean)
+  const classStr = typeof classList === 'string' ? classList : ''
+  const hasTransformTransition =
+    props.includes('transform') ||
+    props.includes('all') ||
+    /\btransition(?:-transform)?\b/.test(classStr)
+  if (hasTransformTransition) return []
+  return [{ id: 'missing-tactile-press', snippet: `clickable <${tag}> with no tactile-press transition` }]
+}
+
+/**
+ * Non-Lucide icon check. Lucide icons use a 24x24 viewBox, 2px stroke, round
+ * caps and joins, and no fill. An inline <svg> that visibly deviates from that
+ * contract is a non-Lucide icon.
+ */
+function checkLucideIcon(viewBox, strokeWidth, strokeLinecap, fill) {
+  // No identifying attributes at all — likely a decorative shape, not an icon.
+  if (!viewBox && !strokeWidth) return []
+  const vb = (viewBox || '').trim()
+  const isLucideViewBox = vb === '' || vb === '0 0 24 24'
+  const sw = strokeWidth != null && strokeWidth !== '' ? parseFloat(strokeWidth) : null
+  const isLucideStroke = sw == null || sw === 2
+  const cap = (strokeLinecap || '').toLowerCase()
+  const isLucideCap = cap === '' || cap === 'round'
+  const f = (fill || '').toLowerCase()
+  const isLucideFill = f === '' || f === 'none'
+  if (isLucideViewBox && isLucideStroke && isLucideCap && isLucideFill) return []
+  const reasons = []
+  if (!isLucideViewBox) reasons.push(`viewBox ${vb}`)
+  if (!isLucideStroke) reasons.push(`stroke-width ${strokeWidth}`)
+  if (!isLucideCap) reasons.push(`stroke-linecap ${cap}`)
+  if (!isLucideFill) reasons.push(`fill ${f}`)
+  return [{ id: 'non-lucide-icon', snippet: `non-Lucide <svg> (${reasons.join(', ')})` }]
+}
+
+/**
+ * Color checks: low-contrast, gray-on-color, gradient-text-decorative, plus a
+ * pure-black background flag and fuchsia chroma on chrome. Background-dependent
+ * checks run against a solid bg or, for gradients, every gradient stop.
+ */
+function checkColors(opts) {
+  const {
+    tag, textColor, bgColor, effectiveBg, fontSize, fontWeight,
+    hasDirectText, isEmojiOnly, bgClip, bgImage, classList,
+  } = opts
+  if (SAFE_TAGS.has(tag)) {
+    const isStyledButton =
+      (tag === 'a' || tag === 'button') && hasDirectText && bgColor && bgColor.a > 0.5
+    if (!isStyledButton) return []
+  }
+  const findings = []
+
+  // Pure black background (solid or near-solid only).
+  if (bgColor && bgColor.a >= 0.9 && bgColor.r === 0 && bgColor.g === 0 && bgColor.b === 0) {
+    findings.push({ id: 'pure-black-or-white', snippet: '#000000 background' })
+  }
+
+  if (hasDirectText && textColor && !isEmojiOnly && effectiveBg) {
+    // Gray text on a colored background.
+    const textLum = relativeLuminance(textColor)
+    const isGray = !hasChroma(textColor, 20) && textLum > 0.05 && textLum < 0.85
+    if (isGray && hasChroma(effectiveBg, 40)) {
+      findings.push({
+        id: 'gray-on-color',
+        snippet: `text ${colorToHex(textColor)} on bg ${colorToHex(effectiveBg)}`,
+      })
+    }
+
+    // Low contrast (WCAG 2.1 AA).
+    const ratio = contrastRatio(textColor, effectiveBg)
+    const isLargeText = fontSize >= 24 || (fontSize >= 18.66 && fontWeight >= 700)
+    const threshold = isLargeText ? 3.0 : 4.5
+    if (ratio < threshold) {
+      findings.push({
+        id: 'low-contrast',
+        snippet: `${ratio.toFixed(1)}:1 (need ${threshold}:1) — text ${colorToHex(textColor)} on ${colorToHex(effectiveBg)}`,
+      })
+    }
+
+    // Fuchsia chroma on UI chrome text.
+    if (isFuchsia(textColor) && tag !== 'svg') {
+      findings.push({ id: 'fuchsia-in-ui-chrome', snippet: `fuchsia text ${colorToHex(textColor)} on chrome` })
+    }
+  }
+
+  // Decorative gradient text.
+  if (bgClip === 'text' && bgImage && bgImage.includes('gradient')) {
+    findings.push({ id: 'gradient-text-decorative', snippet: 'background-clip: text + gradient' })
+  }
+
+  // Tailwind class checks.
+  if (classList) {
+    const classStr = typeof classList === 'string' ? classList : Array.from(classList).join(' ')
+    if (/\bbg-black\b(?!\/)/.test(classStr) || /\bbg-white\b(?!\/)/.test(classStr)) {
+      findings.push({ id: 'pure-black-or-white', snippet: /\bbg-white\b/.test(classStr) ? 'bg-white' : 'bg-black' })
+    }
+    const grayMatch = classStr.match(/\btext-(?:gray|slate|zinc|neutral|stone)-\d+\b/)
+    const colorBgMatch = classStr.match(
+      /\bbg-(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-\d+\b/
+    )
+    if (grayMatch && colorBgMatch) {
+      findings.push({ id: 'gray-on-color', snippet: `${grayMatch[0]} on ${colorBgMatch[0]}` })
+    }
+    if (/\bbg-clip-text\b/.test(classStr) && /\bbg-gradient-to-/.test(classStr)) {
+      findings.push({ id: 'gradient-text-decorative', snippet: 'bg-clip-text + bg-gradient (Tailwind)' })
+    }
+    if (/\bfuchsia-\d/.test(classStr) && /\b(?:bg|text|border|ring)-fuchsia-\d/.test(classStr)) {
+      findings.push({ id: 'fuchsia-in-ui-chrome', snippet: 'fuchsia utility on chrome' })
+    }
+  }
+
+  return findings
+}
+
+function isCardLikeFromProps(hasShadow, hasBorder, hasRadius, hasBg) {
+  if (!hasShadow && !hasBorder) return false
+  return hasRadius || hasBg
+}
+
+const LAYOUT_TRANSITION_PROPS = new Set([
+  'width', 'height', 'padding', 'margin',
+  'max-height', 'max-width', 'min-height', 'min-width',
+  'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
+  'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
+])
+
+/**
+ * True when a cubic-bezier matches a sanctioned Seven easing token. The
+ * catalog declares --ease-bounce and --ease-spring, so an overshooting curve
+ * that IS one of those token values is on-system, not drift.
+ */
+function isSanctionedBezier(a, b, c, d) {
+  return sanctionedEasingBeziers().some(
+    ([x1, y1, x2, y2]) =>
+      Math.abs(x1 - a) < 0.01 &&
+      Math.abs(y1 - b) < 0.01 &&
+      Math.abs(x2 - c) < 0.01 &&
+      Math.abs(y2 - d) < 0.01
+  )
+}
+
+/** Motion checks: bounce/elastic easing and layout-property transitions. */
+function checkMotion(opts) {
+  const { tag, transitionProperty, animationName, timingFunctions, classList } = opts
+  if (SAFE_TAGS.has(tag)) return []
+  const findings = []
+
+  if (animationName && animationName !== 'none' && /bounce|elastic|wobble|jiggle|spring/i.test(animationName)) {
+    findings.push({ id: 'bounce-easing', snippet: `animation: ${animationName}` })
+  }
+  if (classList && /\banimate-bounce\b/.test(classList)) {
+    findings.push({ id: 'bounce-easing', snippet: 'animate-bounce (Tailwind)' })
+  }
+  if (timingFunctions) {
+    const bezierRe = /cubic-bezier\(\s*([\d.-]+)\s*,\s*([\d.-]+)\s*,\s*([\d.-]+)\s*,\s*([\d.-]+)\s*\)/g
+    let m
+    while ((m = bezierRe.exec(timingFunctions)) !== null) {
+      const x1 = parseFloat(m[1])
+      const y1 = parseFloat(m[2])
+      const x2 = parseFloat(m[3])
+      const y2 = parseFloat(m[4])
+      const overshoots = y1 < -0.1 || y1 > 1.1 || y2 < -0.1 || y2 > 1.1
+      if (overshoots && !isSanctionedBezier(x1, y1, x2, y2)) {
+        findings.push({ id: 'bounce-easing', snippet: `cubic-bezier(${m[1]}, ${m[2]}, ${m[3]}, ${m[4]})` })
+        break
+      }
+    }
+  }
+
+  if (transitionProperty && transitionProperty !== 'all' && transitionProperty !== 'none') {
+    const props = transitionProperty.split(',').map((p) => p.trim().toLowerCase())
+    const layoutFound = props.filter((p) => LAYOUT_TRANSITION_PROPS.has(p))
+    if (layoutFound.length > 0) {
+      findings.push({ id: 'layout-transition', snippet: `transition: ${layoutFound.join(', ')}` })
+    }
+  }
+
+  return findings
+}
+
+/**
+ * Glow check. A colored, blurred box-shadow on a dark surface is the AI "dark
+ * glow" look; in Seven, shadows are reserved for overlays and cards carry
+ * hierarchy with borders — so the finding is `shadows-not-borders`.
+ */
+function checkGlow(opts) {
+  const { boxShadow, effectiveBg } = opts
+  if (!boxShadow || boxShadow === 'none') return []
+  if (!effectiveBg) return []
+  const bgLum = relativeLuminance(effectiveBg)
+  if (bgLum >= 0.1) return []
+
+  const parts = boxShadow.split(/,(?![^(]*\))/)
+  for (const shadow of parts) {
+    const colorMatch = shadow.match(/rgba?\([^)]+\)/)
+    if (!colorMatch) continue
+    const color = parseRgb(colorMatch[0])
+    if (!color || !hasChroma(color, 30)) continue
+    const afterColor = shadow.substring(shadow.indexOf(colorMatch[0]) + colorMatch[0].length)
+    const beforeColor = shadow.substring(0, shadow.indexOf(colorMatch[0]))
+    const pxVals = [...beforeColor.matchAll(/([\d.]+)px/g), ...afterColor.matchAll(/([\d.]+)px/g)]
+      .map((m) => parseFloat(m[1]))
+    if (pxVals.length >= 3 && pxVals[2] > 4) {
+      return [{ id: 'shadows-not-borders', snippet: `colored glow (${colorToHex(color)}) on dark surface` }]
+    }
+  }
+  return []
+}
+
+const QUALITY_TEXT_TAGS = new Set(['p', 'li', 'td', 'th', 'dd', 'blockquote', 'figcaption'])
+
+/**
+ * Quality checks on text-bearing elements: line-length, cramped-padding,
+ * body-text-viewport-edge, tight-leading, justified-text, tiny-text,
+ * all-caps-body, wide-tracking. Two checks (line-length, cramped-padding,
+ * body-text-viewport-edge) need element rects; pass `rect: null` to skip them.
+ */
+function checkQuality(opts) {
+  const {
+    el, tag, style, hasDirectText, textLen, fontSize, lineHeightPx, letterSpacingPx,
+    rect, lineMax = 80, viewportWidth = 0,
+  } = opts
+  const findings = []
+
+  if (rect && hasDirectText && QUALITY_TEXT_TAGS.has(tag) && rect.width > 0 && textLen > lineMax) {
+    const charsPerLine = rect.width / (fontSize * 0.5)
+    if (charsPerLine > lineMax + 5) {
+      findings.push({ id: 'line-length', snippet: `~${Math.round(charsPerLine)} chars/line (aim for <${lineMax})` })
+    }
+  }
+
+  if (rect && hasDirectText && textLen > 20 && rect.width > 100 && rect.height > 30) {
+    const borders = {
+      top: parseFloat(style.borderTopWidth) || 0,
+      right: parseFloat(style.borderRightWidth) || 0,
+      bottom: parseFloat(style.borderBottomWidth) || 0,
+      left: parseFloat(style.borderLeftWidth) || 0,
+    }
+    const borderCount = Object.values(borders).filter((w) => w > 0).length
+    const hasBg = style.backgroundColor && style.backgroundColor !== 'rgba(0, 0, 0, 0)'
+    if (borderCount >= 2 || hasBg) {
+      const vPads = []
+      const hPads = []
+      if (hasBg || borders.top > 0) vPads.push(parseFloat(style.paddingTop) || 0)
+      if (hasBg || borders.bottom > 0) vPads.push(parseFloat(style.paddingBottom) || 0)
+      if (hasBg || borders.left > 0) hPads.push(parseFloat(style.paddingLeft) || 0)
+      if (hasBg || borders.right > 0) hPads.push(parseFloat(style.paddingRight) || 0)
+      const vMin = vPads.length ? Math.min(...vPads) : Infinity
+      const hMin = hPads.length ? Math.min(...hPads) : Infinity
+      const vThresh = Math.max(4, fontSize * 0.3)
+      const hThresh = Math.max(8, fontSize * 0.5)
+      if (vMin < vThresh) {
+        findings.push({ id: 'cramped-padding', snippet: `${vMin}px vertical padding (need >=${vThresh.toFixed(1)}px for ${fontSize}px text)` })
+      } else if (hMin < hThresh) {
+        findings.push({ id: 'cramped-padding', snippet: `${hMin}px horizontal padding (need >=${hThresh.toFixed(1)}px for ${fontSize}px text)` })
+      }
+    }
+  }
+
+  if (rect && hasDirectText && textLen > 40 && ['P', 'LI'].includes(tag.toUpperCase()) && viewportWidth > 0) {
+    const inNavHeader = el.closest && (el.closest('nav') || el.closest('header'))
+    const hasOwnBg =
+      style.backgroundColor && style.backgroundColor !== 'rgba(0, 0, 0, 0)' && style.backgroundColor !== 'transparent'
+    const isPositioned = ['fixed', 'absolute'].includes(style.position || '')
+    const widthRatio = rect.width / viewportWidth
+    const leftClose = rect.left < 16
+    const rightClose = rect.right > viewportWidth - 16
+    if (!inNavHeader && !hasOwnBg && !isPositioned && widthRatio > 0.5 && (leftClose || rightClose)) {
+      const which =
+        leftClose && rightClose
+          ? `left ${Math.round(rect.left)}px / right ${Math.round(viewportWidth - rect.right)}px`
+          : leftClose
+            ? `left ${Math.round(rect.left)}px`
+            : `right ${Math.round(viewportWidth - rect.right)}px`
+      findings.push({
+        id: 'body-text-viewport-edge',
+        snippet: `<${tag.toLowerCase()}> with ${textLen}-char body bleeds to viewport edge (${which})`,
+      })
+    }
+  }
+
+  if (hasDirectText && textLen > 50 && !HEADING_TAGS.has(tag)) {
+    if (lineHeightPx != null && fontSize > 0) {
+      const ratio = lineHeightPx / fontSize
+      if (ratio > 0 && ratio < 1.3) {
+        findings.push({ id: 'tight-leading', snippet: `line-height ${ratio.toFixed(2)}x (need >=1.3)` })
+      }
+    }
+  }
+
+  if (hasDirectText && style.textAlign === 'justify') {
+    const hyphens = style.hyphens || style.webkitHyphens || ''
+    if (hyphens !== 'auto') {
+      findings.push({ id: 'justified-text', snippet: 'text-align: justify without hyphens: auto' })
+    }
+  }
+
+  // Token-grounded: the floor is the smallest @etus/tokens font-size token.
+  if (hasDirectText && textLen > 20 && fontSize < minFontSizePx()) {
+    const skipTags = ['sub', 'sup', 'code', 'kbd', 'samp', 'var', 'caption', 'figcaption']
+    const inUIContext =
+      el.closest &&
+      el.closest(
+        'button, a, label, summary, [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="option"], nav, footer, [class*="badge" i], [class*="chip" i], [class*="pill" i], [class*="tag" i], [class*="label" i], [class*="caption" i]'
+      )
+    const isUppercase = style.textTransform === 'uppercase'
+    if (!skipTags.includes(tag) && !inUIContext && !isUppercase) {
+      findings.push({ id: 'tiny-text', snippet: `${fontSize}px body text` })
+    }
+  }
+
+  if (hasDirectText && textLen > 30 && style.textTransform === 'uppercase' && !HEADING_TAGS.has(tag)) {
+    findings.push({ id: 'all-caps-body', snippet: `text-transform: uppercase on ${textLen} chars of body text` })
+  }
+
+  if (hasDirectText && textLen > 20 && style.textTransform !== 'uppercase') {
+    if (letterSpacingPx != null && letterSpacingPx > 0 && fontSize > 0) {
+      const trackingEm = letterSpacingPx / fontSize
+      if (trackingEm > 0.05) {
+        findings.push({ id: 'wide-tracking', snippet: `letter-spacing: ${trackingEm.toFixed(2)}em on body text` })
+      }
+    }
+  }
+
+  return findings
+}
+
+// ─── Section 3: regex-on-HTML page checks ───────────────────────────────────
+
+/**
+ * Page-level checks that read the raw HTML string with no DOM access. Shared
+ * by the static-html and browser engines.
+ */
+function checkHtmlPatterns(html) {
+  const findings = []
+
+  // Pure black background.
+  if (/background(?:-color)?\s*:\s*(?:#000000|#000|rgb\(\s*0,\s*0,\s*0\s*\))\b/gi.test(html)) {
+    findings.push({ id: 'pure-black-or-white', snippet: 'Pure #000 background' })
+  }
+
+  // Decorative gradient text.
+  const gradientRe = /(?:-webkit-)?background-clip\s*:\s*text/gi
+  let gm
+  while ((gm = gradientRe.exec(html)) !== null) {
+    const start = Math.max(0, gm.index - 200)
+    const context = html.substring(start, gm.index + gm[0].length + 200)
+    if (/gradient/i.test(context)) {
+      findings.push({ id: 'gradient-text-decorative', snippet: 'background-clip: text + gradient' })
+      break
+    }
+  }
+  if (/\bbg-clip-text\b/.test(html) && /\bbg-gradient-to-/.test(html)) {
+    findings.push({ id: 'gradient-text-decorative', snippet: 'bg-clip-text + bg-gradient (Tailwind)' })
+  }
+
+  // Monotonous spacing.
+  const spacingValues = []
+  let sm
+  const spacingRe = /(?:padding|margin)(?:-(?:top|right|bottom|left))?\s*:\s*(\d+)px/gi
+  while ((sm = spacingRe.exec(html)) !== null) {
+    const v = parseInt(sm[1], 10)
+    if (v > 0 && v < 200) spacingValues.push(v)
+  }
+  const gapRe = /gap\s*:\s*(\d+)px/gi
+  while ((sm = gapRe.exec(html)) !== null) spacingValues.push(parseInt(sm[1], 10))
+  const twSpaceRe = /\b(?:p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr|gap)-(\d+)\b/g
+  while ((sm = twSpaceRe.exec(html)) !== null) spacingValues.push(parseInt(sm[1], 10) * 4)
+  const remSpacingRe = /(?:padding|margin)(?:-(?:top|right|bottom|left))?\s*:\s*([\d.]+)rem/gi
+  while ((sm = remSpacingRe.exec(html)) !== null) {
+    const v = Math.round(parseFloat(sm[1]) * 16)
+    if (v > 0 && v < 200) spacingValues.push(v)
+  }
+  const roundedSpacing = spacingValues.map((v) => Math.round(v / 4) * 4)
+  if (roundedSpacing.length >= 10) {
+    const counts = {}
+    for (const v of roundedSpacing) counts[v] = (counts[v] || 0) + 1
+    const maxCount = Math.max(...Object.values(counts))
+    const dominantPct = maxCount / roundedSpacing.length
+    const unique = [...new Set(roundedSpacing)].filter((v) => v > 0)
+    if (dominantPct > 0.6 && unique.length <= 3) {
+      const dominant = Object.entries(counts).sort((a, b) => b[1] - a[1])[0][0]
+      findings.push({
+        id: 'monotonous-spacing',
+        snippet: `~${dominant}px used ${maxCount}/${roundedSpacing.length} times (${Math.round(dominantPct * 100)}%)`,
+      })
+    }
+  }
+
+  // Bounce / elastic animation names.
+  if (/animation(?:-name)?\s*:\s*[^;]*\b(bounce|elastic|wobble|jiggle|spring)\b/gi.test(html)) {
+    findings.push({ id: 'bounce-easing', snippet: 'Bounce/elastic animation in CSS' })
+  }
+  const bezierRe = /cubic-bezier\(\s*([\d.-]+)\s*,\s*([\d.-]+)\s*,\s*([\d.-]+)\s*,\s*([\d.-]+)\s*\)/g
+  let bm
+  while ((bm = bezierRe.exec(html)) !== null) {
+    const x1 = parseFloat(bm[1])
+    const y1 = parseFloat(bm[2])
+    const x2 = parseFloat(bm[3])
+    const y2 = parseFloat(bm[4])
+    const overshoots = y1 < -0.1 || y1 > 1.1 || y2 < -0.1 || y2 > 1.1
+    if (overshoots && !isSanctionedBezier(x1, y1, x2, y2)) {
+      findings.push({ id: 'bounce-easing', snippet: `cubic-bezier(${bm[1]}, ${bm[2]}, ${bm[3]}, ${bm[4]})` })
+      break
+    }
+  }
+
+  // Layout-property transitions.
+  const transRe = /transition(?:-property)?\s*:\s*([^;{}]+)/gi
+  let tm
+  while ((tm = transRe.exec(html)) !== null) {
+    const val = tm[1].toLowerCase()
+    if (/\ball\b/.test(val)) continue
+    const found = val.match(/\b(?:(?:max|min)-)?(?:width|height)\b|\bpadding(?:-(?:top|right|bottom|left))?\b|\bmargin(?:-(?:top|right|bottom|left))?\b/gi)
+    if (found) {
+      findings.push({ id: 'layout-transition', snippet: `transition: ${found.join(', ')}` })
+      break
+    }
+  }
+
+  // Glow on a dark surface.
+  const darkBgRe = /background(?:-color)?\s*:\s*(?:#(?:0[0-9a-f]|1[0-9a-f]|2[0-3])[0-9a-f]{4}\b|#(?:0|1)[0-9a-f]{2}\b|rgb\(\s*(\d{1,2})\s*,\s*(\d{1,2})\s*,\s*(\d{1,2})\s*\))/gi
+  const twDarkBg = /\bbg-(?:gray|slate|zinc|neutral|stone)-(?:9\d{2}|800)\b/
+  if (darkBgRe.test(html) || twDarkBg.test(html)) {
+    const shadowRe = /box-shadow\s*:\s*([^;{}]+)/gi
+    let shm
+    while ((shm = shadowRe.exec(html)) !== null) {
+      const val = shm[1]
+      const colorMatch = val.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/)
+      if (!colorMatch) continue
+      const [r, g, b] = [+colorMatch[1], +colorMatch[2], +colorMatch[3]]
+      if (Math.max(r, g, b) - Math.min(r, g, b) < 30) continue
+      const pxVals = [...val.matchAll(/(\d+)px|(?<![.\d])\b(0)\b(?![.\d])/g)].map((p) => +(p[1] || p[2]))
+      if (pxVals.length >= 3 && pxVals[2] > 4) {
+        findings.push({ id: 'shadows-not-borders', snippet: `colored glow (rgb(${r},${g},${b})) on dark page` })
+        break
+      }
+    }
+  }
+
+  return findings
+}
+
+// ─── Section 4: background resolution ───────────────────────────────────────
+
+function readOwnBackgroundColor(el, computedStyle) {
+  const bg = parseRgb(computedStyle.backgroundColor)
+  if (DETECTOR_IS_BROWSER || (bg && bg.a >= 0.1)) return bg
+  const rawStyle = el.getAttribute?.('style') || ''
+  const bgMatch = rawStyle.match(/background(?:-color)?\s*:\s*([^;]+)/i)
+  const inlineBg = bgMatch ? bgMatch[1].trim() : ''
+  if (!inlineBg) return bg
+  if (/gradient/i.test(inlineBg) || /url\s*\(/i.test(inlineBg)) return bg
+  const fromRgb = parseRgb(inlineBg)
+  if (fromRgb) return fromRgb
+  const hexMatch = inlineBg.match(/#([0-9a-f]{6}|[0-9a-f]{3})\b/i)
+  if (hexMatch) {
+    const h = hexMatch[1]
+    if (h.length === 6) {
+      return { r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16), a: 1 }
+    }
+    return { r: parseInt(h[0] + h[0], 16), g: parseInt(h[1] + h[1], 16), b: parseInt(h[2] + h[2], 16), a: 1 }
+  }
+  return bg
+}
+
+/**
+ * Walk the ancestor chain for the first opaque background color. Body/html
+ * gradients are treated as decorative and resolve to white; on other elements
+ * a gradient with no underlying solid color bails to null.
+ */
+function resolveBackground(el, win) {
+  let current = el
+  while (current && current.nodeType === 1) {
+    const style = DETECTOR_IS_BROWSER ? getComputedStyle(current) : win.getComputedStyle(current)
+    const bgImage = style.backgroundImage || ''
+    const hasGradientOrUrl =
+      bgImage && bgImage !== 'none' && (/gradient/i.test(bgImage) || /url\s*\(/i.test(bgImage))
+    const bg = parseRgb(style.backgroundColor)
+    if (bg && bg.a > 0.1) {
+      if (DETECTOR_IS_BROWSER || bg.a >= 0.5) return bg
+    }
+    if (hasGradientOrUrl) {
+      if (current.tagName === 'BODY' || current.tagName === 'HTML') {
+        return { r: 255, g: 255, b: 255, a: 1 }
+      }
+      return null
+    }
+    current = current.parentElement
+  }
+  return { r: 255, g: 255, b: 255, a: 1 }
+}
+
+// Parse a single CSS length token to pixels.
+function parseRadiusToPx(value, widthPx) {
+  if (!value || typeof value !== 'string') return null
+  const trimmed = value.trim()
+  if (!trimmed) return null
+  const first = trimmed.split(/\s+/)[0]
+  const num = parseFloat(first)
+  if (Number.isNaN(num)) return null
+  if (/%$/.test(first)) {
+    if (widthPx && widthPx > 0) return (num / 100) * widthPx
+    return num
+  }
+  return num
+}
+
+function resolveBorderRadiusPx(el, style, widthPx) {
+  const fromComputed = parseRadiusToPx(style.borderRadius, widthPx)
+  if (fromComputed !== null) return fromComputed
+  return 0
+}
+
+// Resolve var(--X[, fallback]) refs in a value string against a custom-prop
+// map. Recurses up to 8 levels for chained refs. Returns the original string
+// when no refs are present or the chain does not resolve. The static CSS
+// cascade depends on this to resolve Tailwind v4 token wrappers.
+function resolveVarRefs(raw, customPropMap, depth = 0) {
+  if (typeof raw !== 'string' || !raw.includes('var(')) return raw
+  if (depth > 8) return raw
+  return raw.replace(/var\(\s*(--[a-zA-Z0-9_-]+)\s*(?:,\s*([^)]+))?\)/g, (full, name, fallback) => {
+    const v = customPropMap && (customPropMap.get ? customPropMap.get(name) : customPropMap[name])
+    if (v != null) return resolveVarRefs(v, customPropMap, depth + 1)
+    return fallback ? resolveVarRefs(fallback.trim(), customPropMap, depth + 1) : full
+  })
+}
+
+// OKLCH -> sRGB conversion (Bjorn Ottosson's matrices). L in 0..1 (or %),
+// C typically 0..~0.4, H in degrees. Returns clamped {r,g,b,a:1} in 0..255.
+// Needed because the static cascade cannot compute oklch() — and Seven's
+// token ramp is OKLCH throughout, so without this the palette is invisible
+// to the contrast and color checks.
+function oklchToRgb(L, C, H) {
+  const hRad = (H * Math.PI) / 180
+  const a = C * Math.cos(hRad)
+  const b = C * Math.sin(hRad)
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b
+  const lc = l_ * l_ * l_
+  const mc = m_ * m_ * m_
+  const sc = s_ * s_ * s_
+  const rLin = 4.0767416621 * lc - 3.3077115913 * mc + 0.2309699292 * sc
+  const gLin = -1.2684380046 * lc + 2.6097574011 * mc - 0.3413193965 * sc
+  const bLin = -0.0041960863 * lc - 0.7034186147 * mc + 1.707614701 * sc
+  const enc = (x) => {
+    const c = Math.max(0, Math.min(1, x))
+    return c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055
+  }
+  return {
+    r: Math.round(enc(rLin) * 255),
+    g: Math.round(enc(gLin) * 255),
+    b: Math.round(enc(bLin) * 255),
+    a: 1,
+  }
+}
+
+// Extended color parser: rgb/rgba/hex/oklch. Returns null on no match. Used
+// by the static cascade where a value might be any CSS color form.
+function parseAnyColor(s) {
+  if (!s || typeof s !== 'string') return null
+  const str = s.trim()
+  if (str === 'transparent' || str === 'currentcolor' || str === 'inherit') return null
+  let m
+  m = str.match(/rgba?\(\s*(\d+(?:\.\d+)?)\s*,?\s*(\d+(?:\.\d+)?)\s*,?\s*(\d+(?:\.\d+)?)(?:\s*[,/]\s*([\d.]+))?\s*\)/)
+  if (m) {
+    return { r: Math.round(+m[1]), g: Math.round(+m[2]), b: Math.round(+m[3]), a: m[4] !== undefined ? +m[4] : 1 }
+  }
+  m = str.match(/^#([0-9a-f]{3,8})$/i)
+  if (m) {
+    const h = m[1]
+    if (h.length === 3 || h.length === 4) {
+      return {
+        r: parseInt(h[0] + h[0], 16),
+        g: parseInt(h[1] + h[1], 16),
+        b: parseInt(h[2] + h[2], 16),
+        a: h.length === 4 ? parseInt(h[3] + h[3], 16) / 255 : 1,
+      }
+    }
+    if (h.length === 6 || h.length === 8) {
+      return {
+        r: parseInt(h.slice(0, 2), 16),
+        g: parseInt(h.slice(2, 4), 16),
+        b: parseInt(h.slice(4, 6), 16),
+        a: h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1,
+      }
+    }
+  }
+  // OKLCH — the CSS minifier may drop the space after `%`, so the L/C
+  // separator can be absent. Match L (optional %), then C and H permissively.
+  m = str.match(/oklch\(\s*([\d.]+)(%?)\s*[\s,]*\s*([\d.]+)\s*[\s,]+\s*([-\d.]+)(?:deg)?\s*\)/i)
+  if (m) {
+    const Lnum = parseFloat(m[1])
+    const L = m[2] === '%' ? Lnum / 100 : Lnum
+    return oklchToRgb(L, parseFloat(m[3]), parseFloat(m[4]))
+  }
+  return null
+}
+
+// Resolve a CSS length value (line-height, letter-spacing, etc.) given a
+// font-size context. Returns null for "normal" / unparseable values.
+function resolveLengthPx(value, fontSizePx) {
+  if (!value || value === 'normal' || value === 'auto' || value === 'inherit') return null
+  const num = parseFloat(value)
+  if (Number.isNaN(num)) return null
+  if (value.endsWith('px')) return num
+  if (value.endsWith('rem')) return num * 16
+  if (value.endsWith('em')) return num * fontSizePx
+  if (value.endsWith('%')) return (num / 100) * fontSizePx
+  return num * fontSizePx
+}
+
+// Resolve a CSS font-size value to pixels by walking up the parent chain.
+function resolveFontSizePx(el, win) {
+  const chain = []
+  let cur = el
+  while (cur && cur.nodeType === 1) {
+    const fs = (win ? win.getComputedStyle(cur) : getComputedStyle(cur)).fontSize
+    chain.push(fs || '')
+    cur = cur.parentElement
+  }
+  let px = 16
+  for (let i = chain.length - 1; i >= 0; i--) {
+    const v = chain[i]
+    if (!v || v === 'inherit') continue
+    const num = parseFloat(v)
+    if (Number.isNaN(num)) continue
+    if (v.endsWith('px')) px = num
+    else if (v.endsWith('rem')) px = num * 16
+    else if (v.endsWith('em')) px = num * px
+    else if (v.endsWith('%')) px = (num / 100) * px
+    else px = num
+  }
+  return px
+}
+
+// Collect every corner radius a style resolves. A real browser exposes each
+// corner as a longhand; the static cascade stores `border-radius` verbatim,
+// which may be a multi-value shorthand (`8px 8px 24px 24px`). Both forms are
+// handled so the mixed-scales check sees all four corners.
+function collectCornerRadii(style, widthPx) {
+  const corners = [
+    style.borderTopLeftRadius,
+    style.borderTopRightRadius,
+    style.borderBottomLeftRadius,
+    style.borderBottomRightRadius,
+  ].filter((v) => v != null && v !== '')
+  if (corners.length > 0) {
+    return corners.map((v) => parseRadiusToPx(v, widthPx) || 0)
+  }
+  // Shorthand string: split on `/` (horizontal / vertical radii) then on
+  // whitespace, parsing each token independently.
+  const raw = typeof style.borderRadius === 'string' ? style.borderRadius.trim() : ''
+  if (!raw) return [0]
+  const tokens = raw
+    .split('/')
+    .join(' ')
+    .split(/\s+/)
+    .filter(Boolean)
+  if (tokens.length <= 1) {
+    return [parseRadiusToPx(raw, widthPx) || 0]
+  }
+  return tokens.map((t) => parseRadiusToPx(t, widthPx) || 0)
+}
+
+// ─── Section 5: browser element adapters (live DOM) ─────────────────────────
+
+function checkElementBordersDOM(el) {
+  const tag = el.tagName.toLowerCase()
+  if (BORDER_SAFE_TAGS.has(tag)) return []
+  const rect = el.getBoundingClientRect()
+  if (rect.width < 20 || rect.height < 20) return []
+  const style = getComputedStyle(el)
+  const widths = {}
+  const colors = {}
+  for (const s of ['Top', 'Right', 'Bottom', 'Left']) {
+    widths[s] = parseFloat(style[`border${s}Width`]) || 0
+    colors[s] = style[`border${s}Color`] || ''
+  }
+  const findings = checkBorders(tag, widths, colors)
+  findings.push(...checkRadiusMixedScales(tag, collectCornerRadii(style, rect.width)))
+  return findings
+}
+
+function checkElementColorsDOM(el) {
+  const tag = el.tagName.toLowerCase()
+  const rect = el.getBoundingClientRect()
+  if (rect.width < 10 || rect.height < 10) return []
+  const style = getComputedStyle(el)
+  const directText = [...el.childNodes].filter((n) => n.nodeType === 3).map((n) => n.textContent).join('')
+  const hasDirectText = directText.trim().length > 0
+  return checkColors({
+    tag,
+    textColor: parseRgb(style.color),
+    bgColor: readOwnBackgroundColor(el, style),
+    effectiveBg: resolveBackground(el),
+    fontSize: parseFloat(style.fontSize) || 16,
+    fontWeight: parseInt(style.fontWeight) || 400,
+    hasDirectText,
+    isEmojiOnly: isEmojiOnlyText(directText),
+    bgClip: style.webkitBackgroundClip || style.backgroundClip || '',
+    bgImage: style.backgroundImage || '',
+    classList: el.getAttribute('class') || '',
+  })
+}
+
+function checkElementGlowDOM(el) {
+  const tag = el.tagName.toLowerCase()
+  const style = getComputedStyle(el)
+  if (!style.boxShadow || style.boxShadow === 'none') return []
+  const parentBg = el.parentElement ? resolveBackground(el.parentElement) : resolveBackground(el)
+  return checkGlow({ tag, boxShadow: style.boxShadow, effectiveBg: parentBg })
+}
+
+function checkElementMotionDOM(el) {
+  const tag = el.tagName.toLowerCase()
+  if (SAFE_TAGS.has(tag)) return []
+  const style = getComputedStyle(el)
+  return checkMotion({
+    tag,
+    transitionProperty: style.transitionProperty || '',
+    animationName: style.animationName || '',
+    timingFunctions: [style.animationTimingFunction, style.transitionTimingFunction].filter(Boolean).join(' '),
+    classList: el.getAttribute('class') || '',
+  })
+}
+
+function checkElementTactilePressDOM(el) {
+  const tag = el.tagName.toLowerCase()
+  const style = getComputedStyle(el)
+  return checkTactilePress(
+    tag,
+    (el.getAttribute('role') || '').toLowerCase(),
+    style.transitionProperty || '',
+    el.getAttribute('class') || '',
+    el.hasAttribute && el.hasAttribute('onclick')
+  )
+}
+
+function checkElementPillOnButtonDOM(el) {
+  const tag = el.tagName.toLowerCase()
+  const style = getComputedStyle(el)
+  const rect = el.getBoundingClientRect()
+  return checkPillOnButton(
+    tag,
+    (el.getAttribute('role') || '').toLowerCase(),
+    resolveBorderRadiusPx(el, style, rect.width),
+    el.getAttribute('class') || ''
+  )
+}
+
+function checkElementLucideIconDOM(el) {
+  if (el.tagName.toLowerCase() !== 'svg') return []
+  return checkLucideIcon(
+    el.getAttribute('viewBox') || '',
+    el.getAttribute('stroke-width') || '',
+    el.getAttribute('stroke-linecap') || '',
+    el.getAttribute('fill') || ''
+  )
+}
+
+function checkElementQualityDOM(el) {
+  const tag = el.tagName.toLowerCase()
+  const style = getComputedStyle(el)
+  const hasDirectText = [...el.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim().length > 10)
+  const textLen = el.textContent?.trim().length || 0
+  const fontSize = parseFloat(style.fontSize) || 16
+  const lineHeightPx = resolveLengthPx(style.lineHeight, fontSize)
+  const letterSpacingPx = resolveLengthPx(style.letterSpacing, fontSize)
+  const rect = el.getBoundingClientRect()
+  const viewportWidth = typeof window !== 'undefined' ? window.innerWidth || 0 : 0
+  return checkQuality({
+    el, tag, style, hasDirectText, textLen, fontSize, lineHeightPx, letterSpacingPx, rect, viewportWidth,
+  })
+}
+
+function checkPageQualityDOM() {
+  return checkPageQualityFromDoc(document).map((f) => ({ type: f.id, detail: f.snippet }))
+}
+
+// ─── Section 6: Node element adapters (static cascade) ──────────────────────
+
+function checkElementBorders(tag, style, overrides) {
+  const sides = ['Top', 'Right', 'Bottom', 'Left']
+  const widths = {}
+  const colors = {}
+  for (const s of sides) {
+    widths[s] = parseFloat(style[`border${s}Width`]) || 0
+    colors[s] = style[`border${s}Color`] || ''
+    // The static cascade may drop a var()-bearing border shorthand; the
+    // pre-pass override fills the missing side so the side-stripe check runs.
+    if (widths[s] === 0 && overrides && overrides[s]) {
+      widths[s] = overrides[s].width
+      colors[s] = overrides[s].color
+    } else if (colors[s] && colors[s].startsWith('var(') && overrides && overrides[s]) {
+      colors[s] = overrides[s].color
+    }
+  }
+  const findings = checkBorders(tag, widths, colors)
+  findings.push(...checkRadiusMixedScales(tag, collectCornerRadii(style, parseFloat(style.width) || 0)))
+  return findings
+}
+
+function checkElementColors(el, style, tag, window) {
+  const directText = [...el.childNodes].filter((n) => n.nodeType === 3).map((n) => n.textContent).join('')
+  const hasDirectText = directText.trim().length > 0
+  return checkColors({
+    tag,
+    textColor: parseRgb(style.color),
+    bgColor: readOwnBackgroundColor(el, style),
+    effectiveBg: resolveBackground(el, window),
+    fontSize: parseFloat(style.fontSize) || 16,
+    fontWeight: parseInt(style.fontWeight) || 400,
+    hasDirectText,
+    isEmojiOnly: isEmojiOnlyText(directText),
+    bgClip: style.webkitBackgroundClip || style.backgroundClip || '',
+    bgImage: style.backgroundImage || '',
+    classList: el.getAttribute?.('class') || el.className || '',
+  })
+}
+
+function checkElementGlow(tag, style, effectiveBg) {
+  if (!style.boxShadow || style.boxShadow === 'none') return []
+  return checkGlow({ tag, boxShadow: style.boxShadow, effectiveBg })
+}
+
+function checkElementMotion(tag, style) {
+  return checkMotion({
+    tag,
+    transitionProperty: style.transitionProperty || '',
+    animationName: style.animationName || '',
+    timingFunctions: [style.animationTimingFunction, style.transitionTimingFunction].filter(Boolean).join(' '),
+    classList: '',
+  })
+}
+
+function checkElementTactilePress(el, style, tag) {
+  return checkTactilePress(
+    tag,
+    (el.getAttribute?.('role') || '').toLowerCase(),
+    style.transitionProperty || '',
+    el.getAttribute?.('class') || '',
+    !!el.getAttribute?.('onclick')
+  )
+}
+
+function checkElementPillOnButton(el, style, tag) {
+  return checkPillOnButton(
+    tag,
+    (el.getAttribute?.('role') || '').toLowerCase(),
+    resolveBorderRadiusPx(el, style, parseFloat(style.width) || 0),
+    el.getAttribute?.('class') || ''
+  )
+}
+
+function checkElementLucideIcon(el, tag) {
+  if (tag !== 'svg') return []
+  return checkLucideIcon(
+    el.getAttribute?.('viewBox') || '',
+    el.getAttribute?.('stroke-width') || '',
+    el.getAttribute?.('stroke-linecap') || '',
+    el.getAttribute?.('fill') || ''
+  )
+}
+
+function checkElementQuality(el, style, tag, window) {
+  const hasDirectText = [...el.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim().length > 10)
+  const textLen = el.textContent?.trim().length || 0
+  const fontSize = resolveFontSizePx(el, window)
+  const lineHeightPx = resolveLengthPx(style.lineHeight, fontSize)
+  const letterSpacingPx = resolveLengthPx(style.letterSpacing, fontSize)
+  // The static cascade does no layout — pass rect: null to skip the three
+  // rect-dependent rules (line-length, cramped-padding, body-text-viewport-edge).
+  return checkQuality({ el, tag, style, hasDirectText, textLen, fontSize, lineHeightPx, letterSpacingPx, rect: null })
+}
+
+// ─── Section 7: page-level checks ───────────────────────────────────────────
+
+/** Skipped-heading walk. Works on any Document (browser or static). */
+function checkPageQualityFromDoc(doc) {
+  const findings = []
+  const headings = doc.querySelectorAll('h1, h2, h3, h4, h5, h6')
+  let prevLevel = 0
+  let prevText = ''
+  for (const h of headings) {
+    const level = parseInt(h.tagName[1])
+    const text = (h.textContent || '').trim().replace(/\s+/g, ' ').slice(0, 60)
+    if (prevLevel > 0 && level > prevLevel + 1) {
+      findings.push({
+        id: 'skipped-heading',
+        snippet: `<h${prevLevel}> "${prevText}" followed by <h${level}> "${text}" (missing h${prevLevel + 1})`,
+      })
+    }
+    prevLevel = level
+    prevText = text
+  }
+  return findings
+}
+
+/** Flat-type-hierarchy page check. */
+function checkPageTypography(doc, win) {
+  const findings = []
+  const sizes = new Set()
+  for (const el of doc.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, label, button, div')) {
+    const fontSize = parseFloat(win.getComputedStyle(el).fontSize)
+    if (fontSize >= 8 && fontSize < 200) sizes.add(Math.round(fontSize * 10) / 10)
+  }
+  if (sizes.size >= 3) {
+    const sorted = [...sizes].sort((a, b) => a - b)
+    const ratio = sorted[sorted.length - 1] / sorted[0]
+    if (ratio < 2.0) {
+      findings.push({
+        id: 'flat-type-hierarchy',
+        snippet: `Sizes: ${sorted.map((s) => s + 'px').join(', ')} (ratio ${ratio.toFixed(1)}:1)`,
+      })
+    }
+  }
+  return findings
+}
+
+function isCardLike(el, win) {
+  const tag = el.tagName.toLowerCase()
+  if (SAFE_TAGS.has(tag) || ['input', 'select', 'textarea', 'img', 'video', 'canvas', 'picture'].includes(tag)) {
+    return false
+  }
+  const style = win.getComputedStyle(el)
+  const rawStyle = el.getAttribute?.('style') || ''
+  const cls = el.getAttribute?.('class') || ''
+  const hasShadow =
+    (style.boxShadow && style.boxShadow !== 'none') ||
+    /\bshadow(?:-sm|-md|-lg|-xl|-2xl)?\b/.test(cls) ||
+    /box-shadow/i.test(rawStyle)
+  const hasBorder = /\bborder\b/.test(cls) || (parseFloat(style.borderTopWidth) || 0) > 0
+  const widthPx = parseFloat(style.width) || 0
+  const hasRadius =
+    resolveBorderRadiusPx(el, style, widthPx) > 0 ||
+    /\brounded(?:-sm|-md|-lg|-xl|-2xl|-full)?\b/.test(cls) ||
+    /border-radius/i.test(rawStyle)
+  const hasBg =
+    /\bbg-(?:white|gray-\d+|slate-\d+)\b/.test(cls) ||
+    /background(?:-color)?\s*:\s*(?!transparent)/i.test(rawStyle) ||
+    (style.backgroundColor && style.backgroundColor !== 'rgba(0, 0, 0, 0)')
+  return isCardLikeFromProps(hasShadow, hasBorder, hasRadius, hasBg)
+}
+
+/** Nested-cards and everything-centered page checks. */
+function checkPageLayout(doc, win) {
+  const findings = []
+
+  const allEls = doc.querySelectorAll('*')
+  const flaggedEls = new Set()
+  for (const el of allEls) {
+    if (!isCardLike(el, win)) continue
+    if (flaggedEls.has(el)) continue
+    const tag = el.tagName.toLowerCase()
+    const cls = el.getAttribute?.('class') || ''
+    const rawStyle = el.getAttribute?.('style') || ''
+    if (['pre', 'code'].includes(tag)) continue
+    if (/\b(?:absolute|fixed)\b/.test(cls) || /position\s*:\s*(?:absolute|fixed)/i.test(rawStyle)) continue
+    if ((el.textContent?.trim().length || 0) < 10) continue
+    if (/\b(?:dropdown|popover|tooltip|menu|modal|dialog)\b/i.test(cls)) continue
+    let parent = el.parentElement
+    while (parent) {
+      if (isCardLike(parent, win)) {
+        flaggedEls.add(el)
+        break
+      }
+      parent = parent.parentElement
+    }
+  }
+  for (const el of flaggedEls) {
+    let isAncestorOfFlagged = false
+    for (const other of flaggedEls) {
+      if (other !== el && el.contains(other)) {
+        isAncestorOfFlagged = true
+        break
+      }
+    }
+    if (!isAncestorOfFlagged) {
+      findings.push({ id: 'nested-cards', snippet: `Card inside card (${el.tagName.toLowerCase()})` })
+    }
+  }
+
+  const textEls = doc.querySelectorAll('h1, h2, h3, h4, h5, h6, p, li, div, button')
+  let centeredCount = 0
+  let totalText = 0
+  for (const el of textEls) {
+    const hasDirectText = [...el.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim().length >= 3)
+    if (!hasDirectText) continue
+    totalText++
+    let cur = el
+    let isCentered = false
+    while (cur && cur.nodeType === 1) {
+      const rawStyle = cur.getAttribute?.('style') || ''
+      const cls = cur.getAttribute?.('class') || ''
+      if (/text-align\s*:\s*center/i.test(rawStyle) || /\btext-center\b/.test(cls)) {
+        isCentered = true
+        break
+      }
+      if (cur.tagName === 'BODY') break
+      cur = cur.parentElement
+    }
+    if (isCentered) centeredCount++
+  }
+  if (totalText >= 5 && centeredCount / totalText > 0.7) {
+    findings.push({
+      id: 'everything-centered',
+      snippet: `${centeredCount}/${totalText} text elements centered (${Math.round((centeredCount / totalText) * 100)}%)`,
+    })
+  }
+
+  return findings
+}
+
+// ── cli/engine/browser/injected/index.mjs ──
+// SPDX-License-Identifier: Apache-2.0
+// ETUS Digital — Seven Design System. Detector architecture adapted from
+// impeccable (Paul Bakaus, Apache-2.0). See packages/seven-skill/NOTICE.md.
+
+/*
+ * In-browser detector. This file is NOT a standalone module — it is
+ * concatenated by build/build-browser-detector.mjs into a single IIFE bundle
+ * (cli/engine/detect-antipatterns-browser.js) together with the registry,
+ * color helpers, constants, and the rule checks. It therefore references
+ * those symbols (`checkElement*DOM`, `checkPageQualityDOM`,
+ * `checkHtmlPatterns`) as free identifiers resolved within the bundle scope.
+ *
+ * The browser engine (engines/browser/detect-url.mjs) injects the bundle into
+ * a Puppeteer page and calls `window.sevenDetect()`. Each element is checked
+ * with the live `getComputedStyle`, so cascade-, layout-, and runtime-CSS-
+ * dependent drift surfaces — the per-element work the static-html engine does
+ * against a resolved cascade, here against the real browser.
+ *
+ * Impeccable's injected script also carries an inspector overlay, decoration,
+ * visual-contrast capture, and the Chrome-extension bridge. Those are
+ * extension UI, not detection — Seven has no extension, so they are omitted.
+ */
+
+;(function sevenInstallBrowserDetector() {
+  if (typeof window === 'undefined') return
+
+  function collectFindings() {
+    const out = []
+    const push = (arr) => {
+      if (!arr) return
+      for (const f of arr) out.push({ type: f.id, detail: f.snippet })
+    }
+
+    for (const el of document.querySelectorAll('*')) {
+      if (el === document.body || el === document.documentElement) continue
+      const tag = el.tagName ? el.tagName.toLowerCase() : ''
+      if (tag === 'script' || tag === 'style' || tag === 'head' || tag === 'meta' || tag === 'link') {
+        continue
+      }
+      try {
+        push(checkElementBordersDOM(el))
+        push(checkElementColorsDOM(el))
+        push(checkElementGlowDOM(el))
+        push(checkElementMotionDOM(el))
+        push(checkElementTactilePressDOM(el))
+        push(checkElementPillOnButtonDOM(el))
+        push(checkElementLucideIconDOM(el))
+        push(checkElementQualityDOM(el))
+      } catch {
+        // A malformed element must not abort the whole scan.
+      }
+    }
+
+    try {
+      push(checkPageQualityDOM())
+    } catch {
+      /* page-quality check failed — continue */
+    }
+
+    try {
+      // Regex-on-markup checks over the fully rendered HTML.
+      push(checkHtmlPatterns(document.documentElement.outerHTML))
+    } catch {
+      /* html-pattern check failed — continue */
+    }
+
+    return out
+  }
+
+  /**
+   * Public entry the browser engine calls. Returns a flat array of
+   * { type, detail } findings; detect-url.mjs maps it to normalized findings.
+   */
+  window.sevenDetect = function sevenDetect() {
+    try {
+      return collectFindings()
+    } catch {
+      return []
+    }
+  }
+
+  // Alias kept for parity with the impeccable browser API surface.
+  window.sevenScan = window.sevenDetect
+})()
+
+})();