@emailens/engine 0.10.4 → 0.11.0

package/dist/index.cjs

@@ -82,10 +82,15 @@ __export(index_exports, {
   auditEmail: () => auditEmail,
   caveatApplies: () => caveatApplies,
   checkAccessibility: () => checkAccessibility,
+  checkDarkModeContrast: () => checkDarkModeContrast,
+  checkDarkStylesContrastFromDom: () => checkDarkStylesContrastFromDom,
+  checkDesignConsistency: () => checkDesignConsistency,
+  checkMobileContrast: () => checkMobileContrast,
   checkOverflow: () => checkOverflow,
   checkSize: () => checkSize,
   checkTemplateVariables: () => checkTemplateVariables,
   checkVisual: () => checkVisual,
+  colorDistance: () => colorDistance,
   contrastRatio: () => contrastRatio,
   createSession: () => createSession,
   diffResults: () => diffResults,
@@ -104,6 +109,7 @@ __export(index_exports, {
   heuristicTokenCount: () => heuristicTokenCount,
   parseColor: () => parseColor,
   relativeLuminance: () => relativeLuminance,
+  rgbToOklab: () => rgbToOklab,
   simulateDarkMode: () => simulateDarkMode,
   structuralWarnings: () => structuralWarnings,
   toPlainText: () => toPlainText,
@@ -7603,12 +7609,12 @@ h1 {
     description: "Account for padding in width manually (no box-sizing)",
     before: `<div style="width: 300px; padding: 20px;
             box-sizing: border-box;">
-  Content \u2014 total width stays 300px
+  Content; total width stays 300px
 </div>`,
     after: `<!-- Set width to content-width (300 - 40 = 260px) -->
 <div style="width: 300px;">
   <div style="padding: 20px;">
-    Content \u2014 padding on inner element
+    Content; padding on inner element
   </div>
 </div>`
   },
@@ -7689,7 +7695,7 @@ h1 {
   // ── transition (not supported) ────────────────────────────────────────
   "transition": {
     language: "css",
-    description: "Transitions don't work in email \u2014 style the default state well",
+    description: "Transitions don't work in email; style the default state well",
     before: `.button {
   background-color: #6d28d9;
   transition: background-color 0.2s;
@@ -7709,7 +7715,7 @@ h1 {
   // ── background-size (Outlook) → VML ───────────────────────────────────
   "background-size": {
     language: "html",
-    description: "Outlook ignores background-size \u2014 use VML or sized images",
+    description: "Outlook ignores background-size; use VML or sized images",
     before: `<td style="background: url('bg.jpg') center/cover no-repeat;">
   Content
 </td>`,
@@ -7731,7 +7737,7 @@ h1 {
   // ── overflow (Gmail strips it) ────────────────────────────────────────
   "overflow": {
     language: "html",
-    description: "Content will always be visible \u2014 design for full content display",
+    description: "Content will always be visible; design for full content display",
     before: `<div style="max-height: 200px; overflow: hidden;">
   Long content that gets clipped...
 </div>`,
@@ -7833,7 +7839,7 @@ h1 {
   // ── max-height → fixed height ────────────────────────────────────────
   "max-height": {
     language: "html",
-    description: "Outlook ignores max-height \u2014 truncate content server-side",
+    description: "Outlook ignores max-height; truncate content server-side",
     before: `<div style="max-height: 200px; overflow: hidden;">
   Long content...
 </div>`,
@@ -8064,7 +8070,7 @@ var JSX_FIX_DATABASE = {
 </Row>`,
     after: `import { Row, Column } from "@react-email/components";
 
-{/* Use padding on Column \u2014 gap is not supported in email clients */}
+{/* Use padding on Column; gap is not supported in email clients */}
 <Row>
   <Column style={{ paddingRight: "16px" }}>Item 1</Column>
   <Column style={{ paddingRight: "16px" }}>Item 2</Column>
@@ -8074,7 +8080,7 @@ var JSX_FIX_DATABASE = {
   // ── <style> (Gmail JSX) ─────────────────────────────────────────────
   "<style>::gmail::jsx": {
     language: "jsx",
-    description: "React Email inlines styles via style props \u2014 manual <style> blocks won't survive Gmail",
+    description: "React Email inlines styles via style props; manual <style> blocks won't survive Gmail",
     before: `import { Head } from "@react-email/components";
 
 <Head>
@@ -8135,7 +8141,7 @@ var JSX_FIX_DATABASE = {
   // ── @media (JSX) ────────────────────────────────────────────────────
   "@media::jsx": {
     language: "jsx",
-    description: "Design mobile-first \u2014 @media queries are stripped by many clients",
+    description: "Design mobile-first; @media queries are stripped by many clients",
     before: `import { Head } from "@react-email/components";
 
 <Head>
@@ -8277,7 +8283,7 @@ var JSX_FIX_DATABASE = {
 </div>`,
     after: `import { Img } from "@react-email/components";
 
-{/* CSS transforms are not supported in email \u2014 pre-render as an image */}
+{/* CSS transforms are not supported in email: pre-render as an image */}
 <Img
   src="https://example.com/rotated-content.png"
   width={200}
@@ -8293,7 +8299,7 @@ var JSX_FIX_DATABASE = {
     before: `<span style={{ animation: "pulse 2s infinite" }}>New!</span>`,
     after: `import { Img } from "@react-email/components";
 
-{/* CSS animations are not supported \u2014 use an animated GIF */}
+{/* CSS animations are not supported: use an animated GIF */}
 <Img
   src="https://example.com/badge-animated.gif"
   width={60}
@@ -8305,7 +8311,7 @@ var JSX_FIX_DATABASE = {
   // ── transition (JSX) ─────────────────────────────────────────────
   "transition::jsx": {
     language: "jsx",
-    description: "Transitions don't work in email \u2014 style the default state well",
+    description: "Transitions don't work in email; style the default state well",
     before: `<a
   href="#"
   style={{
@@ -8318,7 +8324,7 @@ var JSX_FIX_DATABASE = {
 </a>`,
     after: `import { Button } from "@react-email/components";
 
-{/* Transitions are not supported \u2014 style the default state: */}
+{/* Transitions are not supported: style the default state: */}
 <Button
   href="https://example.com"
   style={{
@@ -8335,13 +8341,13 @@ var JSX_FIX_DATABASE = {
   // ── overflow (JSX) ───────────────────────────────────────────────
   "overflow::jsx": {
     language: "jsx",
-    description: "Content will always be visible \u2014 design for full content display",
+    description: "Content will always be visible; design for full content display",
     before: `<div style={{ maxHeight: "200px", overflow: "hidden" }}>
   Long content that gets clipped...
 </div>`,
     after: `import { Link, Text } from "@react-email/components";
 
-{/* overflow:hidden is stripped \u2014 show full content or truncate server-side */}
+{/* overflow:hidden is stripped; show full content or truncate server-side */}
 <div>
   <Text>Shortened content that fits...</Text>
   <Link href="https://example.com/full">Read more</Link>
@@ -8354,7 +8360,7 @@ var JSX_FIX_DATABASE = {
     before: `<div style={{ visibility: "hidden" }}>
   Hidden preheader text
 </div>`,
-    after: `{/* visibility:hidden is stripped by most clients \u2014 use the preheader trick.
+    after: `{/* visibility:hidden is stripped by most clients; use the preheader trick.
     msoHide is non-standard but needed to hide content in Outlook. */}
 <div
   style={{
@@ -8392,7 +8398,7 @@ var JSX_FIX_DATABASE = {
   // ── background-size (JSX) ────────────────────────────────────────
   "background-size::jsx": {
     language: "jsx",
-    description: "Outlook ignores background-size \u2014 use sized images instead",
+    description: "Outlook ignores background-size; use sized images instead",
     before: `<div style={{
   background: "url('bg.jpg') center/cover no-repeat",
 }}>
@@ -8418,12 +8424,12 @@ var JSX_FIX_DATABASE = {
   padding: "20px",
   boxSizing: "border-box",
 }}>
-  Content \u2014 total width stays 300px
+  Content (total width stays 300px)
 </div>`,
     after: `{/* Set outer width, use inner element for padding */}
 <div style={{ width: "300px" }}>
   <div style={{ padding: "20px" }}>
-    Content \u2014 padding on inner element
+    Content; padding on inner element
   </div>
 </div>`
   },
@@ -8463,7 +8469,7 @@ var MJML_FIX_DATABASE = {
   // ── word-break (MJML) ────────────────────────────────────────────────
   "word-break::mjml": {
     language: "mjml",
-    description: "MJML renders text in table cells by default \u2014 word-break works via mj-text",
+    description: "MJML renders text in table cells by default; word-break works via mj-text",
     before: `<mj-text>
   <span style="word-break: break-all;">Long URL here</span>
 </mj-text>`,
@@ -8517,7 +8523,7 @@ var MJML_FIX_DATABASE = {
   // ── border-radius (Outlook MJML) ────────────────────────────────────
   "border-radius::outlook::mjml": {
     language: "mjml",
-    description: "MJML limitation: border-radius is unsupported in Outlook \u2014 MJML does not generate VML",
+    description: "MJML limitation: border-radius is unsupported in Outlook; MJML does not generate VML",
     before: `<mj-button border-radius="6px" background-color="#6d28d9">
   Click Here
 </mj-button>`,
@@ -8557,7 +8563,7 @@ var MJML_FIX_DATABASE = {
   </div>
 </mj-raw>`,
     after: `<!-- Flexbox in MJML is not Outlook-compatible.
-     Use mj-section and mj-column \u2014 MJML compiles these to table-based layouts. -->
+     Use mj-section and mj-column: MJML compiles these to table-based layouts. -->
 <mj-section>
   <mj-column width="50%">
     <mj-text>Column 1</mj-text>
@@ -8617,7 +8623,7 @@ var MAIZZLE_FIX_DATABASE = {
   // ── @font-face (Maizzle) ────────────────────────────────────────────
   "@font-face::maizzle": {
     language: "maizzle",
-    description: 'Add fonts via the googleFonts key in config.js \u2014 Maizzle injects the Google Fonts link tag automatically. Set googleFonts: "Inter:ital,wght@0,400;0,700" in your environment config, then reference the font family in your template.',
+    description: 'Add fonts via the googleFonts key in config.js; Maizzle injects the Google Fonts link tag automatically. Set googleFonts: "Inter:ital,wght@0,400;0,700" in your environment config, then reference the font family in your template.',
     before: `<style>
   @font-face {
     font-family: 'Inter';
@@ -8630,12 +8636,12 @@ var MAIZZLE_FIX_DATABASE = {
   // ── <style> (Gmail Maizzle) ─────────────────────────────────────────
   "<style>::gmail::maizzle": {
     language: "maizzle",
-    description: "Maizzle automatically inlines CSS via juice during build (inlineCSS: true in config.js). Manual <style> blocks bypass juice and will be stripped by Gmail \u2014 prefer Tailwind utility classes instead.",
+    description: "Maizzle automatically inlines CSS via juice during build (inlineCSS: true in config.js). Manual <style> blocks bypass juice and will be stripped by Gmail; prefer Tailwind utility classes instead.",
     before: `<style>
   .custom { color: #6d28d9; }
 </style>
 <div class="custom">Hello</div>`,
-    after: `<!-- Prefer Tailwind classes \u2014 Maizzle inlines them automatically during build -->
+    after: `<!-- Prefer Tailwind classes; Maizzle inlines them automatically during build -->
 <div class="text-[#6d28d9]">Hello</div>`
   },
   // ── max-width (Outlook Maizzle) ─────────────────────────────────────
@@ -8724,7 +8730,7 @@ var HTML_SUGGESTION_DATABASE = {
   "opacity": "Use solid colors instead of opacity.",
   // ── word-break ────────────────────────────────────────────────────────
   "word-break": "Wrap long text in a <table><td> to force wrapping in clients that don't support word-break.",
-  "word-break::outlook": "Outlook's Word engine ignores word-break. Place text inside a <td> with a constrained width \u2014 tables always wrap.",
+  "word-break::outlook": "Outlook's Word engine ignores word-break. Place text inside a <td> with a constrained width; tables always wrap.",
   // ── overflow-wrap ─────────────────────────────────────────────────────
   "overflow-wrap": "Wrap text in a <table><td> to force wrapping. overflow-wrap is ignored by Outlook and unreliable in Yahoo.",
   // ── white-space ───────────────────────────────────────────────────────
@@ -8760,7 +8766,7 @@ var HTML_SUGGESTION_DATABASE = {
 // src/fix-snippets/jsx-suggestions.ts
 var JSX_SUGGESTION_DATABASE = {
   // ── <style> ───────────────────────────────────────────────────────────
-  "<style>::jsx": "Move styles to inline style props \u2014 React Email components accept style objects directly.",
+  "<style>::jsx": "Move styles to inline style props; React Email components accept style objects directly.",
   "<style>:partial::jsx": "Use inline style props on React Email components. Reserve <style> in <Head> for progressive enhancement only.",
   // ── <link> ────────────────────────────────────────────────────────────
   "<link>::jsx": "Use the React Email <Head> component for font imports; place all other styles inline via style props.",
@@ -8822,7 +8828,7 @@ var MJML_SUGGESTION_DATABASE = {
   // ── @media ────────────────────────────────────────────────────────────
   "@media::mjml": "MJML generates responsive @media queries automatically. Use mj-breakpoint and mj-column widths.",
   // ── display:flex ──────────────────────────────────────────────────────
-  "display:flex::mjml": "Use mj-section and mj-column \u2014 MJML compiles these to table-based layouts.",
+  "display:flex::mjml": "Use mj-section and mj-column; MJML compiles these to table-based layouts.",
   // ── display:grid ──────────────────────────────────────────────────────
   "display:grid::mjml": "Use mj-section and mj-column for grid-like layouts.",
   // ── linear-gradient ───────────────────────────────────────────────────
@@ -8830,7 +8836,7 @@ var MJML_SUGGESTION_DATABASE = {
   // ── box-shadow ────────────────────────────────────────────────────────
   "box-shadow::mjml": "Use a border attribute on mj-section or mj-column as an alternative.",
   // ── border-radius ─────────────────────────────────────────────────────
-  "border-radius::mjml": 'MJML does not generate VML \u2014 border-radius will not render in Outlook. Set border-radius="0" or accept flat corners.',
+  "border-radius::mjml": 'MJML does not generate VML; border-radius will not render in Outlook. Set border-radius="0" or accept flat corners.',
   // ── max-width ─────────────────────────────────────────────────────────
   "max-width::mjml": "Set the width attribute on mj-body or mj-section for maximum compatibility.",
   // ── gap ───────────────────────────────────────────────────────────────
@@ -8838,7 +8844,7 @@ var MJML_SUGGESTION_DATABASE = {
   // ── float ─────────────────────────────────────────────────────────────
   "float::mjml": "Use mj-section with multiple mj-column elements for side-by-side layout.",
   // ── background-image ──────────────────────────────────────────────────
-  "background-image::mjml": "Use background-url attribute on mj-section \u2014 MJML generates VML automatically.",
+  "background-image::mjml": "Use background-url attribute on mj-section; MJML generates VML automatically.",
   // ── position ──────────────────────────────────────────────────────────
   "position::mjml": "Use mj-section and mj-column for layout positioning.",
   // ── opacity ───────────────────────────────────────────────────────────
@@ -8850,10 +8856,10 @@ var MJML_SUGGESTION_DATABASE = {
 // src/fix-snippets/maizzle-suggestions.ts
 var MAIZZLE_SUGGESTION_DATABASE = {
   // ── <style> ───────────────────────────────────────────────────────────
-  "<style>::maizzle": "Prefer Tailwind utility classes \u2014 Maizzle inlines CSS via juice during build (inlineCSS: true in config.js).",
+  "<style>::maizzle": "Prefer Tailwind utility classes; Maizzle inlines CSS via juice during build (inlineCSS: true in config.js).",
   "<style>:partial::maizzle": "Use Tailwind utility classes for critical styles. Maizzle automatically inlines them at build time.",
   // ── <link> ────────────────────────────────────────────────────────────
-  "<link>::maizzle": "External stylesheets are stripped. Use Tailwind CSS classes \u2014 Maizzle inlines them at build time.",
+  "<link>::maizzle": "External stylesheets are stripped. Use Tailwind CSS classes; Maizzle inlines them at build time.",
   // ── <svg> ─────────────────────────────────────────────────────────────
   "<svg>::maizzle": "Replace inline SVG with an <img> tag pointing to a hosted PNG.",
   // ── <video> ───────────────────────────────────────────────────────────
@@ -8861,7 +8867,7 @@ var MAIZZLE_SUGGESTION_DATABASE = {
   // ── <form> ────────────────────────────────────────────────────────────
   "<form>::maizzle": "Replace the form with a CTA link/button pointing to a hosted form page.",
   // ── @font-face ────────────────────────────────────────────────────────
-  "@font-face::maizzle": "Use the googleFonts key in config.js \u2014 Maizzle injects the Google Fonts link tag automatically.",
+  "@font-face::maizzle": "Use the googleFonts key in config.js; Maizzle injects the Google Fonts link tag automatically.",
   // ── @media ────────────────────────────────────────────────────────────
   "@media::maizzle": "Use Tailwind responsive utility classes and Maizzle's breakpoints config instead of hand-written @media.",
   // ── display:flex ──────────────────────────────────────────────────────
@@ -9032,6 +9038,30 @@ function serializeStyle(map) {
   });
   return parts.join("; ");
 }
+function splitTopLevel(value) {
+  const parts = [];
+  let current = "";
+  let depth = 0;
+  let quote = null;
+  for (const ch of value) {
+    if (quote) {
+      if (ch === quote) quote = null;
+    } else if (ch === '"' || ch === "'") {
+      quote = ch;
+    } else if (ch === "(") {
+      depth++;
+    } else if (ch === ")") {
+      depth = Math.max(0, depth - 1);
+    } else if (ch === "," && depth === 0) {
+      parts.push(current);
+      current = "";
+      continue;
+    }
+    current += ch;
+  }
+  parts.push(current);
+  return parts;
+}
 
 // src/downlevel.ts
 var cheerio = __toESM(require("cheerio"), 1);
@@ -9407,6 +9437,71 @@ function alphaBlend(fg, bgR, bgG, bgB) {
     Math.round(fg.b * a + bgB * (1 - a))
   ];
 }
+function backgroundShorthandColor(value) {
+  if (!value) return null;
+  const trimmed = value.trim();
+  if (parseColor(trimmed)) return trimmed;
+  for (const token of trimmed.split(/\s+/)) {
+    if (token.includes("(")) continue;
+    if (parseColor(token)) return token;
+  }
+  return null;
+}
+function functionArgs(value, nameRe) {
+  const out = [];
+  const re = new RegExp(nameRe.source + "\\(", nameRe.flags.includes("i") ? "gi" : "g");
+  let match;
+  while ((match = re.exec(value)) !== null) {
+    let depth = 1;
+    let i = match.index + match[0].length;
+    const start = i;
+    while (i < value.length && depth > 0) {
+      if (value[i] === "(") depth++;
+      else if (value[i] === ")") depth--;
+      i++;
+    }
+    if (depth === 0) out.push(value.slice(start, i - 1));
+    re.lastIndex = i;
+  }
+  return out;
+}
+function gradientStops(value) {
+  if (!value) return [];
+  const stops = [];
+  for (const args of functionArgs(value, /(?:repeating-)?(?:linear|radial|conic)-gradient/i)) {
+    for (const part of splitTopLevel(args)) {
+      const trimmed = part.trim();
+      if (!trimmed || /^(?:to\b|at\b|from\b|in\b|[\d.]+(?:deg|turn|rad|grad)\b)/i.test(trimmed)) continue;
+      const fnMatch = trimmed.match(/^(?:rgba?|hsla?|color|lab|lch|oklab|oklch)\([^)]*\)/i);
+      const token = fnMatch ? fnMatch[0] : trimmed.split(/\s+/)[0];
+      const parsed = parseColor(token);
+      if (parsed && parsed.a > 0) stops.push(parsed);
+    }
+  }
+  return stops;
+}
+function gammaToLinear(c) {
+  const s = c / 255;
+  return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+}
+function rgbToOklab(rgba) {
+  const r = gammaToLinear(rgba.r);
+  const g = gammaToLinear(rgba.g);
+  const b = gammaToLinear(rgba.b);
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function colorDistance(a, b) {
+  const [l1, a1, b1] = rgbToOklab(a);
+  const [l2, a2, b2] = rgbToOklab(b);
+  return Math.hypot(l1 - l2, a1 - a2, b1 - b2);
+}
 
 // src/downlevel.ts
 var LOGICAL_PROPERTY_MAP = {
@@ -9847,6 +9942,10 @@ var GENERIC_FONT_FAMILIES = /* @__PURE__ */ new Set([
   "ui-monospace"
 ]);
 var EMPTY_DELIVERABILITY = { domain: "", checks: [], score: 0, issues: [] };
+var EMPTY_DESIGN = {
+  issues: [],
+  palette: { colors: [], backgrounds: [], fontSizes: [], fontFamilies: [], radii: [] }
+};
 
 // src/transform.ts
 function hasPseudoSelector(selector) {
@@ -10217,7 +10316,7 @@ var CLIENT_CONFIGS = {
   "outlook-macos": {
     id: "outlook-macos",
     // caniemail: the new (WebKit) Outlook for Mac supports position/transform/
-    // animation/box-shadow/opacity — only transition is unsupported. It is NOT
+    // animation/box-shadow/opacity; only transition is unsupported. It is NOT
     // the Word engine, so do not mirror outlook-web's broader strip set.
     strippedProperties: /* @__PURE__ */ new Set(["transition"]),
     stripMode: "strip",
@@ -10309,7 +10408,7 @@ var CLIENT_CONFIGS = {
     additionalChecks: heyAdditionalChecks
   },
   // ponytail: strip sets below are data-driven from caniemail (the same source
-  // as CSS_SUPPORT), not hand-guessed — no manual re-verification debt.
+  // as CSS_SUPPORT), not hand-guessed; no manual re-verification debt.
   "protonmail": {
     id: "protonmail",
     // caniemail: strips animation + external stylesheets + forms; supports
@@ -10323,7 +10422,7 @@ var CLIENT_CONFIGS = {
   },
   "aol": {
     id: "aol",
-    // caniemail: restrictive — drops animation, box-shadow, opacity, transform,
+    // caniemail: restrictive; drops animation, box-shadow, opacity, transform,
     // external stylesheets, and SVG. Forms are kept.
     strippedProperties: /* @__PURE__ */ new Set(["animation", "box-shadow", "opacity", "transform"]),
     stripMode: "strip",
@@ -10877,7 +10976,7 @@ function simulateDarkMode(html, clientId) {
           client: clientId,
           property: "dark-mode",
           message: "Superhuman respects @media (prefers-color-scheme: dark). Many Superhuman users run in dark mode.",
-          suggestion: "Add @media (prefers-color-scheme: dark) styles \u2014 Superhuman's power-user audience often prefers dark mode."
+          suggestion: "Add @media (prefers-color-scheme: dark) styles; Superhuman's power-user audience often prefers dark mode."
         });
       }
       break;
@@ -11253,16 +11352,6 @@ function positionAt(data, index, anchor) {
 // src/dark-mode-checker.ts
 var DARK_MEDIA_RE = /\(\s*prefers-color-scheme\s*:\s*dark\s*\)/i;
 var MAX_UNCOVERED_ELEMENTS = 3;
-function backgroundShorthandColor(value) {
-  if (!value) return null;
-  const trimmed = value.trim();
-  if (parseColor(trimmed)) return trimmed;
-  for (const token of trimmed.split(/\s+/)) {
-    if (token.includes("(")) continue;
-    if (parseColor(token)) return token;
-  }
-  return null;
-}
 function isLight(value) {
   const c = parseColor(value);
   if (!c || c.a < 0.5) return false;
@@ -11380,7 +11469,7 @@ function checkDarkModeFromDom($, source) {
         severity: "warning",
         client: clientId,
         property: "dark-mode-coverage",
-        message: `<${selector}> keeps its hardcoded light background (${color}) in dark mode \u2014 the dark block never overrides it. The rest of the email inverts around it, producing a half-inverted render (e.g. light text left on a still-white background).`,
+        message: `<${selector}> keeps its hardcoded light background (${color}) in dark mode; the dark block never overrides it. The rest of the email inverts around it, producing a half-inverted render (e.g. light text left on a still-white background).`,
         suggestion: inline ? `Override it inside @media (prefers-color-scheme: dark) with a dark background-color and !important (an inline style beats a plain rule), or move the colour onto a class the dark block already targets.` : `Override it inside @media (prefers-color-scheme: dark) with a dark background-color, or give the element a class the dark block already targets.`,
         fixType: "css",
         selector
@@ -11453,7 +11542,7 @@ var COMPOUND_DETECTORS = [
 var CSS_FUNCTION_DETECTORS = CSS_FUNCTION_FEATURES.map((fn) => ({
   key: fn,
   pattern: `${fn}(`
-  // require opening paren — matches "min(" but not "Minion"
+  // require opening paren, matches "min(" but not "Minion"
 }));
 function analyzeEmailFromDom($, framework, source) {
   const warnings = [];
@@ -11951,14 +12040,14 @@ ${originalHtml}
 - **${w.property}** (${clientName})${fixTypeLabel}: ${w.message}`;
         if (w.fixType === "structural") {
           issueSection += `
-  - **Fix type: structural** \u2014 CSS-only changes will NOT work. HTML restructuring required.`;
+  - **Fix type: structural**. CSS-only changes will NOT work. HTML restructuring required.`;
         }
         if (w.suggestion) {
           issueSection += `
   - Suggestion: ${w.suggestion}`;
         }
         if (w.fix) {
-          const fixLabel = w.fixIsGenericFallback && format !== "html" ? `Fix (generic HTML \u2014 adapt to ${format.toUpperCase()} syntax)` : "Fix";
+          const fixLabel = w.fixIsGenericFallback && format !== "html" ? `Fix (generic HTML, adapt to ${format.toUpperCase()} syntax)` : "Fix";
           issueSection += `
   - ${fixLabel}:`;
           issueSection += `
@@ -11990,10 +12079,10 @@ Client-agnostic rendering bugs. Apply each fix directly to the code.
     sections.push(s);
   }
   const formatInstructions = {
-    jsx: `Apply all the fixes listed above to the original email code. Return complete fixed JSX code using @react-email/components. Use Row, Column, Container, Font, Img, Head, and Link components from @react-email/components wherever the fix suggests them. Keep all style values as camelCase JavaScript object properties (e.g. { backgroundColor: "#fff" }). Ensure the result is compatible with ${clientLabel}. Do not remove any content \u2014 only modify the JSX structure and style props needed to fix the issues.`,
-    mjml: `Apply all the fixes listed above to the original email code. Return complete fixed MJML markup. Use MJML-native elements (mj-section, mj-column, mj-text, mj-button, mj-font, mj-style, mj-raw) as indicated in the fixes. Ensure the result is valid MJML that compiles without errors. Ensure the result is compatible with ${clientLabel}. Do not remove any content \u2014 only modify the MJML structure and attributes needed to fix the issues.`,
-    maizzle: `Apply all the fixes listed above to the original email code. Return the complete fixed Maizzle template. Use Tailwind CSS utility classes and Maizzle config settings as indicated in the fixes. Add MSO conditional comment table wrappers where needed for Outlook compatibility. Ensure the result is compatible with ${clientLabel}. Do not remove any content \u2014 only modify the Tailwind classes and HTML structure needed to fix the issues.`,
-    html: `Apply all the fixes listed above to the original email code. Return the complete fixed HTML code. Ensure the result is compatible with ${clientLabel}. Do not remove any content \u2014 only modify the CSS and HTML attributes needed to fix the issues.`
+    jsx: `Apply all the fixes listed above to the original email code. Return complete fixed JSX code using @react-email/components. Use Row, Column, Container, Font, Img, Head, and Link components from @react-email/components wherever the fix suggests them. Keep all style values as camelCase JavaScript object properties (e.g. { backgroundColor: "#fff" }). Ensure the result is compatible with ${clientLabel}. Do not remove any content; only modify the JSX structure and style props needed to fix the issues.`,
+    mjml: `Apply all the fixes listed above to the original email code. Return complete fixed MJML markup. Use MJML-native elements (mj-section, mj-column, mj-text, mj-button, mj-font, mj-style, mj-raw) as indicated in the fixes. Ensure the result is valid MJML that compiles without errors. Ensure the result is compatible with ${clientLabel}. Do not remove any content; only modify the MJML structure and attributes needed to fix the issues.`,
+    maizzle: `Apply all the fixes listed above to the original email code. Return the complete fixed Maizzle template. Use Tailwind CSS utility classes and Maizzle config settings as indicated in the fixes. Add MSO conditional comment table wrappers where needed for Outlook compatibility. Ensure the result is compatible with ${clientLabel}. Do not remove any content; only modify the Tailwind classes and HTML structure needed to fix the issues.`,
+    html: `Apply all the fixes listed above to the original email code. Return the complete fixed HTML code. Ensure the result is compatible with ${clientLabel}. Do not remove any content; only modify the CSS and HTML attributes needed to fix the issues.`
   };
   sections.push(
     `## Instructions
@@ -12125,7 +12214,7 @@ var AI_FIX_SYSTEM_PROMPT = `You are an expert email developer specializing in cr
 Rules:
 - Return ONLY the fixed code inside a single code fence. No explanations before or after.
 - Preserve all existing content, text, links, and visual design.
-- For structural issues (fixType: "structural"), you MUST restructure the HTML \u2014 CSS-only changes will not work.
+- For structural issues (fixType: "structural"), you MUST restructure the HTML; CSS-only changes will not work.
 - Common structural patterns:
   - word-break/overflow-wrap unsupported \u2192 wrap text in <table><tr><td> with constrained width
   - display:flex/grid \u2192 convert to <table> layout (match the original column count and proportions)
@@ -12136,7 +12225,7 @@ Rules:
   - <svg> \u2192 replace with <img> pointing to a hosted PNG
 - For CSS-only issues (fixType: "css"), swap properties or add fallbacks.
 - For "Layout & Visual Issues", apply the provided Fix directly: add the background-color fallback beneath a gradient/image, append a web-safe font to the stack, and constrain fixed widths wider than the frame to width:100% with max-width.
-- Apply ALL fixes from the issues list \u2014 do not skip any.
+- Apply ALL fixes from the issues list: do not skip any.
 - Use the framework syntax specified (JSX/MJML/Maizzle/HTML).
 - For JSX: use camelCase style props, React Email components, and proper TypeScript types.
 - For MJML: use mj-* elements and attributes.
@@ -12547,7 +12636,7 @@ function checkCapsRatio(text) {
     return {
       rule: "caps-ratio",
       severity: "warning",
-      message: `${Math.round(ratio * 100)}% of words are ALL CAPS \u2014 spam filters flag excessive capitalization.`,
+      message: `${Math.round(ratio * 100)}% of words are ALL CAPS; spam filters flag excessive capitalization.`,
       detail: `Found ${capsWords.length} of ${words.length} words in all caps.`
     };
   }
@@ -12562,7 +12651,7 @@ function checkExcessivePunctuation(text) {
     return {
       rule: "excessive-punctuation",
       severity: "warning",
-      message: `Excessive special characters detected (${exclamations} "!", ${dollars} "$") \u2014 common spam trigger.`
+      message: `Excessive special characters detected (${exclamations} "!", ${dollars} "$"), a common spam trigger.`
     };
   }
   return null;
@@ -12604,14 +12693,14 @@ function checkUnsubscribe($, text, options) {
       return {
         rule: "missing-unsubscribe",
         severity: "info",
-        message: "No unsubscribe link found, but email appears transactional \u2014 may not be required.",
+        message: "No unsubscribe link found, but email appears transactional, so it may not be required.",
         detail: `Detected transactional signals: ${signalMatches.join(", ")}${hasOtp ? ", OTP code" : ""}`
       };
     }
     return {
       rule: "missing-unsubscribe",
       severity: "error",
-      message: "No unsubscribe link found \u2014 required by CAN-SPAM and GDPR. Most spam filters penalize this.",
+      message: "No unsubscribe link found; required by CAN-SPAM and GDPR. Most spam filters penalize this.",
       detail: 'Add an <a> link with "unsubscribe" text or href.'
     };
   }
@@ -12661,7 +12750,7 @@ function checkHiddenText($) {
     return {
       rule: "hidden-text",
       severity: "error",
-      message: "Hidden text detected \u2014 major spam filter red flag.",
+      message: "Hidden text detected: a major spam filter red flag.",
       detail
     };
   }
@@ -12684,7 +12773,7 @@ function checkUrlShorteners($) {
         issues.push({
           rule: "url-shortener",
           severity: "warning",
-          message: `URL shortener detected (${shortener}) \u2014 spam filters distrust shortened links.`,
+          message: `URL shortener detected (${shortener}); spam filters distrust shortened links.`,
           detail: href
         });
       }
@@ -12699,7 +12788,7 @@ function checkImageToTextRatio($, text) {
     return {
       rule: "image-only",
       severity: "error",
-      message: `Image-heavy email with almost no text (${text.length} chars, ${images} images) \u2014 likely to be flagged as spam or clipped.`
+      message: `Image-heavy email with almost no text (${text.length} chars, ${images} images), likely to be flagged as spam or clipped.`
     };
   }
   const ratio = images / (text.length / 100);
@@ -12707,7 +12796,7 @@ function checkImageToTextRatio($, text) {
     return {
       rule: "high-image-ratio",
       severity: "warning",
-      message: `High image-to-text ratio (${images} images for ${text.length} chars of text) \u2014 consider adding more text content.`
+      message: `High image-to-text ratio (${images} images for ${text.length} chars of text); consider adding more text content.`
     };
   }
   return null;
@@ -12738,7 +12827,7 @@ function checkDeceptiveLinks($) {
           issues.push({
             rule: "deceptive-link",
             severity: "error",
-            message: `Link text shows "${textDomain}" but links to "${hrefDomain}" \u2014 phishing red flag.`,
+            message: `Link text shows "${textDomain}" but links to "${hrefDomain}": a phishing red flag.`,
             detail: `Text: ${text}
 Href: ${href}`
           });
@@ -12777,7 +12866,7 @@ function checkPhysicalAddress($, text, options) {
   return {
     rule: "missing-physical-address",
     severity: "warning",
-    message: "No physical mailing address detected \u2014 required by CAN-SPAM for marketing emails.",
+    message: "No physical mailing address detected; required by CAN-SPAM for marketing emails.",
     detail: "Include a street address or P.O. Box in the email footer."
   };
 }
@@ -12800,7 +12889,7 @@ function checkAllCapsTitle($) {
     return {
       rule: "all-caps-subject",
       severity: "warning",
-      message: "Email title/subject is ALL CAPS \u2014 common spam indicator."
+      message: "Email title/subject is ALL CAPS: a common spam indicator."
     };
   }
   return null;
@@ -12959,7 +13048,7 @@ function validateLinksFromDom($) {
       issues.push(__spreadValues({
         severity: "warning",
         rule: "protocol-relative",
-        message: "Protocol-relative URL may break in email clients \u2014 use https:// explicitly",
+        message: "Protocol-relative URL may break in email clients; use https:// explicitly",
         href: href.slice(0, 120),
         text: text.slice(0, 80) || "(no text)"
       }, hrefLoc ? { loc: hrefLoc } : {}));
@@ -12968,7 +13057,7 @@ function validateLinksFromDom($) {
       issues.push(__spreadValues({
         severity: "warning",
         rule: "generic-link-text",
-        message: `Link text "${text}" is vague \u2014 use descriptive text for accessibility and engagement`,
+        message: `Link text "${text}" is vague; use descriptive text for accessibility and engagement`,
         href: href.slice(0, 120),
         text
       }, elLoc ? { loc: elLoc } : {}));
@@ -13003,7 +13092,7 @@ function validateLinksFromDom($) {
       issues.push(__spreadValues({
         severity: "info",
         rule: "long-url",
-        message: "URL exceeds 2000 characters \u2014 may be truncated by some email clients",
+        message: "URL exceeds 2000 characters, may be truncated by some email clients",
         href: href.slice(0, 120) + "...",
         text: text.slice(0, 80) || "(no text)"
       }, hrefLoc ? { loc: hrefLoc } : {}));
@@ -13032,7 +13121,7 @@ function validateLinksFromDom($) {
       issues.push({
         severity: "info",
         rule: "duplicate-links",
-        message: `URL appears ${count} times \u2014 consider consolidating`,
+        message: `URL appears ${count} times; consider consolidating`,
         href: href.slice(0, 120)
       });
     }
@@ -13044,6 +13133,8 @@ function validateLinks(html, options) {
 }
 
 // src/accessibility-checker.ts
+var cheerio5 = __toESM(require("cheerio"), 1);
+var csstree6 = __toESM(require("css-tree"), 1);
 var RULE_PENALTY_CAPS = {
   "img-missing-alt": 3,
   "link-generic-text": 3,
@@ -13116,7 +13207,7 @@ function checkImageAlt($) {
         issues.push(__spreadProps(__spreadValues({
           severity: "info",
           rule: "img-empty-alt",
-          message: "Image has empty alt text \u2014 verify it is decorative",
+          message: "Image has empty alt text; verify it is decorative",
           element: describeElement($, el)
         }, locOfAttr(el, "alt") ? { loc: locOfAttr(el, "alt") } : {}), {
           details: "Empty alt is correct for decorative images, but content images need descriptive alt text."
@@ -13191,7 +13282,352 @@ function checkTableAccessibility($) {
   });
   return issues;
 }
-function checkTextSizeAndContrast($) {
+var CLIENT_DEFAULT_BACKGROUND = { r: 255, g: 255, b: 255 };
+var CLIENT_DEFAULT_TEXT = { r: 0, g: 0, b: 0, a: 1 };
+var UNRESOLVABLE_PAINT_RE = /url\(|(?:linear|radial|conic)-gradient\(/i;
+var NON_RENDERING_TAGS = /* @__PURE__ */ new Set(["head", "style", "script", "title", "meta", "link"]);
+var CASCADE_PROPS = /* @__PURE__ */ new Set([
+  "color",
+  "background",
+  "background-color",
+  "background-image",
+  "font-size",
+  "font-weight",
+  // Not for contrast itself, for deciding whether the text renders at all.
+  "display",
+  "visibility",
+  "opacity"
+]);
+var DESKTOP_RENDER = { width: 640, dark: false };
+var MOBILE_RENDER = { width: 375, dark: false };
+var DARK_RENDER = { width: 640, dark: true };
+function mediaPx(raw) {
+  const m = raw.match(/([\d.]+)\s*(px|em|rem)?/i);
+  if (!m) return null;
+  const n = parseFloat(m[1]);
+  if (!Number.isFinite(n)) return null;
+  return (m[2] || "px").toLowerCase() === "px" ? n : n * 16;
+}
+function mediaApplies(prelude, ctx) {
+  const text = prelude.toLowerCase();
+  if (/\bprint\b/.test(text) && !/\bscreen\b/.test(text)) return false;
+  const scheme = text.match(/prefers-color-scheme\s*:\s*(dark|light)/);
+  if (scheme && scheme[1] === "dark" !== ctx.dark) return false;
+  for (const m of text.matchAll(/(max|min)-width\s*:\s*([^)]+)/g)) {
+    const px = mediaPx(m[2]);
+    if (px === null) continue;
+    if (m[1] === "max" ? ctx.width > px : ctx.width < px) return false;
+  }
+  return true;
+}
+var FORWARDING_PSEUDOS = /* @__PURE__ */ new Set(["not", "is", "has", "matches", "any"]);
+function maxSpecificity(list) {
+  let best = [0, 0, 0];
+  list.children.forEach((sel) => {
+    const s = specificityOfSelector(sel);
+    if (moreSpecific(s, best)) best = s;
+  });
+  return best;
+}
+function specificityOfSelector(node) {
+  const acc = [0, 0, 0];
+  if (node.type !== "Selector") return acc;
+  node.children.forEach((child) => {
+    var _a;
+    switch (child.type) {
+      case "IdSelector":
+        acc[0]++;
+        break;
+      case "ClassSelector":
+      case "AttributeSelector":
+        acc[1]++;
+        break;
+      case "TypeSelector":
+        if (child.name !== "*") acc[2]++;
+        break;
+      case "PseudoElementSelector":
+        acc[2]++;
+        break;
+      case "PseudoClassSelector": {
+        const name = child.name.toLowerCase();
+        if (name === "where") break;
+        const inner = (_a = child.children) == null ? void 0 : _a.first;
+        if (inner && inner.type === "SelectorList" && FORWARDING_PSEUDOS.has(name)) {
+          const nested = maxSpecificity(inner);
+          acc[0] += nested[0];
+          acc[1] += nested[1];
+          acc[2] += nested[2];
+          break;
+        }
+        acc[1]++;
+        break;
+      }
+      default:
+        break;
+    }
+  });
+  return acc;
+}
+function specificityFromTokens(selector) {
+  const bare = selector.replace(/\([^)]*\)/g, "").replace(/["'][^"']*["']/g, "");
+  return [
+    (bare.match(/#[\w-]+/g) || []).length,
+    (bare.match(/\.[\w-]+|\[[^\]]*\]|:[\w-]+/g) || []).length,
+    (bare.match(/(?:^|[\s>+~])[a-zA-Z][\w-]*/g) || []).length
+  ];
+}
+function specificityOf(selector) {
+  try {
+    const ast = csstree6.parse(selector, { context: "selector" });
+    return specificityOfSelector(ast);
+  } catch (e) {
+    return specificityFromTokens(selector);
+  }
+}
+function moreSpecific(a, b) {
+  for (let i = 0; i < 3; i++) {
+    if (a[i] !== b[i]) return a[i] > b[i];
+  }
+  return false;
+}
+function wins(next, current) {
+  if (!current) return true;
+  if (next.important !== current.important) return next.important;
+  if (next.presentational !== current.presentational) return current.presentational;
+  if (next.inline !== current.inline) return next.inline;
+  if (moreSpecific(next.specificity, current.specificity)) return true;
+  if (moreSpecific(current.specificity, next.specificity)) return false;
+  return next.order >= current.order;
+}
+function computeCascade($, ctx) {
+  const cascade = /* @__PURE__ */ new Map();
+  let order = 0;
+  const record = (el, prop, decl) => {
+    let props = cascade.get(el);
+    if (!props) {
+      props = /* @__PURE__ */ new Map();
+      cascade.set(el, props);
+    }
+    if (wins(decl, props.get(prop))) props.set(prop, decl);
+  };
+  $("[bgcolor]").each((_, el) => {
+    const value = $(el).attr("bgcolor");
+    if (!value) return;
+    record(el, "background-color", {
+      value,
+      important: false,
+      inline: false,
+      presentational: true,
+      specificity: [0, 0, 0],
+      order: order++
+    });
+  });
+  const handleRule = (node) => {
+    const selectorList = csstree6.generate(node.prelude).trim();
+    if (!selectorList) return;
+    const decls = [];
+    node.block.children.forEach((child) => {
+      if (child.type !== "Declaration") return;
+      const prop = child.property.toLowerCase();
+      if (!CASCADE_PROPS.has(prop)) return;
+      decls.push({ prop, value: csstree6.generate(child.value), important: !!child.important });
+    });
+    if (!decls.length) return;
+    for (const selector of splitTopLevel(selectorList).map((x) => x.trim()).filter(Boolean)) {
+      const specificity = specificityOf(selector);
+      let matched;
+      try {
+        matched = $(selector).toArray();
+      } catch (e) {
+        continue;
+      }
+      for (const el of matched) {
+        for (const d of decls) {
+          record(el, d.prop, __spreadProps(__spreadValues({}, d), {
+            inline: false,
+            presentational: false,
+            specificity,
+            order: order++
+          }));
+        }
+      }
+    }
+  };
+  const visitBlock = (children) => {
+    children.forEach((node) => {
+      if (node.type === "Rule") {
+        handleRule(node);
+        return;
+      }
+      if (node.type !== "Atrule" || node.name.toLowerCase() !== "media" || !node.block) return;
+      const prelude = node.prelude ? csstree6.generate(node.prelude) : "";
+      if (!mediaApplies(prelude, ctx)) return;
+      visitBlock(node.block.children);
+    });
+  };
+  $("style").each((_, styleEl) => {
+    let ast;
+    try {
+      ast = csstree6.parse($(styleEl).text());
+    } catch (e) {
+      return;
+    }
+    if (ast.type !== "StyleSheet") return;
+    visitBlock(ast.children);
+  });
+  $("[style]").each((_, el) => {
+    for (const part of splitStyleDeclarations($(el).attr("style") || "")) {
+      const colon = part.indexOf(":");
+      if (colon === -1) continue;
+      const prop = part.slice(0, colon).trim().toLowerCase();
+      if (!CASCADE_PROPS.has(prop)) continue;
+      let value = part.slice(colon + 1).trim();
+      const important = /!\s*important$/i.test(value);
+      if (important) value = value.replace(/!\s*important$/i, "").trim();
+      record(el, prop, {
+        value,
+        important,
+        inline: true,
+        presentational: false,
+        specificity: [0, 0, 0],
+        order: order++
+      });
+    }
+  });
+  return cascade;
+}
+function paintedColor(value) {
+  if (!value) return null;
+  const solid = backgroundShorthandColor(value);
+  if (solid) {
+    const c = parseColor(solid);
+    if (c && c.a > 0) return [c, ...gradientStops(value)];
+  }
+  const stops = gradientStops(value);
+  if (stops.length) return stops;
+  return UNRESOLVABLE_PAINT_RE.test(value) ? "unknown" : null;
+}
+function asColors(painted) {
+  return painted && painted !== "unknown" ? painted : [];
+}
+function elementBackground(props) {
+  const shorthand = props.get("background");
+  const longhand = props.get("background-color");
+  const image = props.get("background-image");
+  const colorDecl = shorthand && wins(shorthand, longhand) ? shorthand : longhand;
+  const candidates = [
+    ...colorDecl ? asColors(paintedColor(colorDecl.value)) : [],
+    ...image ? asColors(paintedColor(image.value)) : []
+  ];
+  if (candidates.length) return candidates;
+  for (const decl of [colorDecl, image]) {
+    if (decl && UNRESOLVABLE_PAINT_RE.test(decl.value)) return "unknown";
+  }
+  return null;
+}
+function resolveBackground($, el, cascade) {
+  for (const node of [el, ...$(el).parents().toArray()]) {
+    const props = cascade.get(node);
+    if (!props) continue;
+    const painted = elementBackground(props);
+    if (painted !== null) return painted;
+  }
+  return null;
+}
+function isLargeText(size, weight) {
+  const match = size == null ? void 0 : size.match(/^(\d+(?:\.\d+)?)(px|pt)/i);
+  if (!match) return false;
+  const px = match[2].toLowerCase() === "pt" ? parseFloat(match[1]) * 1.333 : parseFloat(match[1]);
+  const w = weight == null ? void 0 : weight.trim().toLowerCase();
+  const bold = w === "bold" || w === "bolder" || !!w && parseInt(w, 10) >= 700;
+  return px >= 18 || px >= 14 && bold;
+}
+function inherited($, el, cascade, prop) {
+  var _a, _b;
+  for (const node of [el, ...$(el).parents().toArray()]) {
+    const value = (_b = (_a = cascade.get(node)) == null ? void 0 : _a.get(prop)) == null ? void 0 : _b.value;
+    if (value) return { value, source: node };
+  }
+  return null;
+}
+function isHiddenText($, el, cascade) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  for (const node of [el, ...$(el).parents().toArray()]) {
+    const props = cascade.get(node);
+    if (!props) continue;
+    const display = (_b = (_a = props.get("display")) == null ? void 0 : _a.value) == null ? void 0 : _b.trim().toLowerCase();
+    if (display === "none") return true;
+    const visibility = (_d = (_c = props.get("visibility")) == null ? void 0 : _c.value) == null ? void 0 : _d.trim().toLowerCase();
+    if (visibility === "hidden" || visibility === "collapse") return true;
+    const opacity = (_f = (_e = props.get("opacity")) == null ? void 0 : _e.value) == null ? void 0 : _f.trim();
+    if (opacity !== void 0 && parseFloat(opacity) === 0) return true;
+    const size = (_h = (_g = props.get("font-size")) == null ? void 0 : _g.value) == null ? void 0 : _h.trim();
+    if (size !== void 0 && /^0(?:px|pt|em|rem|%)?$/i.test(size)) return true;
+  }
+  return $(el).closest("[style*='mso-hide']").length > 0;
+}
+function hasOwnText($, el) {
+  return $(el).contents().toArray().some((n) => n.type === "text" && typeof n.data === "string" && n.data.trim().length > 0);
+}
+function checkContrast($, cascade) {
+  const issues = [];
+  $("*").each((_, el) => {
+    var _a, _b, _c, _d, _e;
+    const tag = (el.tagName || "").toLowerCase();
+    if (NON_RENDERING_TAGS.has(tag)) return;
+    if (!hasOwnText($, el)) return;
+    if (isHiddenText($, el, cascade)) return;
+    const declared = inherited($, el, cascade, "color");
+    const fg = declared ? parseColor(declared.value) : CLIENT_DEFAULT_TEXT;
+    if (!fg) return;
+    const colorValue = (_a = declared == null ? void 0 : declared.value) != null ? _a : "the client default";
+    const background = resolveBackground($, el, cascade);
+    if (background === "unknown") return;
+    const surfaces = background != null ? background : [null];
+    let ratio = Infinity;
+    let worst = "";
+    for (const surface of surfaces) {
+      let { r: bgR, g: bgG, b: bgB } = surface != null ? surface : CLIENT_DEFAULT_BACKGROUND;
+      if (surface && surface.a < 1) {
+        [bgR, bgG, bgB] = alphaBlend(surface, 255, 255, 255);
+      }
+      const [fR, fG, fB] = fg.a < 1 ? alphaBlend(fg, bgR, bgG, bgB) : [fg.r, fg.g, fg.b];
+      const candidate = contrastRatio(relativeLuminance(fR, fG, fB), relativeLuminance(bgR, bgG, bgB));
+      if (candidate < ratio) {
+        ratio = candidate;
+        worst = formatRgb(surface != null ? surface : __spreadProps(__spreadValues({}, CLIENT_DEFAULT_BACKGROUND), { a: 1 }));
+      }
+    }
+    const against = surfaces.length > 1 ? ` (worst gradient stop ${worst})` : "";
+    const large = isLargeText(
+      (_b = inherited($, el, cascade, "font-size")) == null ? void 0 : _b.value,
+      (_c = inherited($, el, cascade, "font-weight")) == null ? void 0 : _c.value
+    );
+    const grade = wcagGrade(ratio);
+    const styleLoc = (_e = locOfAttr((_d = declared == null ? void 0 : declared.source) != null ? _d : el, "style")) != null ? _e : locOfAttr(el, "style");
+    if (grade === "Fail") {
+      issues.push(__spreadProps(__spreadValues({
+        severity: "error",
+        rule: "low-contrast",
+        message: `Low contrast ratio ${ratio.toFixed(1)}:1, fails WCAG minimum`,
+        element: describeElement($, el)
+      }, styleLoc ? { loc: styleLoc } : {}), {
+        details: `Foreground ${colorValue} on background${against} needs at least ${large ? "3:1" : "4.5:1"} contrast ratio.`
+      }));
+    } else if (!large && grade === "AA Large") {
+      issues.push(__spreadProps(__spreadValues({
+        severity: "warning",
+        rule: "low-contrast",
+        message: `Low contrast ratio ${ratio.toFixed(1)}:1, fails WCAG AA for normal text`,
+        element: describeElement($, el)
+      }, styleLoc ? { loc: styleLoc } : {}), {
+        details: `Foreground ${colorValue} on background${against} needs at least 4.5:1 for normal-sized text.`
+      }));
+    }
+  });
+  return issues;
+}
+function checkTextSize($) {
   const issues = [];
   let smallTextCount = 0;
   $("[style]").each((_, el) => {
@@ -13216,67 +13652,6 @@ function checkTextSizeAndContrast($) {
         }
       }
     }
-    const colorValue = getStyleValue(style, "color");
-    if (colorValue) {
-      const fg = parseColor(colorValue);
-      if (fg) {
-        let bgR = 255, bgG = 255, bgB = 255;
-        let current = $(el);
-        let foundBg = false;
-        const elements = [current, ...$(el).parents("[style]").toArray().map((p) => $(p))];
-        for (const ancestor of elements) {
-          const ancestorStyle = (typeof ancestor === "function" ? ancestor : $(ancestor)).attr("style") || "";
-          const bgValue = getStyleValue(ancestorStyle, "background-color");
-          if (bgValue) {
-            const bg = parseColor(bgValue);
-            if (bg && bg.a > 0) {
-              if (bg.a < 1) {
-                [bgR, bgG, bgB] = alphaBlend(bg, 255, 255, 255);
-              } else {
-                bgR = bg.r;
-                bgG = bg.g;
-                bgB = bg.b;
-              }
-              foundBg = true;
-              break;
-            }
-          }
-        }
-        const [fR, fG, fB] = fg.a < 1 ? alphaBlend(fg, bgR, bgG, bgB) : [fg.r, fg.g, fg.b];
-        const fgLum = relativeLuminance(fR, fG, fB);
-        const bgLum = relativeLuminance(bgR, bgG, bgB);
-        const ratio = contrastRatio(fgLum, bgLum);
-        let isLargeText = false;
-        if (fontSizeMatch) {
-          const size = parseFloat(fontSizeMatch[1]);
-          const unit = fontSizeMatch[2].toLowerCase();
-          const pxSize = unit === "pt" ? size * 1.333 : size;
-          const fontWeight = getStyleValue(style, "font-weight");
-          const isBold = fontWeight === "bold" || fontWeight === "bolder" || fontWeight && parseInt(fontWeight, 10) >= 700;
-          isLargeText = pxSize >= 18 || pxSize >= 14 && !!isBold;
-        }
-        const grade = wcagGrade(ratio);
-        if (grade === "Fail") {
-          issues.push(__spreadProps(__spreadValues({
-            severity: "error",
-            rule: "low-contrast",
-            message: `Low contrast ratio ${ratio.toFixed(1)}:1 \u2014 fails WCAG minimum`,
-            element: describeElement($, el)
-          }, styleLoc ? { loc: styleLoc } : {}), {
-            details: `Foreground ${colorValue} on background needs at least ${isLargeText ? "3:1" : "4.5:1"} contrast ratio.`
-          }));
-        } else if (!isLargeText && grade === "AA Large") {
-          issues.push(__spreadProps(__spreadValues({
-            severity: "warning",
-            rule: "low-contrast",
-            message: `Low contrast ratio ${ratio.toFixed(1)}:1 \u2014 fails WCAG AA for normal text`,
-            element: describeElement($, el)
-          }, styleLoc ? { loc: styleLoc } : {}), {
-            details: `Foreground ${colorValue} on background needs at least 4.5:1 for normal-sized text.`
-          }));
-        }
-      }
-    }
   });
   if (smallTextCount > 3) {
     issues.push({
@@ -13336,7 +13711,8 @@ function checkAccessibilityFromDom($) {
   issues.push(...checkImageAlt($));
   issues.push(...checkLinkAccessibility($));
   issues.push(...checkTableAccessibility($));
-  issues.push(...checkTextSizeAndContrast($));
+  issues.push(...checkTextSize($));
+  issues.push(...checkContrast($, computeCascade($, DESKTOP_RENDER)));
   issues.push(...checkSemanticStructure($));
   const charsetIssue = checkCharsetDeclaration($);
   if (charsetIssue) issues.push(charsetIssue);
@@ -13365,6 +13741,76 @@ function checkAccessibilityFromDom($) {
 function checkAccessibility(html, options) {
   return fromHtml(html, EMPTY_ACCESSIBILITY, checkAccessibilityFromDom, options);
 }
+function checkDarkStylesContrastFromDom($, lightIssues) {
+  const baseline = lightIssues != null ? lightIssues : checkContrast($, computeCascade($, DESKTOP_RENDER));
+  const dark = checkContrast($, computeCascade($, DARK_RENDER));
+  return contrastDelta(
+    dark,
+    baseline,
+    "low-contrast-dark",
+    "Dark mode",
+    "This pairing comes from the email's own @media (prefers-color-scheme: dark) block. Clients that honour it (Apple Mail, Superhuman, Thunderbird) render exactly this, so re-colour the text alongside the background."
+  );
+}
+var DARK_CONTRAST_CLIENTS = ["gmail-android", "gmail-ios"];
+function lowContrastOnly(issues) {
+  return issues.filter((i) => i.rule === "low-contrast");
+}
+function contrastDelta(candidates, baseline, rule, prefix, details) {
+  const seen = new Set(lowContrastOnly(baseline).map((i) => i.element));
+  return lowContrastOnly(candidates).filter((issue) => {
+    if (seen.has(issue.element)) return false;
+    seen.add(issue.element);
+    return true;
+  }).map((issue) => __spreadProps(__spreadValues(__spreadValues({
+    severity: issue.severity,
+    rule,
+    message: `${prefix}: ${issue.message}`
+  }, issue.element ? { element: issue.element } : {}), issue.loc ? { loc: issue.loc } : {}), {
+    details
+  }));
+}
+function checkMobileContrastFromDom($, desktopIssues) {
+  const baseline = desktopIssues != null ? desktopIssues : checkContrast($, computeCascade($, DESKTOP_RENDER));
+  const mobile = checkContrast($, computeCascade($, MOBILE_RENDER));
+  return contrastDelta(
+    mobile,
+    baseline,
+    "low-contrast-mobile",
+    "At mobile width",
+    "This colour pairing only appears below the email's breakpoint. Check the contrast of what the media query restyles, not just the desktop palette."
+  );
+}
+function checkMobileContrast(html, options) {
+  return fromHtml(html, [], ($) => checkMobileContrastFromDom($), options);
+}
+function checkDarkModeContrast(html, lightIssues) {
+  if (!html || !html.trim()) return [];
+  const inverted = [];
+  for (const client of DARK_CONTRAST_CLIENTS) {
+    let darkHtml;
+    try {
+      darkHtml = simulateDarkMode(html, client).html;
+    } catch (e) {
+      continue;
+    }
+    const $dark = cheerio5.load(darkHtml);
+    for (const issue of checkContrast($dark, computeCascade($dark, DESKTOP_RENDER))) {
+      const _a = issue, { loc, locs, locsTruncated } = _a, rest = __objRest(_a, ["loc", "locs", "locsTruncated"]);
+      void loc;
+      void locs;
+      void locsTruncated;
+      inverted.push(rest);
+    }
+  }
+  return contrastDelta(
+    inverted,
+    lightIssues != null ? lightIssues : checkAccessibility(html).issues,
+    "low-contrast-dark",
+    "Dark mode",
+    "Clients that force dark mode repaint backgrounds without re-colouring every text layer. Set explicit colours inside @media (prefers-color-scheme: dark), or pick text that holds up on both."
+  );
+}
 
 // src/image-analyzer.ts
 var DATA_URI_WARN_BYTES = 100 * 1024;
@@ -13438,7 +13884,7 @@ function analyzeImagesFromDom($) {
         issues.push(__spreadValues({
           rule: "missing-dimensions",
           severity: "warning",
-          message: "Image missing width/height attributes \u2014 causes layout shifts and Outlook rendering issues.",
+          message: "Image missing width/height attributes, causes layout shifts and Outlook rendering issues.",
           src: truncateSrc(src)
         }, elLoc ? { loc: elLoc } : {}));
       }
@@ -13449,7 +13895,7 @@ function analyzeImagesFromDom($) {
       issues.push(__spreadValues({
         rule: "large-data-uri",
         severity: "warning",
-        message: `Data URI is ${kb}KB \u2014 consider hosting the image externally to reduce email size.`,
+        message: `Data URI is ${kb}KB; consider hosting the image externally to reduce email size.`,
         src: truncateSrc(src)
       }, srcLoc ? { loc: srcLoc } : {}));
     }
@@ -13458,7 +13904,7 @@ function analyzeImagesFromDom($) {
       issues.push(__spreadValues({
         rule: "missing-alt",
         severity: "warning",
-        message: "Image missing alt attribute \u2014 hurts deliverability and accessibility.",
+        message: "Image missing alt attribute, hurts deliverability and accessibility.",
         src: truncateSrc(src)
       }, elLoc ? { loc: elLoc } : {}));
     }
@@ -13467,7 +13913,7 @@ function analyzeImagesFromDom($) {
       issues.push(__spreadValues({
         rule: "webp-format",
         severity: "info",
-        message: "WebP format detected \u2014 not supported by all email clients. Consider PNG or JPEG.",
+        message: "WebP format detected, not supported by all email clients. Consider PNG or JPEG.",
         src: truncateSrc(src)
       }, srcLoc ? { loc: srcLoc } : {}));
     }
@@ -13476,7 +13922,7 @@ function analyzeImagesFromDom($) {
       issues.push(__spreadValues({
         rule: "svg-format",
         severity: "info",
-        message: "SVG format detected \u2014 not supported by most email clients. Use PNG instead.",
+        message: "SVG format detected, not supported by most email clients. Use PNG instead.",
         src: truncateSrc(src)
       }, srcLoc ? { loc: srcLoc } : {}));
     }
@@ -13485,7 +13931,7 @@ function analyzeImagesFromDom($) {
       issues.push(__spreadValues({
         rule: "missing-display-block",
         severity: "info",
-        message: "Image without display:block \u2014 may cause unwanted gaps in Outlook.",
+        message: "Image without display:block, may cause unwanted gaps in Outlook.",
         src: truncateSrc(src)
       }, elLoc ? { loc: elLoc } : {}));
     }
@@ -13504,7 +13950,7 @@ function analyzeImagesFromDom($) {
     issues.push({
       rule: "high-image-count",
       severity: "info",
-      message: `Email contains ${nonTrackingImages.length} images \u2014 heavy emails may be clipped or load slowly.`
+      message: `Email contains ${nonTrackingImages.length} images; heavy emails may be clipped or load slowly.`
     });
   }
   const trackingPixels = images.filter((i) => i.isTrackingPixel);
@@ -13520,7 +13966,7 @@ function analyzeImagesFromDom($) {
     issues.push({
       rule: "total-data-uri-size",
       severity: "warning",
-      message: `Total data URI size is ${kb}KB \u2014 consider hosting images externally to reduce email size.`
+      message: `Total data URI size is ${kb}KB; consider hosting images externally to reduce email size.`
     });
   }
   return { total: images.length, totalDataUriBytes, issues, images };
@@ -13561,7 +14007,7 @@ function extractInboxPreviewFromDom($) {
     issues.push({
       rule: "subject-too-long",
       severity: "warning",
-      message: `Subject is ${subjectLength} characters \u2014 may be truncated in inboxes (recommended: ${MAX_SUBJECT_LENGTH} or fewer).`
+      message: `Subject is ${subjectLength} characters, and may be truncated in inboxes (recommended: ${MAX_SUBJECT_LENGTH} or fewer).`
     });
   }
   const preheader = extractPreheaderText($);
@@ -13576,27 +14022,27 @@ function extractInboxPreviewFromDom($) {
     issues.push({
       rule: "preheader-too-short",
       severity: "warning",
-      message: `Preheader is only ${preheaderLength} characters \u2014 email clients may backfill with body text (recommended: ${MIN_PREHEADER_LENGTH}+).`
+      message: `Preheader is only ${preheaderLength} characters, so email clients may backfill with body text (recommended: ${MIN_PREHEADER_LENGTH}+).`
     });
   } else if (preheaderLength > MAX_PREHEADER_LENGTH) {
     issues.push({
       rule: "preheader-too-long",
       severity: "info",
-      message: `Preheader is ${preheaderLength} characters \u2014 most clients show 40\u2013100 characters. Text beyond that is hidden.`
+      message: `Preheader is ${preheaderLength} characters; most clients show 40\u2013100 characters. Text beyond that is hidden.`
     });
   }
   if (hasZwnjPadding($)) {
     issues.push({
       rule: "zwnj-padding",
       severity: "info",
-      message: "Preheader uses &zwnj;&nbsp; padding hack \u2014 works in most clients but may show garbled text in some."
+      message: "Preheader uses &zwnj;&nbsp; padding hack, works in most clients but may show garbled text in some."
     });
   }
   if (subject && EMOJI_PATTERN.test(subject)) {
     issues.push({
       rule: "emoji-in-subject",
       severity: "info",
-      message: "Subject line contains emoji \u2014 renders inconsistently across email clients and may trigger spam filters."
+      message: "Subject line contains emoji, renders inconsistently across email clients and may trigger spam filters."
     });
   }
   const truncation = computeTruncation(subject, preheader);
@@ -13727,14 +14173,14 @@ function checkSizeFromDom(_$, html) {
     issues.push({
       rule: "gmail-clipped",
       severity: "error",
-      message: `Email is ${humanSize} \u2014 Gmail will clip it at ~102 KB. Recipients see a "View entire message" link instead of your content.`,
+      message: `Email is ${humanSize}; Gmail will clip it at ~102 KB. Recipients see a "View entire message" link instead of your content.`,
       detail: `${htmlBytes} bytes exceeds the ${GMAIL_CLIP_THRESHOLD} byte threshold.`
     });
   } else if (htmlBytes > GMAIL_CLIP_WARNING_THRESHOLD) {
     issues.push({
       rule: "gmail-clip-warning",
       severity: "warning",
-      message: `Email is ${humanSize} \u2014 approaching Gmail's ~102 KB clip threshold. Consider trimming.`,
+      message: `Email is ${humanSize}, approaching Gmail's ~102 KB clip threshold. Consider trimming.`,
       detail: `${htmlBytes} bytes is within ${GMAIL_CLIP_THRESHOLD - htmlBytes} bytes of the clip threshold.`
     });
   }
@@ -13852,7 +14298,7 @@ function checkTemplateVariables(html, options) {
 }
 
 // src/overflow-checker.ts
-var csstree6 = __toESM(require("css-tree"), 1);
+var csstree7 = __toESM(require("css-tree"), 1);
 function fixedPxWidth($el) {
   const style = $el.attr("style") || "";
   const styleMatch = style.match(/(?:^|[;\s])width\s*:\s*(\d+)px/i);
@@ -13874,7 +14320,7 @@ function addWidthIssue(width, label, issues, seen, loc) {
   const issue = __spreadValues({
     rule: "fixed-width-overflow",
     severity: "warning",
-    message: `${label} has a fixed width of ${width}px, wider than the ${EMAIL_MAX_WIDTH}px email frame \u2014 it will force horizontal scrolling, especially on mobile.`,
+    message: `${label} has a fixed width of ${width}px, wider than the ${EMAIL_MAX_WIDTH}px email frame; it will force horizontal scrolling, especially on mobile.`,
     detail: `Use width:100% with max-width:${EMAIL_MAX_WIDTH}px instead of a fixed width beyond the frame.`
   }, loc ? { loc, locs: [loc] } : {});
   seen.set(key, issue);
@@ -13928,11 +14374,11 @@ function checkOverflowFromDom($, source) {
     const anchor = cssBlockAnchor(el, cssText, source);
     let ast;
     try {
-      ast = csstree6.parse(cssText, { positions: true });
+      ast = csstree7.parse(cssText, { positions: true });
     } catch (e) {
       return;
     }
-    csstree6.walk(ast, {
+    csstree7.walk(ast, {
       visit: "Rule",
       enter(node) {
         if (node.type !== "Rule") return;
@@ -13942,7 +14388,7 @@ function checkOverflowFromDom($, source) {
         node.block.children.forEach((child) => {
           if (child.type !== "Declaration") return;
           const prop = child.property.toLowerCase();
-          const val = csstree6.generate(child.value);
+          const val = csstree7.generate(child.value);
           if (prop === "width") {
             const m = val.match(/^(\d+)px$/);
             if (m) {
@@ -13955,7 +14401,7 @@ function checkOverflowFromDom($, source) {
           }
         });
         if (widthPx !== null && widthPx > EMAIL_MAX_WIDTH && !fluid) {
-          const selector = csstree6.generate(node.prelude).trim().slice(0, 40);
+          const selector = csstree7.generate(node.prelude).trim().slice(0, 40);
           addWidthIssue(widthPx, selector || "rule", issues, seen, widthLoc);
         }
       }
@@ -13999,7 +14445,7 @@ function checkOverflow(html, options) {
 }
 
 // src/visual-checker.ts
-var csstree7 = __toESM(require("css-tree"), 1);
+var csstree8 = __toESM(require("css-tree"), 1);
 var CSS_WIDE_KEYWORDS = /* @__PURE__ */ new Set(["inherit", "initial", "unset", "revert", "revert-layer"]);
 var GRADIENT_RE = /(?:linear|radial|conic)-gradient\(/i;
 function isSolidColor(value) {
@@ -14072,7 +14518,7 @@ function inspectDeclarations(style, issues, seen, locs) {
       const issue = __spreadValues({
         rule: "missing-background-fallback",
         severity: "warning",
-        message: `${isGradient ? "Gradient" : "Background image"} has no background-color fallback \u2014 it renders as a blank area (and can hide overlaid text) in Outlook and other clients that drop image backgrounds.`,
+        message: `${isGradient ? "Gradient" : "Background image"} has no background-color fallback; it renders as a blank area (and can hide overlaid text) in Outlook and other clients that drop image backgrounds.`,
         detail: isGradient ? `Add a solid fallback beneath the gradient using its first colour stop.` : `Add a solid background-color so the area still has colour when the image is dropped.`,
         fix
       }, loc ? { loc, locs: [loc] } : {});
@@ -14092,7 +14538,7 @@ function inspectDeclarations(style, issues, seen, locs) {
       const issue = __spreadValues({
         rule: "missing-font-fallback",
         severity: "warning",
-        message: `font-family "${font.trim()}" has no web-safe fallback \u2014 clients that strip web fonts (Gmail, Outlook) fall back to Times New Roman.`,
+        message: `font-family "${font.trim()}" has no web-safe fallback; clients that strip web fonts (Gmail, Outlook) fall back to Times New Roman.`,
         detail: `End the stack with a web-safe font and a generic family.`,
         fix
       }, loc ? { loc, locs: [loc] } : {});
@@ -14105,7 +14551,7 @@ function ruleToMap(node) {
   const map = /* @__PURE__ */ new Map();
   node.block.children.forEach((child) => {
     if (child.type === "Declaration") {
-      map.set(child.property.toLowerCase(), csstree7.generate(child.value));
+      map.set(child.property.toLowerCase(), csstree8.generate(child.value));
     }
   });
   return map;
@@ -14124,11 +14570,11 @@ function checkVisualFromDom($, source) {
     const anchor = cssBlockAnchor(el, cssText, source);
     let ast;
     try {
-      ast = csstree7.parse(cssText, { positions: true });
+      ast = csstree8.parse(cssText, { positions: true });
     } catch (e) {
       return;
     }
-    csstree7.walk(ast, {
+    csstree8.walk(ast, {
       visit: "Rule",
       enter(node) {
         if (node.type !== "Rule") return;
@@ -14153,6 +14599,169 @@ function checkVisual(html, options) {
   );
 }
 
+// src/design-consistency.ts
+var csstree9 = __toESM(require("css-tree"), 1);
+var SAME_COLOUR_DISTANCE = 0.02;
+var LIMITS = {
+  fontSize: 8,
+  fontFamily: 2,
+  radius: 3
+};
+var NON_COLOURS = /* @__PURE__ */ new Set(["transparent", "inherit", "initial", "unset", "currentcolor", "none"]);
+var TRACKED = {
+  "color": "colors",
+  "background-color": "backgrounds",
+  "background": "backgrounds",
+  "font-size": "fontSizes",
+  "font-family": "fontFamilies",
+  "border-radius": "radii"
+};
+function primaryTypeface(value) {
+  var _a;
+  return ((_a = value.split(",")[0]) != null ? _a : "").replace(/['"]/g, "").trim().toLowerCase();
+}
+function radiusLengths(value) {
+  const lengths = value.trim().toLowerCase().split(/[\s/]+/).filter(Boolean);
+  return lengths.filter((v) => {
+    if (/^0(?:px|rem|em|%)?$/.test(v)) return false;
+    if (v === "50%") return false;
+    const px = parseFloat(v);
+    return !(v.endsWith("px") && Number.isFinite(px) && px >= 500);
+  });
+}
+function collect($) {
+  const found = {
+    colors: [],
+    backgrounds: [],
+    fontSizes: [],
+    fontFamilies: [],
+    radii: []
+  };
+  const record = (prop, rawValue) => {
+    const bucket = TRACKED[prop.toLowerCase()];
+    if (!bucket) return;
+    const value = rawValue.trim();
+    if (!value) return;
+    found[bucket].push(value);
+  };
+  $("[style]").each((_, el) => {
+    for (const part of splitStyleDeclarations($(el).attr("style") || "")) {
+      const colon = part.indexOf(":");
+      if (colon === -1) continue;
+      record(part.slice(0, colon), part.slice(colon + 1));
+    }
+  });
+  $("style").each((_, el) => {
+    let ast;
+    try {
+      ast = csstree9.parse($(el).text());
+    } catch (e) {
+      return;
+    }
+    csstree9.walk(ast, {
+      visit: "Declaration",
+      enter(node) {
+        if (node.type !== "Declaration") return;
+        record(node.property, csstree9.generate(node.value));
+      }
+    });
+  });
+  return found;
+}
+function driftClusters(values) {
+  const byNormalised = /* @__PURE__ */ new Map();
+  for (const raw of values) {
+    const value = raw.trim();
+    if (NON_COLOURS.has(value.toLowerCase())) continue;
+    const rgb = parseColor(value);
+    if (!rgb || rgb.a === 0) continue;
+    const key = formatRgb(__spreadProps(__spreadValues({}, rgb), { a: 1 }));
+    const entry = byNormalised.get(key);
+    if (entry) entry.spellings.add(value);
+    else byNormalised.set(key, { spellings: /* @__PURE__ */ new Set([value]), rgb });
+  }
+  const distinct = [...byNormalised.entries()];
+  const clusters = [];
+  const claimed = /* @__PURE__ */ new Set();
+  for (let i = 0; i < distinct.length; i++) {
+    const [keyA, a] = distinct[i];
+    if (claimed.has(keyA)) continue;
+    const cluster = [keyA];
+    for (let j = i + 1; j < distinct.length; j++) {
+      const [keyB, b] = distinct[j];
+      if (claimed.has(keyB)) continue;
+      if (!a.rgb || !b.rgb) continue;
+      if (colorDistance(a.rgb, b.rgb) < SAME_COLOUR_DISTANCE) {
+        cluster.push(keyB);
+        claimed.add(keyB);
+      }
+    }
+    claimed.add(keyA);
+    if (cluster.length > 1) clusters.push(cluster);
+  }
+  return clusters;
+}
+function distinctValues(values, normalise) {
+  const seen = /* @__PURE__ */ new Map();
+  for (const raw of values) {
+    const key = normalise(raw);
+    if (!key) continue;
+    if (!seen.has(key)) seen.set(key, raw.trim());
+  }
+  return [...seen.values()];
+}
+function checkDesignConsistencyFromDom($) {
+  const found = collect($);
+  const issues = [];
+  const colors = distinctValues(found.colors, (v) => {
+    const c = parseColor(v.trim());
+    return c ? formatRgb(__spreadProps(__spreadValues({}, c), { a: 1 })) : "";
+  });
+  const backgrounds = distinctValues(found.backgrounds, (v) => {
+    const c = parseColor(v.trim());
+    return c ? formatRgb(__spreadProps(__spreadValues({}, c), { a: 1 })) : "";
+  });
+  const fontSizes = distinctValues(found.fontSizes, (v) => v.trim().toLowerCase());
+  const fontFamilies = distinctValues(found.fontFamilies, primaryTypeface);
+  const radii = distinctValues(found.radii.flatMap(radiusLengths), (v) => v);
+  for (const cluster of driftClusters([...found.colors, ...found.backgrounds])) {
+    issues.push({
+      rule: "colour-drift",
+      severity: "info",
+      message: `${cluster.length} near-identical colours are used where one was probably meant: ${cluster.join(", ")}.`,
+      detail: "These render as the same colour to a reader, so the difference is drift rather than a choice. Pick one and use it everywhere.",
+      values: cluster
+    });
+  }
+  const overflowing = [
+    ["font sizes", fontSizes, LIMITS.fontSize, "Settle on a type scale and reuse it; every extra size is one more thing to keep in step."],
+    ["typefaces", fontFamilies, LIMITS.fontFamily, "Email clients strip most web fonts anyway, so each extra typeface mostly adds fallback risk."],
+    ["corner radii", radii, LIMITS.radius, "Corner rounding reads as a single decision; several close values look like an accident."]
+  ];
+  for (const [label, values, limit, detail] of overflowing) {
+    if (values.length <= limit) continue;
+    issues.push({
+      rule: "too-many-values",
+      severity: "info",
+      message: `${values.length} distinct ${label} in one email: ${values.slice(0, 10).join(", ")}${values.length > 10 ? ", \u2026" : ""}.`,
+      detail,
+      values
+    });
+  }
+  return {
+    issues,
+    palette: { colors, backgrounds, fontSizes, fontFamilies, radii }
+  };
+}
+function checkDesignConsistency(html, options) {
+  return fromHtml(
+    html,
+    { issues: [], palette: { colors: [], backgrounds: [], fontSizes: [], fontFamilies: [], radii: [] } },
+    checkDesignConsistencyFromDom,
+    options
+  );
+}
+
 // src/audit.ts
 var EMPTY_AUDIT = {
   compatibility: { warnings: [], scores: {} },
@@ -14164,8 +14773,19 @@ var EMPTY_AUDIT = {
   size: EMPTY_SIZE,
   templateVariables: EMPTY_TEMPLATE,
   overflow: EMPTY_OVERFLOW,
-  visual: EMPTY_VISUAL
+  visual: EMPTY_VISUAL,
+  darkContrast: [],
+  mobileContrast: [],
+  design: EMPTY_DESIGN
 };
+function dedupeByElement(issues) {
+  const seen = /* @__PURE__ */ new Set();
+  return issues.filter((issue) => {
+    if (seen.has(issue.element)) return false;
+    seen.add(issue.element);
+    return true;
+  });
+}
 function runAudit($, html, framework, options) {
   var _a;
   const skip = new Set((_a = options == null ? void 0 : options.skip) != null ? _a : []);
@@ -14181,16 +14801,22 @@ function runAudit($, html, framework, options) {
   const templateVariables = skip.has("templateVariables") ? EMPTY_TEMPLATE : checkTemplateVariablesFromDom($, source);
   const overflow = skip.has("overflow") ? EMPTY_OVERFLOW : checkOverflowFromDom($, source);
   const visual = skip.has("visual") ? EMPTY_VISUAL : checkVisualFromDom($, source);
-  return { compatibility: { warnings, scores }, spam, links, accessibility, images, inboxPreview, size, templateVariables, overflow, visual };
+  const darkContrast = skip.has("darkContrast") || skip.has("accessibility") ? [] : dedupeByElement([
+    ...checkDarkModeContrast(html, accessibility.issues),
+    ...checkDarkStylesContrastFromDom($, accessibility.issues)
+  ]);
+  const design = skip.has("design") ? EMPTY_DESIGN : checkDesignConsistencyFromDom($);
+  const mobileContrast = skip.has("mobileContrast") || skip.has("accessibility") ? [] : checkMobileContrastFromDom($, accessibility.issues);
+  return { compatibility: { warnings, scores }, spam, links, accessibility, images, inboxPreview, size, templateVariables, overflow, visual, darkContrast, mobileContrast, design };
 }
 function auditEmail(html, options) {
   return fromHtml(html, EMPTY_AUDIT, ($, h) => runAudit($, h, options == null ? void 0 : options.framework, options), options);
 }
 
 // src/plain-text.ts
-var cheerio5 = __toESM(require("cheerio"), 1);
+var cheerio6 = __toESM(require("cheerio"), 1);
 function toPlainText(html) {
-  const $ = cheerio5.load(html);
+  const $ = cheerio6.load(html);
   $("style, script, head").remove();
   $("[data-skip-in-text='true']").remove();
   const lines = [];
@@ -14225,7 +14851,7 @@ function toPlainText(html) {
     if (trimmed) lines.push(trimmed);
     currentLine = "";
   }
-  function walk8(node) {
+  function walk9(node) {
     var _a;
     if (node.type === "text") {
       const text = node.data.replace(/\s+/g, " ");
@@ -14274,7 +14900,7 @@ function toPlainText(html) {
       currentLine = "- ";
     }
     for (const child of el.children) {
-      walk8(child);
+      walk9(child);
     }
     if (isBlock) flushLine();
   }
@@ -14282,7 +14908,7 @@ function toPlainText(html) {
   const root = body.length ? body[0] : $.root()[0];
   if (root && "children" in root) {
     for (const child of root.children) {
-      walk8(child);
+      walk9(child);
     }
   }
   flushLine();
@@ -14407,10 +15033,15 @@ var CompileError = class extends Error {
   auditEmail,
   caveatApplies,
   checkAccessibility,
+  checkDarkModeContrast,
+  checkDarkStylesContrastFromDom,
+  checkDesignConsistency,
+  checkMobileContrast,
   checkOverflow,
   checkSize,
   checkTemplateVariables,
   checkVisual,
+  colorDistance,
   contrastRatio,
   createSession,
   diffResults,
@@ -14429,6 +15060,7 @@ var CompileError = class extends Error {
   heuristicTokenCount,
   parseColor,
   relativeLuminance,
+  rgbToOklab,
   simulateDarkMode,
   structuralWarnings,
   toPlainText,