docgen-utils 1.0.11 → 1.0.13

package/dist/packages/docs/parse-css.js

@@ -0,0 +1,1592 @@
+import { extractFirstGradientColor, extractHexColor, extractPrimaryFont, parseGradient } from "./parse-colors";
+/**
+ * Remove @media blocks from CSS text by tracking brace nesting.
+ * This properly handles nested braces within media queries.
+ */
+export function removeMediaQueries(cssText) {
+    let result = "";
+    let i = 0;
+    while (i < cssText.length) {
+        // Check for @media at current position
+        if (cssText.substring(i, i + 6).toLowerCase() === "@media") {
+            // Find the opening brace
+            let braceStart = cssText.indexOf("{", i);
+            if (braceStart === -1) {
+                // Malformed CSS, include rest as-is
+                result += cssText.substring(i);
+                break;
+            }
+            // Track brace depth to find matching closing brace
+            let depth = 1;
+            let j = braceStart + 1;
+            while (j < cssText.length && depth > 0) {
+                if (cssText[j] === "{") {
+                    depth++;
+                }
+                else if (cssText[j] === "}") {
+                    depth--;
+                }
+                j++;
+            }
+            // Skip the entire @media block (from @media to matching })
+            i = j;
+        }
+        else {
+            result += cssText[i];
+            i++;
+        }
+    }
+    return result;
+}
+export function parseCssContext(doc) {
+    const variables = new Map();
+    const classColors = new Map();
+    const calloutStyles = new Map();
+    const classStyles = new Map();
+    const elementStyles = new Map();
+    const nestedStyles = new Map();
+    // Helper to resolve CSS variable or return value as-is
+    // Handles multiple var() references in a single value (e.g., "var(--a) var(--b)")
+    const resolveValue = (value) => {
+        // Replace all var() references with their resolved values
+        // Supports var(--name) and var(--name, fallback) syntax
+        return value.replace(/var\s*\(\s*(--[a-zA-Z0-9-]+)\s*(?:,\s*([^)]+))?\s*\)/g, (match, varName, fallback) => {
+            const resolved = variables.get(varName);
+            if (resolved)
+                return resolved;
+            if (fallback)
+                return fallback.trim();
+            return match; // Keep original if not found
+        });
+    };
+    // Find all style elements
+    const styleElements = doc.querySelectorAll("style");
+    for (const styleEl of styleElements) {
+        let cssText = styleEl.textContent || "";
+        // Remove media queries to avoid mobile-specific styles overriding desktop defaults
+        // Use a function-based approach to correctly handle nested braces
+        cssText = removeMediaQueries(cssText);
+        // Extract CSS variables from :root { --name: value; }
+        // Use matchAll to handle multiple :root blocks (e.g., from concatenated stylesheets)
+        const rootMatches = cssText.matchAll(/:root\s*\{([^}]+)\}/g);
+        for (const rootMatch of rootMatches) {
+            const rootContent = rootMatch[1];
+            const varMatches = rootContent.matchAll(/--([a-zA-Z0-9-]+)\s*:\s*([^;]+)/g);
+            for (const match of varMatches) {
+                const varName = `--${match[1]}`;
+                const varValue = match[2].trim();
+                variables.set(varName, varValue);
+            }
+        }
+        // Also extract CSS variables from theme classes (e.g., .theme-professional)
+        // These are commonly used to scope CSS variables to body elements
+        const themeClassMatches = cssText.matchAll(/\.theme-[a-zA-Z0-9_-]+\s*\{([^}]+)\}/g);
+        for (const themeMatch of themeClassMatches) {
+            const themeContent = themeMatch[1];
+            const varMatches = themeContent.matchAll(/--([a-zA-Z0-9-]+)\s*:\s*([^;]+)/g);
+            for (const match of varMatches) {
+                const varName = `--${match[1]}`;
+                const varValue = match[2].trim();
+                // Only set if not already defined (prefer :root values)
+                if (!variables.has(varName)) {
+                    variables.set(varName, varValue);
+                }
+            }
+        }
+        // Extract class color rules: .classname { color: value; }
+        // Matches single or comma-separated class selectors: .class1, .class2 { ... }
+        // Uses a broad regex to capture the full selector list and rule body.
+        // Handles pseudo-class selectors by filtering them in the processing loop.
+        const classRuleMatches = cssText.matchAll(/(?:^|[;\n}])\s*((?:\.[\w-]+(?:[:\w()\-]*)?(?:\s*,\s*)?)+)\s*(\{[^}]+\})/gm);
+        for (const match of classRuleMatches) {
+            const fullMatch = match[0];
+            const selectorList = match[1];
+            const ruleBlock = match[2];
+            const ruleContent = ruleBlock.slice(1, -1); // Remove { }
+            // Split comma-separated selectors and process each one
+            const selectors = selectorList.split(/\s*,\s*/).map(s => s.trim()).filter(s => s.startsWith('.'));
+            const classNames = [];
+            for (const selector of selectors) {
+                // Skip pseudo-class selectors like .foo:hover, .foo:focus, .foo:active, .foo:visited
+                if (selector.match(/:(?:hover|focus|active|visited|focus-within|focus-visible)\b/)) {
+                    continue;
+                }
+                // Skip pseudo-element selectors like .foo::before, .foo::after
+                if (selector.match(/::(?:before|after|first-line|first-letter|placeholder|selection)\b/)) {
+                    continue;
+                }
+                // Extract class name(s) - handles compound selectors like .classA.classB
+                // For compound selectors, we extract ALL class parts
+                const allClassParts = [...selector.matchAll(/\.([a-zA-Z0-9_-]+)/g)].map(m => m[1]);
+                if (allClassParts.length === 0)
+                    continue;
+                if (allClassParts.length === 1) {
+                    // Simple selector: .classA
+                    classNames.push(allClassParts[0]);
+                }
+                else {
+                    // Compound selector: .classA.classB - store under a compound key
+                    // Sort to ensure consistent key regardless of order in CSS
+                    const compoundKey = allClassParts.sort().join('.');
+                    classNames.push(compoundKey);
+                }
+            }
+            if (classNames.length === 0)
+                continue;
+            // Skip if this looks like a nested selector (has another selector before it)
+            // Check if the match is preceded by another class, element, or ID selector on the same line
+            // This catches ".parent .child", "figure.parent .child", "#id .child", "div .child" etc.
+            const precedingText = cssText.substring(0, match.index).split('\n').pop() || '';
+            if (precedingText.match(/(?:\.[a-zA-Z0-9_-]+|#[a-zA-Z0-9_-]+|[a-zA-Z][a-zA-Z0-9]*)\s*$/)) {
+                // This is a nested selector like ".parent .child { ... }" - skip it here
+                // Nested selectors will be handled by storing parent-child relationships
+                continue;
+            }
+            // Extract ALL style properties for this class (generalized approach)
+            const style = {};
+            // Text color
+            const colorMatch = ruleContent.match(/(?:^|;)\s*color\s*:\s*([^;]+)/i);
+            if (colorMatch) {
+                const colorValue = resolveValue(colorMatch[1].trim());
+                for (const className of classNames) {
+                    classColors.set(className, colorValue);
+                }
+                style.color = colorValue;
+            }
+            // Background color
+            const bgMatch = ruleContent.match(/background(?:-(?:color|image))?\s*:\s*([^;]+)/i);
+            if (bgMatch) {
+                const bgValue = resolveValue(bgMatch[1].trim());
+                // For gradient backgrounds, extract the first color as fallback for DOCX
+                // Also store the full gradient for containers that support gradient rendering
+                const gradientColor = extractFirstGradientColor(bgValue);
+                if (gradientColor) {
+                    style.backgroundColor = gradientColor;
+                    // Parse full gradient for container backgrounds (not text gradients)
+                    const gradient = parseGradient(bgValue);
+                    if (gradient) {
+                        style.backgroundGradient = gradient;
+                    }
+                }
+                else {
+                    style.backgroundColor = bgValue;
+                }
+            }
+            // Gradient text detection: when background-clip: text is used with a gradient background,
+            // extract the first color from the gradient as fallback and also store full gradient
+            const hasBackgroundClipText = ruleContent.match(/(?:-webkit-)?background-clip\s*:\s*text/i);
+            if (hasBackgroundClipText && bgMatch) {
+                const bgValue = resolveValue(bgMatch[1].trim());
+                // Parse full gradient
+                const gradient = parseGradient(bgValue);
+                if (gradient) {
+                    style.gradient = gradient;
+                    // Clear backgroundColor since the gradient is for text fill, NOT paragraph background
+                    // Without this, elements get both a solid purple background shading AND gradient text
+                    style.backgroundColor = undefined;
+                    style.backgroundGradient = undefined;
+                    // Also set fallback color from first stop
+                    if (!style.color) {
+                        style.color = gradient.stops[0]?.color;
+                        if (style.color) {
+                            for (const className of classNames) {
+                                classColors.set(className, style.color);
+                            }
+                        }
+                    }
+                }
+                else {
+                    // Fallback: extract first color if gradient parsing fails
+                    const gradientColor = extractFirstGradientColor(bgValue);
+                    if (gradientColor && !style.color) {
+                        style.color = gradientColor;
+                        for (const className of classNames) {
+                            classColors.set(className, gradientColor);
+                        }
+                    }
+                    // Clear backgroundColor for text gradient
+                    style.backgroundColor = undefined;
+                    style.backgroundGradient = undefined;
+                }
+            }
+            // Border color
+            const borderColorMatch = ruleContent.match(/border-color\s*:\s*([^;]+)/i);
+            if (borderColorMatch) {
+                style.borderColor = resolveValue(borderColorMatch[1].trim());
+            }
+            // Border shorthand (e.g., "1px solid #e5e7eb")
+            const borderMatch = ruleContent.match(/(?:^|;)\s*border\s*:\s*([^;]+)/i);
+            if (borderMatch) {
+                style.border = resolveValue(borderMatch[1].trim());
+            }
+            // Border-left (used by callouts: "4px solid #2563eb")
+            const borderLeftMatch = ruleContent.match(/border-left\s*:\s*([^;]+)/i);
+            if (borderLeftMatch) {
+                const borderLeftValue = resolveValue(borderLeftMatch[1].trim());
+                // If it contains a color, extract it as borderColor
+                const colorInBorder = borderLeftValue.match(/#([0-9a-fA-F]{3,6})/);
+                if (colorInBorder && !style.borderColor) {
+                    style.borderColor = `#${colorInBorder[1]}`;
+                }
+                // Store the full border-left value (but NOT in style.border, which is for
+                // the CSS `border:` shorthand. Previously this was set as a fallback which
+                // could cause border-left-only elements to be misclassified as full-border.)
+                style.borderLeft = borderLeftValue;
+            }
+            // Border-right (used by sidebar dividers, etc.)
+            const borderRightMatch = ruleContent.match(/border-right\s*:\s*([^;]+)/i);
+            if (borderRightMatch) {
+                style.borderRight = resolveValue(borderRightMatch[1].trim());
+            }
+            // Border-bottom (used by title blocks with divider lines)
+            const borderBottomMatch = ruleContent.match(/border-bottom\s*:\s*([^;]+)/i);
+            if (borderBottomMatch) {
+                style.borderBottom = resolveValue(borderBottomMatch[1].trim());
+            }
+            // Border-top (used by footer sections with top divider lines)
+            const borderTopMatch = ruleContent.match(/border-top\s*:\s*([^;]+)/i);
+            if (borderTopMatch) {
+                style.borderTop = resolveValue(borderTopMatch[1].trim());
+            }
+            // Display property (grid, flex, block, etc.)
+            const displayMatch = ruleContent.match(/display\s*:\s*([^;]+)/i);
+            if (displayMatch) {
+                style.display = resolveValue(displayMatch[1].trim());
+            }
+            // Flex property (for flex item sizing like "flex: 1")
+            const flexMatch = ruleContent.match(/(?:^|;)\s*flex\s*:\s*([^;]+)/i);
+            if (flexMatch) {
+                style.flex = resolveValue(flexMatch[1].trim());
+            }
+            // Flex-direction property (for horizontal vs vertical flex containers)
+            const flexDirectionMatch = ruleContent.match(/flex-direction\s*:\s*([^;]+)/i);
+            if (flexDirectionMatch) {
+                style.flexDirection = resolveValue(flexDirectionMatch[1].trim());
+            }
+            // Flex-wrap property (for wrapping behavior)
+            const flexWrapMatch = ruleContent.match(/flex-wrap\s*:\s*([^;]+)/i);
+            if (flexWrapMatch) {
+                style.flexWrap = resolveValue(flexWrapMatch[1].trim());
+            }
+            // Justify-content property (for flex alignment: center, space-between, etc.)
+            const justifyContentMatch = ruleContent.match(/justify-content\s*:\s*([^;]+)/i);
+            if (justifyContentMatch) {
+                style.justifyContent = resolveValue(justifyContentMatch[1].trim());
+            }
+            // Gap property (for flex/grid spacing)
+            const gapMatch = ruleContent.match(/(?:^|;)\s*gap\s*:\s*([^;]+)/i);
+            if (gapMatch) {
+                style.gap = resolveValue(gapMatch[1].trim());
+            }
+            // Grid template columns (for two-column layout detection)
+            const gridColsMatch = ruleContent.match(/grid-template-columns\s*:\s*([^;]+)/i);
+            if (gridColsMatch) {
+                style.gridTemplateColumns = resolveValue(gridColsMatch[1].trim());
+            }
+            // Text alignment
+            const textAlignMatch = ruleContent.match(/text-align\s*:\s*([^;]+)/i);
+            if (textAlignMatch) {
+                style.textAlign = resolveValue(textAlignMatch[1].trim());
+            }
+            // Font size
+            const fontSizeMatch = ruleContent.match(/font-size\s*:\s*([^;]+)/i);
+            if (fontSizeMatch) {
+                style.fontSize = resolveValue(fontSizeMatch[1].trim());
+            }
+            // Font weight
+            const fontWeightMatch = ruleContent.match(/font-weight\s*:\s*([^;]+)/i);
+            if (fontWeightMatch) {
+                style.fontWeight = resolveValue(fontWeightMatch[1].trim());
+            }
+            // Padding shorthand
+            const paddingMatch = ruleContent.match(/(?:^|;)\s*padding\s*:\s*([^;]+)/i);
+            if (paddingMatch) {
+                style.padding = resolveValue(paddingMatch[1].trim());
+            }
+            // Individual padding properties (padding-left, padding-right, etc.)
+            const paddingLeftMatch = ruleContent.match(/padding-left\s*:\s*([^;]+)/i);
+            if (paddingLeftMatch) {
+                style.paddingLeft = resolveValue(paddingLeftMatch[1].trim());
+            }
+            const paddingRightMatch = ruleContent.match(/padding-right\s*:\s*([^;]+)/i);
+            if (paddingRightMatch) {
+                style.paddingRight = resolveValue(paddingRightMatch[1].trim());
+            }
+            const paddingTopMatch = ruleContent.match(/padding-top\s*:\s*([^;]+)/i);
+            if (paddingTopMatch) {
+                style.paddingTop = resolveValue(paddingTopMatch[1].trim());
+            }
+            const paddingBottomMatch = ruleContent.match(/padding-bottom\s*:\s*([^;]+)/i);
+            if (paddingBottomMatch) {
+                style.paddingBottom = resolveValue(paddingBottomMatch[1].trim());
+            }
+            // Font style (italic, normal)
+            const fontStyleMatch = ruleContent.match(/font-style\s*:\s*([^;]+)/i);
+            if (fontStyleMatch) {
+                style.fontStyle = resolveValue(fontStyleMatch[1].trim());
+            }
+            // Font family (extract primary font from font stack)
+            const fontFamilyMatch = ruleContent.match(/font-family\s*:\s*([^;]+)/i);
+            if (fontFamilyMatch) {
+                const resolved = resolveValue(fontFamilyMatch[1].trim());
+                const primaryFont = extractPrimaryFont(resolved);
+                if (primaryFont) {
+                    style.fontFamily = primaryFont;
+                }
+            }
+            // Text indent (e.g., "2rem", "-2rem" for hanging indents)
+            const textIndentMatch = ruleContent.match(/text-indent\s*:\s*([^;]+)/i);
+            if (textIndentMatch) {
+                style.textIndent = resolveValue(textIndentMatch[1].trim());
+            }
+            // Text transform (uppercase, lowercase, capitalize)
+            const textTransformMatch = ruleContent.match(/text-transform\s*:\s*([^;]+)/i);
+            if (textTransformMatch) {
+                style.textTransform = resolveValue(textTransformMatch[1].trim());
+            }
+            // GENERALIZED: Margin-bottom (for paragraph spacing)
+            const marginBottomMatch = ruleContent.match(/margin-bottom\s*:\s*([^;]+)/i);
+            if (marginBottomMatch) {
+                style.marginBottom = resolveValue(marginBottomMatch[1].trim());
+            }
+            // GENERALIZED: Line-height (for vertical spacing within text)
+            const lineHeightMatch = ruleContent.match(/line-height\s*:\s*([^;]+)/i);
+            if (lineHeightMatch) {
+                style.lineHeight = resolveValue(lineHeightMatch[1].trim());
+            }
+            // Letter-spacing (for character spacing)
+            const letterSpacingMatch = ruleContent.match(/letter-spacing\s*:\s*([^;]+)/i);
+            if (letterSpacingMatch) {
+                style.letterSpacing = resolveValue(letterSpacingMatch[1].trim());
+            }
+            // Margin-top (for heading spacing before)
+            const marginTopMatch = ruleContent.match(/margin-top\s*:\s*([^;]+)/i);
+            if (marginTopMatch) {
+                style.marginTop = resolveValue(marginTopMatch[1].trim());
+            }
+            // Store if we found any properties
+            // MERGE with existing styles (later rules can add properties without overwriting)
+            if (Object.keys(style).length > 0) {
+                for (const className of classNames) {
+                    const existing = classStyles.get(className) || {};
+                    classStyles.set(className, { ...existing, ...style });
+                }
+            }
+        }
+        // Parse element.class combined selectors like "dd.dish-description { font-style: italic; }"
+        // These are more specific than just .class, but we store under the class name
+        // since getElementStyles already verifies element type separately
+        const elementClassMatches = cssText.matchAll(/(?:^|[;\n}])\s*([a-zA-Z][a-zA-Z0-9]*)\s*\.\s*([a-zA-Z0-9_-]+)\s*\{([^}]+)\}/gm);
+        for (const match of elementClassMatches) {
+            const elementName = match[1].toLowerCase();
+            const className = match[2];
+            const ruleContent = match[3];
+            // Extract style properties (same as class rules above)
+            const style = {};
+            // Font style (italic, normal)
+            const fontStyleMatch = ruleContent.match(/font-style\s*:\s*([^;]+)/i);
+            if (fontStyleMatch) {
+                style.fontStyle = resolveValue(fontStyleMatch[1].trim());
+            }
+            // Font weight
+            const fontWeightMatch = ruleContent.match(/font-weight\s*:\s*([^;]+)/i);
+            if (fontWeightMatch) {
+                style.fontWeight = resolveValue(fontWeightMatch[1].trim());
+            }
+            // Text color
+            const colorMatch = ruleContent.match(/(?:^|;)\s*color\s*:\s*([^;]+)/i);
+            if (colorMatch) {
+                const colorValue = resolveValue(colorMatch[1].trim());
+                style.color = colorValue;
+            }
+            // Background color
+            const bgMatch = ruleContent.match(/background(?:-(?:color|image))?\s*:\s*([^;]+)/i);
+            if (bgMatch) {
+                const bgValue = resolveValue(bgMatch[1].trim());
+                // For gradient backgrounds, extract the first color as fallback for DOCX
+                // Also store the full gradient for containers that support gradient rendering
+                const gradientColor = extractFirstGradientColor(bgValue);
+                if (gradientColor) {
+                    style.backgroundColor = gradientColor;
+                    // Parse full gradient for container backgrounds
+                    const gradient = parseGradient(bgValue);
+                    if (gradient) {
+                        style.backgroundGradient = gradient;
+                    }
+                }
+                else {
+                    style.backgroundColor = bgValue;
+                }
+            }
+            // Text alignment
+            const textAlignMatch = ruleContent.match(/text-align\s*:\s*([^;]+)/i);
+            if (textAlignMatch) {
+                style.textAlign = resolveValue(textAlignMatch[1].trim());
+            }
+            // Font family (extract primary font from font stack)
+            const fontFamilyMatch = ruleContent.match(/font-family\s*:\s*([^;]+)/i);
+            if (fontFamilyMatch) {
+                const resolved = resolveValue(fontFamilyMatch[1].trim());
+                const primaryFont = extractPrimaryFont(resolved);
+                if (primaryFont) {
+                    style.fontFamily = primaryFont;
+                }
+            }
+            // Store under the class name (merge with existing)
+            if (Object.keys(style).length > 0) {
+                const existing = classStyles.get(className) || {};
+                classStyles.set(className, { ...existing, ...style });
+            }
+        }
+        // Parse nested CSS selectors like ".parent .child { color: ... }" or ".parent element { color: ... }"
+        // Also handles "element.parent .child { ... }" like "figure.menu-image .image-placeholder { ... }"
+        // Store the parent-child relationship so we can look up styles based on context
+        // Supports: .works-cited p { text-indent: -2rem; } or .callout .callout-label { color: ... }
+        // Extended pattern to match:
+        // - .parentClass .child { ... }
+        // - element.parentClass .child { ... }
+        // - .parentClass tr:nth-child(even) { ... }  (pseudo-selectors)
+        // - .parentClass .classA.classB { ... }  (compound child selectors)
+        const nestedSelectorMatches = cssText.matchAll(/(?:[a-zA-Z0-9_-]*)?\.([a-zA-Z0-9_-]+)\s+(\.?[a-zA-Z0-9_-]+(?:\.[a-zA-Z0-9_-]+)*(?::[a-zA-Z0-9_-]+(?:\([^)]*\))?)?)\s*\{([^}]+)\}/g);
+        for (const match of nestedSelectorMatches) {
+            const parentClass = match[1];
+            let childSelector = match[2];
+            // Remove leading dot if present (for .class selectors)
+            if (childSelector.startsWith('.')) {
+                childSelector = childSelector.slice(1);
+            }
+            // Skip interactive pseudo-class selectors (:hover, :focus, :active, :visited)
+            // These states don't exist in static DOCX output
+            if (childSelector.match(/:(?:hover|focus|active|visited|focus-within|focus-visible)\b/)) {
+                continue;
+            }
+            // Strip pseudo-selectors for the map key (e.g., "tr:nth-child(even)" → "tr")
+            const baseChildSelector = childSelector.replace(/:.*$/, '');
+            const ruleContent = match[3];
+            // Extract style properties for the child when inside this parent
+            const style = {};
+            // Text color
+            const colorMatch = ruleContent.match(/(?:^|;)\s*color\s*:\s*([^;]+)/i);
+            if (colorMatch) {
+                style.color = resolveValue(colorMatch[1].trim());
+            }
+            // Background color
+            const bgMatch = ruleContent.match(/background(?:-(?:color|image))?\s*:\s*([^;]+)/i);
+            if (bgMatch) {
+                const bgValue = resolveValue(bgMatch[1].trim());
+                // For gradient backgrounds, extract the first color as fallback for DOCX
+                // Also store the full gradient for containers that support gradient rendering
+                const gradientColor = extractFirstGradientColor(bgValue);
+                if (gradientColor) {
+                    style.backgroundColor = gradientColor;
+                    // Parse full gradient for container backgrounds
+                    const gradient = parseGradient(bgValue);
+                    if (gradient) {
+                        style.backgroundGradient = gradient;
+                    }
+                }
+                else {
+                    style.backgroundColor = bgValue;
+                }
+            }
+            // Gradient text detection: when background-clip: text is used with a gradient background,
+            // extract the first color from the gradient as fallback and also store full gradient
+            const hasBackgroundClipText = ruleContent.match(/(?:-webkit-)?background-clip\s*:\s*text/i);
+            if (hasBackgroundClipText && bgMatch) {
+                const bgValue = resolveValue(bgMatch[1].trim());
+                // Parse full gradient
+                const gradient = parseGradient(bgValue);
+                if (gradient) {
+                    style.gradient = gradient;
+                    // Clear backgroundColor since the gradient is for text fill, NOT paragraph background
+                    style.backgroundColor = undefined;
+                    style.backgroundGradient = undefined;
+                    // Also set fallback color from first stop
+                    if (!style.color) {
+                        style.color = gradient.stops[0]?.color;
+                    }
+                }
+                else {
+                    // Fallback: extract first color if gradient parsing fails
+                    const gradientColor = extractFirstGradientColor(bgValue);
+                    if (gradientColor && !style.color) {
+                        style.color = gradientColor;
+                    }
+                    // Clear backgroundColor for text gradient
+                    style.backgroundColor = undefined;
+                    style.backgroundGradient = undefined;
+                }
+            }
+            // Font weight
+            const fontWeightMatch = ruleContent.match(/font-weight\s*:\s*([^;]+)/i);
+            if (fontWeightMatch) {
+                style.fontWeight = resolveValue(fontWeightMatch[1].trim());
+            }
+            // Text indent (for nested hanging indents like .works-cited p)
+            const textIndentMatch = ruleContent.match(/text-indent\s*:\s*([^;]+)/i);
+            if (textIndentMatch) {
+                style.textIndent = resolveValue(textIndentMatch[1].trim());
+            }
+            // Padding-left (for paragraph indentation in nested contexts)
+            const paddingLeftMatch = ruleContent.match(/padding-left\s*:\s*([^;]+)/i);
+            if (paddingLeftMatch) {
+                style.paddingLeft = resolveValue(paddingLeftMatch[1].trim());
+            }
+            // Padding shorthand (for nested selectors like .card td { padding: 0.75rem })
+            const paddingMatch = ruleContent.match(/(?:^|;)\s*padding\s*:\s*([^;]+)/i);
+            if (paddingMatch) {
+                style.padding = resolveValue(paddingMatch[1].trim());
+            }
+            // Individual padding properties (right, top, bottom)
+            const paddingRightMatch = ruleContent.match(/padding-right\s*:\s*([^;]+)/i);
+            if (paddingRightMatch) {
+                style.paddingRight = resolveValue(paddingRightMatch[1].trim());
+            }
+            const paddingTopMatch = ruleContent.match(/padding-top\s*:\s*([^;]+)/i);
+            if (paddingTopMatch) {
+                style.paddingTop = resolveValue(paddingTopMatch[1].trim());
+            }
+            const paddingBottomMatch = ruleContent.match(/padding-bottom\s*:\s*([^;]+)/i);
+            if (paddingBottomMatch) {
+                style.paddingBottom = resolveValue(paddingBottomMatch[1].trim());
+            }
+            // Font style
+            const fontStyleMatch = ruleContent.match(/font-style\s*:\s*([^;]+)/i);
+            if (fontStyleMatch) {
+                style.fontStyle = resolveValue(fontStyleMatch[1].trim());
+            }
+            // Font family (extract primary font from font stack)
+            const fontFamilyMatch = ruleContent.match(/font-family\s*:\s*([^;]+)/i);
+            if (fontFamilyMatch) {
+                const resolved = resolveValue(fontFamilyMatch[1].trim());
+                const primaryFont = extractPrimaryFont(resolved);
+                if (primaryFont) {
+                    style.fontFamily = primaryFont;
+                }
+            }
+            // Border (full shorthand, e.g., "1px solid #e5e7eb")
+            const borderMatch = ruleContent.match(/(?:^|;)\s*border\s*:\s*([^;]+)/i);
+            if (borderMatch) {
+                style.border = resolveValue(borderMatch[1].trim());
+            }
+            // Border-left (callout styling)
+            const borderLeftMatch = ruleContent.match(/border-left\s*:\s*([^;]+)/i);
+            if (borderLeftMatch) {
+                const borderLeftValue = resolveValue(borderLeftMatch[1].trim());
+                style.borderLeft = borderLeftValue;
+                // Extract color from border value
+                const colorInBorder = borderLeftValue.match(/#([0-9a-fA-F]{3,6})/);
+                if (colorInBorder && !style.borderColor) {
+                    style.borderColor = `#${colorInBorder[1]}`;
+                }
+            }
+            // Border-bottom (heading underline styling, e.g., h2 { border-bottom: 3px solid #7c3aed; })
+            const borderBottomMatch = ruleContent.match(/border-bottom\s*:\s*([^;]+)/i);
+            if (borderBottomMatch) {
+                const borderBottomValue = resolveValue(borderBottomMatch[1].trim());
+                style.borderBottom = borderBottomValue;
+                // Extract color from border value
+                const colorInBorder = borderBottomValue.match(/#([0-9a-fA-F]{3,6})/);
+                if (colorInBorder && !style.borderColor) {
+                    style.borderColor = `#${colorInBorder[1]}`;
+                }
+            }
+            // Border-color (standalone property, e.g., .callout-important { border-color: #f59e0b; })
+            // This handles the pattern where border structure and color are split across rules:
+            //   .callout { border-left: 4px solid; }
+            //   .callout-important { border-color: #f59e0b; }
+            const borderColorMatch = ruleContent.match(/(?:^|;)\s*border-color\s*:\s*([^;]+)/i);
+            if (borderColorMatch) {
+                style.borderColor = resolveValue(borderColorMatch[1].trim());
+            }
+            // Border-top (e.g., .divider { border-top: 2px solid #e5e7eb; })
+            const borderTopMatch = ruleContent.match(/border-top\s*:\s*([^;]+)/i);
+            if (borderTopMatch) {
+                const borderTopValue = resolveValue(borderTopMatch[1].trim());
+                style.borderTop = borderTopValue;
+                const colorInBorder = borderTopValue.match(/#([0-9a-fA-F]{3,6})/);
+                if (colorInBorder && !style.borderColor) {
+                    style.borderColor = `#${colorInBorder[1]}`;
+                }
+            }
+            // Border-right (for nested selectors like .container td { border-right: 1px solid #e5e7eb; })
+            const borderRightMatch = ruleContent.match(/border-right\s*:\s*([^;]+)/i);
+            if (borderRightMatch) {
+                const borderRightValue = resolveValue(borderRightMatch[1].trim());
+                style.borderRight = borderRightValue;
+                const colorInBorder = borderRightValue.match(/#([0-9a-fA-F]{3,6})/);
+                if (colorInBorder && !style.borderColor) {
+                    style.borderColor = `#${colorInBorder[1]}`;
+                }
+            }
+            // Text-transform (uppercase, lowercase, capitalize for headings, labels, etc.)
+            const textTransformMatch = ruleContent.match(/text-transform\s*:\s*([^;]+)/i);
+            if (textTransformMatch) {
+                style.textTransform = resolveValue(textTransformMatch[1].trim());
+            }
+            // Text alignment (left, center, right, justify - for nested selectors like .body p { text-align: justify })
+            const textAlignMatch = ruleContent.match(/text-align\s*:\s*([^;]+)/i);
+            if (textAlignMatch) {
+                style.textAlign = resolveValue(textAlignMatch[1].trim());
+            }
+            // Font size (for nested selectors like .body p { font-size: 1.1rem })
+            const fontSizeMatch = ruleContent.match(/font-size\s*:\s*([^;]+)/i);
+            if (fontSizeMatch) {
+                style.fontSize = resolveValue(fontSizeMatch[1].trim());
+            }
+            // Margin-bottom (for paragraph spacing in nested selectors like .sender-info p { margin-bottom: 0.25rem })
+            const marginBottomMatch = ruleContent.match(/margin-bottom\s*:\s*([^;]+)/i);
+            if (marginBottomMatch) {
+                style.marginBottom = resolveValue(marginBottomMatch[1].trim());
+            }
+            // Line-height (for vertical spacing in nested selectors like .body p { line-height: 1.8 })
+            const lineHeightMatch = ruleContent.match(/line-height\s*:\s*([^;]+)/i);
+            if (lineHeightMatch) {
+                style.lineHeight = resolveValue(lineHeightMatch[1].trim());
+            }
+            // Letter-spacing (for character spacing in nested selectors like .header h1 { letter-spacing: 0.05em })
+            const letterSpacingMatch = ruleContent.match(/letter-spacing\s*:\s*([^;]+)/i);
+            if (letterSpacingMatch) {
+                style.letterSpacing = resolveValue(letterSpacingMatch[1].trim());
+            }
+            // Margin-top (for spacing before elements in nested selectors like .body h2 { margin-top: 1.5rem })
+            const marginTopMatch = ruleContent.match(/margin-top\s*:\s*([^;]+)/i);
+            if (marginTopMatch) {
+                style.marginTop = resolveValue(marginTopMatch[1].trim());
+            }
+            // Store in nestedStyles: parentClass -> (childSelector -> style)
+            // Use baseChildSelector (without pseudo-selectors) as the map key so that
+            // "tr:nth-child(even)" is stored under "tr" and can be found by table processing
+            if (Object.keys(style).length > 0) {
+                if (!nestedStyles.has(parentClass)) {
+                    nestedStyles.set(parentClass, new Map());
+                }
+                const existing = nestedStyles.get(parentClass).get(baseChildSelector) || {};
+                nestedStyles.get(parentClass).set(baseChildSelector, { ...existing, ...style });
+            }
+        }
+        // Parse element type selectors (body, p, h1, h2, h3, h4, h5, h6, etc.)
+        // These are rules like: body { color: var(--color-text); }
+        // or grouped rules like: h1, h2, h3, h4, h5, h6 { color: var(--color-heading); }
+        // IMPORTANT: Only match STANDALONE element selectors, not selectors like ".class p" or "#id p"
+        // The (?:^|[\n\r}]) lookbehind ensures we're after a rule boundary (not part of a complex selector)
+        // We need to be careful to not match ".timeline-content p" as just "p"
+        const elementSelectorPattern = /(?:^|[\n\r}])(\s*(?:body|p|h[1-6]|span|div|ul|ol|li|table|th|td|blockquote|section|article|aside|nav|header|footer|figure|figcaption|address|abbr|a)(?:\s*,\s*(?:body|p|h[1-6]|span|div|ul|ol|li|table|th|td|blockquote|section|article|aside|nav|header|footer|figure|figcaption|address|abbr|a))*)\s*\{([^}]+)\}/gi;
+        const elementMatches = cssText.matchAll(elementSelectorPattern);
+        for (const match of elementMatches) {
+            const selectorList = match[1];
+            const ruleContent = match[2];
+            // Split comma-separated selectors
+            const selectors = selectorList.split(/\s*,\s*/).map(s => s.trim().toLowerCase());
+            // Extract style properties
+            const style = {};
+            // Text color
+            const colorMatch = ruleContent.match(/(?:^|;)\s*color\s*:\s*([^;]+)/i);
+            if (colorMatch) {
+                style.color = resolveValue(colorMatch[1].trim());
+            }
+            // Background color
+            const bgMatch = ruleContent.match(/background(?:-(?:color|image))?\s*:\s*([^;]+)/i);
+            if (bgMatch) {
+                const bgValue = resolveValue(bgMatch[1].trim());
+                // For gradient backgrounds, extract the first color as fallback for DOCX
+                // Also store the full gradient for containers that support gradient rendering
+                const gradientColor = extractFirstGradientColor(bgValue);
+                if (gradientColor) {
+                    style.backgroundColor = gradientColor;
+                    // Parse full gradient for container backgrounds
+                    const gradient = parseGradient(bgValue);
+                    if (gradient) {
+                        style.backgroundGradient = gradient;
+                    }
+                }
+                else {
+                    style.backgroundColor = bgValue;
+                }
+            }
+            // Font size
+            const fontSizeMatch = ruleContent.match(/font-size\s*:\s*([^;]+)/i);
+            if (fontSizeMatch) {
+                style.fontSize = resolveValue(fontSizeMatch[1].trim());
+            }
+            // Font weight
+            const fontWeightMatch = ruleContent.match(/font-weight\s*:\s*([^;]+)/i);
+            if (fontWeightMatch) {
+                style.fontWeight = resolveValue(fontWeightMatch[1].trim());
+            }
+            // Padding (for table cells th, td)
+            const paddingMatch = ruleContent.match(/(?:^|;)\s*padding\s*:\s*([^;]+)/i);
+            if (paddingMatch) {
+                style.padding = resolveValue(paddingMatch[1].trim());
+            }
+            // Individual padding properties
+            const paddingLeftMatch = ruleContent.match(/padding-left\s*:\s*([^;]+)/i);
+            if (paddingLeftMatch) {
+                style.paddingLeft = resolveValue(paddingLeftMatch[1].trim());
+            }
+            const paddingRightMatch = ruleContent.match(/padding-right\s*:\s*([^;]+)/i);
+            if (paddingRightMatch) {
+                style.paddingRight = resolveValue(paddingRightMatch[1].trim());
+            }
+            const paddingTopMatch = ruleContent.match(/padding-top\s*:\s*([^;]+)/i);
+            if (paddingTopMatch) {
+                style.paddingTop = resolveValue(paddingTopMatch[1].trim());
+            }
+            const paddingBottomMatch = ruleContent.match(/padding-bottom\s*:\s*([^;]+)/i);
+            if (paddingBottomMatch) {
+                style.paddingBottom = resolveValue(paddingBottomMatch[1].trim());
+            }
+            // Font style (italic, normal) - for blockquotes
+            const fontStyleMatch = ruleContent.match(/font-style\s*:\s*([^;]+)/i);
+            if (fontStyleMatch) {
+                style.fontStyle = resolveValue(fontStyleMatch[1].trim());
+            }
+            // Font family (extract primary font from font stack) - for body, headings, etc.
+            const fontFamilyMatch = ruleContent.match(/font-family\s*:\s*([^;]+)/i);
+            if (fontFamilyMatch) {
+                const resolved = resolveValue(fontFamilyMatch[1].trim());
+                const primaryFont = extractPrimaryFont(resolved);
+                if (primaryFont) {
+                    style.fontFamily = primaryFont;
+                }
+            }
+            // Text indent (for paragraph first-line indentation)
+            const textIndentMatch = ruleContent.match(/text-indent\s*:\s*([^;]+)/i);
+            if (textIndentMatch) {
+                style.textIndent = resolveValue(textIndentMatch[1].trim());
+            }
+            // Text transform (uppercase, lowercase, capitalize)
+            const textTransformMatch = ruleContent.match(/text-transform\s*:\s*([^;]+)/i);
+            if (textTransformMatch) {
+                style.textTransform = resolveValue(textTransformMatch[1].trim());
+            }
+            // GENERALIZED: Margin-bottom (for paragraph spacing)
+            const marginBottomMatch = ruleContent.match(/margin-bottom\s*:\s*([^;]+)/i);
+            if (marginBottomMatch) {
+                style.marginBottom = resolveValue(marginBottomMatch[1].trim());
+            }
+            // GENERALIZED: Line-height (for vertical spacing within text)
+            const lineHeightMatch = ruleContent.match(/line-height\s*:\s*([^;]+)/i);
+            if (lineHeightMatch) {
+                style.lineHeight = resolveValue(lineHeightMatch[1].trim());
+            }
+            // Letter-spacing (for character spacing on element selectors like h1, h2, p)
+            const letterSpacingMatch = ruleContent.match(/letter-spacing\s*:\s*([^;]+)/i);
+            if (letterSpacingMatch) {
+                style.letterSpacing = resolveValue(letterSpacingMatch[1].trim());
+            }
+            // Margin-top (for heading spacing before)
+            const marginTopMatch = ruleContent.match(/margin-top\s*:\s*([^;]+)/i);
+            if (marginTopMatch) {
+                style.marginTop = resolveValue(marginTopMatch[1].trim());
+            }
+            // Text alignment (left, center, right, justify)
+            const textAlignMatch = ruleContent.match(/text-align\s*:\s*([^;]+)/i);
+            if (textAlignMatch) {
+                style.textAlign = resolveValue(textAlignMatch[1].trim());
+            }
+            // Border shorthand (e.g., "1px solid #e5e7eb")
+            const borderMatch = ruleContent.match(/(?:^|;)\s*border\s*:\s*([^;]+)/i);
+            if (borderMatch) {
+                style.border = resolveValue(borderMatch[1].trim());
+            }
+            // Border-left (used by blockquotes/callouts: "4px solid #8b4513")
+            const borderLeftMatch = ruleContent.match(/border-left\s*:\s*([^;]+)/i);
+            if (borderLeftMatch) {
+                const borderLeftValue = resolveValue(borderLeftMatch[1].trim());
+                // If it contains a color, extract it as borderColor
+                const colorInBorder = borderLeftValue.match(/#([0-9a-fA-F]{3,6})/);
+                if (colorInBorder && !style.borderColor) {
+                    style.borderColor = `#${colorInBorder[1]}`;
+                }
+                // Store the full border-left value
+                style.borderLeft = borderLeftValue;
+            }
+            // Border-right (used by sidebar dividers, etc.)
+            const borderRightMatch = ruleContent.match(/border-right\s*:\s*([^;]+)/i);
+            if (borderRightMatch) {
+                style.borderRight = resolveValue(borderRightMatch[1].trim());
+            }
+            // Border color (direct property)
+            const borderColorMatch = ruleContent.match(/border-color\s*:\s*([^;]+)/i);
+            if (borderColorMatch) {
+                style.borderColor = resolveValue(borderColorMatch[1].trim());
+            }
+            // GENERALIZED: Border-bottom (used by h2 underlines, title blocks, etc.)
+            // Any element can have border-bottom - extract from element selectors
+            const borderBottomMatch = ruleContent.match(/border-bottom\s*:\s*([^;]+)/i);
+            if (borderBottomMatch) {
+                style.borderBottom = resolveValue(borderBottomMatch[1].trim());
+            }
+            // GENERALIZED: Border-top (used by footer sections with top divider lines)
+            // Any element can have border-top - extract from element selectors
+            const borderTopMatch = ruleContent.match(/border-top\s*:\s*([^;]+)/i);
+            if (borderTopMatch) {
+                style.borderTop = resolveValue(borderTopMatch[1].trim());
+            }
+            // Apply style to each selector
+            if (Object.keys(style).length > 0) {
+                for (const selector of selectors) {
+                    // Merge with existing styles (later rules override)
+                    const existing = elementStyles.get(selector) || {};
+                    elementStyles.set(selector, { ...existing, ...style });
+                }
+            }
+        }
+        // Parse element-to-element nested selectors like "thead th { ... }" or "tbody td { ... }"
+        // These are compound selectors with a parent element and a child element
+        // We store them in nestedStyles using "__elem:parentTag" as the key
+        // so they can be looked up by ancestor element type in table/heading parsing
+        const elementElements = ["thead", "tbody", "tfoot", "table", "tr", "ul", "ol", "nav", "header", "footer", "section", "article", "aside", "figure", "blockquote", "div"];
+        const childElements = ["th", "td", "tr", "li", "p", "h1", "h2", "h3", "h4", "h5", "h6", "span", "a", "img", "div"];
+        const parentList = elementElements.join("|");
+        const childList = childElements.join("|");
+        const elemElemPattern = new RegExp(`(?:^|[\\n\\r])\\s*((?:${parentList})(?:\\s*,\\s*(?:${parentList}))*)\\s+((?:${childList})(?:\\s*,\\s*(?:${childList}))*)\\s*\\{([^}]+)\\}`, "gi");
+        const elemElemMatches = cssText.matchAll(elemElemPattern);
+        for (const match of elemElemMatches) {
+            const parentSelectors = match[1].split(/\s*,\s*/).map(s => s.trim().toLowerCase());
+            const childSelectors = match[2].split(/\s*,\s*/).map(s => s.trim().toLowerCase());
+            const ruleContent = match[3];
+            // Extract style properties
+            const style = {};
+            const colorMatch = ruleContent.match(/(?:^|;)\s*color\s*:\s*([^;]+)/i);
+            if (colorMatch)
+                style.color = resolveValue(colorMatch[1].trim());
+            const bgMatch = ruleContent.match(/background(?:-(?:color|image))?\s*:\s*([^;]+)/i);
+            if (bgMatch) {
+                const bgValue = resolveValue(bgMatch[1].trim());
+                const gradientColor = extractFirstGradientColor(bgValue);
+                style.backgroundColor = gradientColor || bgValue;
+            }
+            const fontWeightMatch = ruleContent.match(/font-weight\s*:\s*([^;]+)/i);
+            if (fontWeightMatch)
+                style.fontWeight = resolveValue(fontWeightMatch[1].trim());
+            const fontSizeMatch = ruleContent.match(/font-size\s*:\s*([^;]+)/i);
+            if (fontSizeMatch)
+                style.fontSize = resolveValue(fontSizeMatch[1].trim());
+            const paddingMatch = ruleContent.match(/(?:^|;)\s*padding\s*:\s*([^;]+)/i);
+            if (paddingMatch)
+                style.padding = resolveValue(paddingMatch[1].trim());
+            const textAlignMatch = ruleContent.match(/text-align\s*:\s*([^;]+)/i);
+            if (textAlignMatch)
+                style.textAlign = resolveValue(textAlignMatch[1].trim());
+            const borderBottomMatch = ruleContent.match(/border-bottom\s*:\s*([^;]+)/i);
+            if (borderBottomMatch)
+                style.borderBottom = resolveValue(borderBottomMatch[1].trim());
+            if (Object.keys(style).length > 0) {
+                for (const parent of parentSelectors) {
+                    // Store using "__elem:" prefix to distinguish from class-based nesting
+                    const key = `__elem:${parent}`;
+                    for (const child of childSelectors) {
+                        const existing = nestedStyles.get(key) || new Map();
+                        const existingChild = existing.get(child) || {};
+                        existing.set(child, { ...existingChild, ...style });
+                        nestedStyles.set(key, existing);
+                    }
+                }
+            }
+        }
+        // Parse element-with-pseudo-selector nested patterns like:
+        //   tbody tr:nth-child(even) { background: #f9fafb; }
+        //   table tr:nth-child(even) { background-color: #f5f5f5; }
+        //   .my-table tr:nth-child(even) { background: ... }
+        // These are stored as "__even-row" in elementStyles so table parsing can retrieve them
+        const evenRowPattern = /(?:^|[\n\r])\s*(?:(?:tbody|table|\.[\w-]+)\s+)?tr\s*:\s*nth-child\s*\(\s*even\s*\)\s*\{([^}]+)\}/gi;
+        const evenRowMatches = cssText.matchAll(evenRowPattern);
+        for (const match of evenRowMatches) {
+            const ruleContent = match[1];
+            const bgMatch = ruleContent.match(/background(?:-color)?\s*:\s*([^;]+)/i);
+            if (bgMatch) {
+                const bgValue = resolveValue(bgMatch[1].trim());
+                const hex = extractHexColor(bgValue);
+                if (hex) {
+                    // Store as a special element style that table parsing can look up
+                    elementStyles.set("__even-row", { backgroundColor: `#${hex}` });
+                }
+            }
+        }
+    }
+    return { variables, classColors, calloutStyles, classStyles, elementStyles, nestedStyles };
+}
+/**
+ * Get merged styles for an element by combining all its class styles.
+ * Later classes override earlier ones.
+ * Also checks element type selectors as a base layer.
+ *
+ * @param element The element to get styles for
+ * @param cssContext The CSS context
+ * @param parentElement Optional parent element for nested style lookups
+ */
+export function getElementStyles(element, cssContext, parentElement) {
+    const result = {};
+    // CSS Inheritance: inherit certain properties from body styles
+    // In CSS, properties like line-height, color, font-family, font-size, letter-spacing
+    // are inherited from ancestor elements. Since our parser doesn't walk the full DOM tree
+    // for inheritance, we manually inherit from body styles as a baseline.
+    const bodyStyle = cssContext.elementStyles.get("body");
+    if (bodyStyle) {
+        // Only inherit CSS-inheritable properties, not box-model properties
+        if (bodyStyle.lineHeight)
+            result.lineHeight = bodyStyle.lineHeight;
+        if (bodyStyle.color)
+            result.color = bodyStyle.color;
+        if (bodyStyle.fontFamily)
+            result.fontFamily = bodyStyle.fontFamily;
+        if (bodyStyle.fontSize)
+            result.fontSize = bodyStyle.fontSize;
+        if (bodyStyle.letterSpacing)
+            result.letterSpacing = bodyStyle.letterSpacing;
+    }
+    // First, apply element type selector styles (lowest priority, overrides body inheritance)
+    const tagName = element.tagName.toLowerCase();
+    const elementTypeStyle = cssContext.elementStyles.get(tagName);
+    if (elementTypeStyle) {
+        Object.assign(result, elementTypeStyle);
+    }
+    // Then apply class styles (higher priority)
+    const classAttr = element.getAttribute("class");
+    const elementClasses = classAttr ? classAttr.split(/\s+/).filter(c => c.length > 0) : [];
+    for (const className of elementClasses) {
+        const classStyle = cssContext.classStyles.get(className);
+        if (classStyle) {
+            Object.assign(result, classStyle);
+        }
+    }
+    // Apply compound class styles (even higher specificity than single class)
+    // Check all compound keys in classStyles where the element has ALL required classes
+    if (elementClasses.length >= 2) {
+        for (const [key, compoundStyle] of cssContext.classStyles) {
+            if (key.includes('.')) {
+                const requiredClasses = key.split('.');
+                if (requiredClasses.every(c => elementClasses.includes(c))) {
+                    Object.assign(result, compoundStyle);
+                }
+            }
+        }
+    }
+    // Apply nested styles if parent is provided (highest CSS priority for nested selectors)
+    // This handles rules like ".parent .child { color: ... }" and ".parent element { color: ... }"
+    if (parentElement) {
+        const parentClassAttr = parentElement.getAttribute("class");
+        const parentClasses = parentClassAttr ? parentClassAttr.split(/\s+/).filter(c => c.length > 0) : [];
+        // First, inherit text color from parent's class styles (CSS color inheritance)
+        // This handles cases like ".cta { color: white; }" where children should inherit the color
+        if (!result.color) {
+            for (const parentClass of parentClasses) {
+                const parentClassStyle = cssContext.classStyles.get(parentClass);
+                if (parentClassStyle?.color) {
+                    result.color = parentClassStyle.color;
+                    break;
+                }
+            }
+        }
+        // For each parent class, check if there are nested styles for our element's classes OR tag name
+        for (const parentClass of parentClasses) {
+            const nestedMap = cssContext.nestedStyles.get(parentClass);
+            if (nestedMap) {
+                // Check for element tag name (e.g., .works-cited p { ... })
+                const nestedTagStyle = nestedMap.get(tagName);
+                if (nestedTagStyle) {
+                    Object.assign(result, nestedTagStyle);
+                }
+                // Check for element's classes (simple selectors)
+                for (const childClass of elementClasses) {
+                    const nestedStyle = nestedMap.get(childClass);
+                    if (nestedStyle) {
+                        Object.assign(result, nestedStyle);
+                    }
+                }
+                // Check for compound child selectors (e.g., .parent .classA.classB)
+                if (elementClasses.length >= 2) {
+                    for (const [childKey, nestedStyle] of nestedMap) {
+                        if (childKey.includes('.')) {
+                            const requiredClasses = childKey.split('.');
+                            if (requiredClasses.every(c => elementClasses.includes(c))) {
+                                Object.assign(result, nestedStyle);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    // Also walk up the DOM tree to find ancestor containers with nested styles
+    // This handles cases where the parent element isn't passed explicitly
+    // IMPORTANT: Closer ancestors have higher specificity than distant ancestors,
+    // so we use a "fill-in" approach - only set properties not already set by closer ancestors
+    if (!parentElement) {
+        // Helper: merge only properties that aren't already set in result
+        const fillIn = (source) => {
+            for (const [key, value] of Object.entries(source)) {
+                if (value !== undefined && result[key] === undefined) {
+                    result[key] = value;
+                }
+            }
+        };
+        // Track whether we've already applied a nested class→tag override.
+        // The FIRST (closest) ancestor's class→tag style should override bare element-type
+        // styles (e.g., `.comparison-table th` overrides `th`), because .class element
+        // has higher CSS specificity (0,1,1) than element (0,0,1).
+        // Subsequent (more distant) ancestors use fillIn to avoid overriding closer ones.
+        let appliedNestedTagOverride = false;
+        let ancestor = element.parentElement;
+        while (ancestor) {
+            const ancestorClassAttr = ancestor.getAttribute("class");
+            const ancestorClasses = ancestorClassAttr ? ancestorClassAttr.split(/\s+/).filter(c => c.length > 0) : [];
+            for (const ancestorClass of ancestorClasses) {
+                const nestedMap = cssContext.nestedStyles.get(ancestorClass);
+                if (nestedMap) {
+                    // Check for element tag name (e.g., .comparison-table th { ... })
+                    // CSS specificity: .class element (0,1,1) > element (0,0,1)
+                    // So nested class→tag styles OVERRIDE bare element-type styles.
+                    // Only the closest ancestor's class→tag style should override; further
+                    // ancestors fill in only properties not yet set.
+                    const nestedTagStyle = nestedMap.get(tagName);
+                    if (nestedTagStyle) {
+                        if (!appliedNestedTagOverride) {
+                            Object.assign(result, nestedTagStyle);
+                            appliedNestedTagOverride = true;
+                        }
+                        else {
+                            fillIn(nestedTagStyle);
+                        }
+                    }
+                    // Check for element's classes (simple selectors)
+                    for (const childClass of elementClasses) {
+                        const nestedStyle = nestedMap.get(childClass);
+                        if (nestedStyle) {
+                            fillIn(nestedStyle);
+                        }
+                    }
+                    // Check for compound child selectors (e.g., .ancestor .classA.classB)
+                    if (elementClasses.length >= 2) {
+                        for (const [childKey, nestedStyle] of nestedMap) {
+                            if (childKey.includes('.')) {
+                                const requiredClasses = childKey.split('.');
+                                if (requiredClasses.every(c => elementClasses.includes(c))) {
+                                    fillIn(nestedStyle);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            // Check element-to-element nested styles (e.g., "thead th { ... }", "tbody td { ... }")
+            // These are stored with "__elem:" prefix in nestedStyles
+            const ancestorTagName2 = ancestor.tagName?.toLowerCase();
+            if (ancestorTagName2) {
+                const elemElemMap = cssContext.nestedStyles.get(`__elem:${ancestorTagName2}`);
+                if (elemElemMap) {
+                    const nestedTagStyle = elemElemMap.get(tagName);
+                    if (nestedTagStyle) {
+                        fillIn(nestedTagStyle);
+                    }
+                }
+            }
+            // CSS color inheritance: if result doesn't have a color yet, check if ancestor has one
+            // CSS `color` is an inherited property - children inherit it from parents
+            if (!result.color) {
+                for (const ancestorClass of ancestorClasses) {
+                    const ancestorClassStyle = cssContext.classStyles.get(ancestorClass);
+                    if (ancestorClassStyle?.color) {
+                        result.color = ancestorClassStyle.color;
+                        break;
+                    }
+                }
+                // Also check ancestor's element type selector for color (e.g., body { color: #333 })
+                if (!result.color) {
+                    const ancestorTagName = ancestor.tagName?.toLowerCase();
+                    if (ancestorTagName) {
+                        const ancestorTypeStyle = cssContext.elementStyles.get(ancestorTagName);
+                        if (ancestorTypeStyle?.color) {
+                            result.color = ancestorTypeStyle.color;
+                        }
+                    }
+                }
+                // Also check ancestor's inline style for color
+                if (!result.color) {
+                    const ancestorInline = ancestor.getAttribute("style") || "";
+                    const ancestorColorMatch = ancestorInline.match(/(?:^|;)\s*color\s*:\s*([^;]+)/i);
+                    if (ancestorColorMatch) {
+                        result.color = ancestorColorMatch[1].trim();
+                    }
+                }
+            }
+            ancestor = ancestor.parentElement;
+        }
+    }
+    // Inherit font-family from ancestor elements if not set on this element
+    // CSS font-family is an inherited property, so we need to walk up the DOM tree
+    if (!result.fontFamily) {
+        let ancestor = element.parentElement;
+        while (ancestor && !result.fontFamily) {
+            const ancestorTagName = ancestor.tagName?.toLowerCase();
+            if (ancestorTagName) {
+                // Check element type selector for ancestor (e.g., body { font-family: ... })
+                const ancestorTypeStyle = cssContext.elementStyles.get(ancestorTagName);
+                if (ancestorTypeStyle?.fontFamily) {
+                    result.fontFamily = ancestorTypeStyle.fontFamily;
+                    break;
+                }
+                // Check ancestor's class styles
+                const ancestorClassAttr = ancestor.getAttribute("class");
+                const ancestorClasses = ancestorClassAttr ? ancestorClassAttr.split(/\s+/).filter(c => c.length > 0) : [];
+                for (const ancestorClass of ancestorClasses) {
+                    const classStyle = cssContext.classStyles.get(ancestorClass);
+                    if (classStyle?.fontFamily) {
+                        result.fontFamily = classStyle.fontFamily;
+                        break;
+                    }
+                }
+            }
+            ancestor = ancestor.parentElement;
+        }
+    }
+    // GENERALIZED: Inherit line-height from ancestor elements if not set on this element
+    // CSS line-height is an inherited property (like font-family and color)
+    if (!result.lineHeight) {
+        let ancestor = element.parentElement;
+        while (ancestor && !result.lineHeight) {
+            const ancestorTagName = ancestor.tagName?.toLowerCase();
+            if (ancestorTagName) {
+                const ancestorTypeStyle = cssContext.elementStyles.get(ancestorTagName);
+                if (ancestorTypeStyle?.lineHeight) {
+                    result.lineHeight = ancestorTypeStyle.lineHeight;
+                    break;
+                }
+                const ancestorClassAttr = ancestor.getAttribute("class");
+                const ancestorClasses = ancestorClassAttr ? ancestorClassAttr.split(/\s+/).filter(c => c.length > 0) : [];
+                for (const ancestorClass of ancestorClasses) {
+                    const classStyle = cssContext.classStyles.get(ancestorClass);
+                    if (classStyle?.lineHeight) {
+                        result.lineHeight = classStyle.lineHeight;
+                        break;
+                    }
+                }
+            }
+            ancestor = ancestor.parentElement;
+        }
+    }
+    // Note: text-align inheritance is handled by the caller (processNode's inheritedAlignment,
+    // or parseBlockquoteContent's explicit blockquoteStyles.textAlign fallback).
+    // We don't inherit text-align in getElementStyles to avoid double-inheritance in the main path.
+    // Also check inline styles, which override CSS classes
+    const inlineStyle = element.getAttribute("style") || "";
+    if (inlineStyle) {
+        const bgMatch = inlineStyle.match(/background(?:-color)?\s*:\s*([^;]+)/i);
+        if (bgMatch)
+            result.backgroundColor = bgMatch[1].trim();
+        const colorMatch = inlineStyle.match(/(?:^|;)\s*color\s*:\s*([^;]+)/i);
+        if (colorMatch)
+            result.color = colorMatch[1].trim();
+        const borderMatch = inlineStyle.match(/(?:^|;)\s*border\s*:\s*([^;]+)/i);
+        if (borderMatch)
+            result.border = borderMatch[1].trim();
+        const borderColorMatch = inlineStyle.match(/border-color\s*:\s*([^;]+)/i);
+        if (borderColorMatch)
+            result.borderColor = borderColorMatch[1].trim();
+        const borderLeftMatch = inlineStyle.match(/border-left\s*:\s*([^;]+)/i);
+        if (borderLeftMatch)
+            result.borderLeft = borderLeftMatch[1].trim();
+        const borderBottomMatch = inlineStyle.match(/border-bottom\s*:\s*([^;]+)/i);
+        if (borderBottomMatch)
+            result.borderBottom = borderBottomMatch[1].trim();
+        const displayMatch = inlineStyle.match(/display\s*:\s*([^;]+)/i);
+        if (displayMatch)
+            result.display = displayMatch[1].trim();
+        const flexMatch = inlineStyle.match(/(?:^|;)\s*flex\s*:\s*([^;]+)/i);
+        if (flexMatch)
+            result.flex = flexMatch[1].trim();
+        const gridColsMatch = inlineStyle.match(/grid-template-columns\s*:\s*([^;]+)/i);
+        if (gridColsMatch)
+            result.gridTemplateColumns = gridColsMatch[1].trim();
+        const textAlignMatch = inlineStyle.match(/text-align\s*:\s*([^;]+)/i);
+        if (textAlignMatch)
+            result.textAlign = textAlignMatch[1].trim();
+        // Inline font-family (highest priority)
+        const fontFamilyMatch = inlineStyle.match(/font-family\s*:\s*([^;]+)/i);
+        if (fontFamilyMatch) {
+            const primaryFont = extractPrimaryFont(fontFamilyMatch[1].trim());
+            if (primaryFont)
+                result.fontFamily = primaryFont;
+        }
+        // Inline line-height
+        const lineHeightMatch = inlineStyle.match(/line-height\s*:\s*([^;]+)/i);
+        if (lineHeightMatch) {
+            result.lineHeight = lineHeightMatch[1].trim();
+        }
+        // Inline margin-bottom
+        const marginBottomInlineMatch = inlineStyle.match(/margin-bottom\s*:\s*([^;]+)/i);
+        if (marginBottomInlineMatch) {
+            result.marginBottom = marginBottomInlineMatch[1].trim();
+        }
+        // Inline gradient text detection: background-clip: text + gradient background
+        // This handles inline styles like:
+        // style="background: linear-gradient(90deg, #ff0, #f00); -webkit-background-clip: text; color: transparent;"
+        const hasInlineBackgroundClipText = inlineStyle.match(/(?:-webkit-)?background-clip\s*:\s*text/i);
+        if (hasInlineBackgroundClipText) {
+            const bgInlineMatch = inlineStyle.match(/background(?:-image)?\s*:\s*(linear-gradient\s*\([^)]+(?:\([^)]*\))*[^)]*\))/i);
+            if (bgInlineMatch) {
+                const gradient = parseGradient(bgInlineMatch[1]);
+                if (gradient) {
+                    result.gradient = gradient;
+                    // Clear backgroundColor since the gradient is for text fill, NOT paragraph background
+                    result.backgroundColor = undefined;
+                    // Set fallback color from first stop
+                    if (!result.color || result.color === "transparent") {
+                        result.color = gradient.stops[0]?.color;
+                    }
+                }
+            }
+        }
+        // Inline font-style (italic)
+        const fontStyleMatch = inlineStyle.match(/font-style\s*:\s*([^;]+)/i);
+        if (fontStyleMatch)
+            result.fontStyle = fontStyleMatch[1].trim();
+        // Inline font-weight (bold)
+        const fontWeightMatch = inlineStyle.match(/font-weight\s*:\s*([^;]+)/i);
+        if (fontWeightMatch)
+            result.fontWeight = fontWeightMatch[1].trim();
+        // Inline text-transform
+        const textTransformMatch = inlineStyle.match(/text-transform\s*:\s*([^;]+)/i);
+        if (textTransformMatch)
+            result.textTransform = textTransformMatch[1].trim();
+    }
+    // GENERALIZED: Use getComputedStyle as fallback for font-family and line-height
+    // This ensures we get the ACTUAL computed values from Playwright's browser context,
+    // including all CSS variable resolution and inheritance
+    if (typeof window !== "undefined" && window.getComputedStyle) {
+        try {
+            const computed = window.getComputedStyle(element);
+            // Font-family: Use computed style if not already set from CSS parsing
+            if (!result.fontFamily && computed.fontFamily) {
+                const primaryFont = extractPrimaryFont(computed.fontFamily);
+                if (primaryFont) {
+                    result.fontFamily = primaryFont;
+                }
+            }
+            // Line-height: Use computed style if not already set from CSS parsing
+            if (!result.lineHeight && computed.lineHeight) {
+                // Convert computed lineHeight (e.g., "27.2px") to a ratio or keep as-is
+                result.lineHeight = computed.lineHeight;
+            }
+        }
+        catch {
+            // getComputedStyle may fail in some environments
+        }
+    }
+    // Resolve CSS variables in all collected style values
+    // This handles inline styles like "background-color: var(--color-bg)"
+    // and CSS class styles that reference variables
+    const resolveVar = (val) => {
+        if (!val || !val.includes("var("))
+            return val;
+        const varMatch = val.match(/var\s*\(\s*(--[a-zA-Z0-9-]+)\s*(?:,\s*([^)]+))?\s*\)/);
+        if (varMatch) {
+            const resolved = cssContext.variables.get(varMatch[1]);
+            if (resolved)
+                return resolved;
+            // Use fallback value if provided
+            if (varMatch[2])
+                return varMatch[2].trim();
+        }
+        return val;
+    };
+    result.backgroundColor = resolveVar(result.backgroundColor);
+    result.color = resolveVar(result.color);
+    result.borderColor = resolveVar(result.borderColor);
+    result.border = resolveVar(result.border);
+    result.borderLeft = resolveVar(result.borderLeft);
+    result.borderBottom = resolveVar(result.borderBottom);
+    result.borderTop = resolveVar(result.borderTop);
+    // When a gradient text fill is present (background-clip: text), the gradient's first stop
+    // color should be used as the text color fallback. This overrides any inherited or
+    // element-level color (e.g. h1 { color: #1a1a1a }) because the gradient IS the intended
+    // text color — the regular CSS color would only be visible without -webkit-background-clip: text.
+    if (result.gradient && result.gradient.stops.length > 0) {
+        result.color = result.gradient.stops[0].color;
+    }
+    return result;
+}
+/**
+ * Get color for an element by checking its classes against parsed CSS rules.
+ */
+export function getColorFromClasses(element, cssContext) {
+    const classAttr = element.getAttribute("class");
+    if (!classAttr)
+        return undefined;
+    const classes = classAttr.split(/\s+/).filter(c => c.length > 0);
+    // First, check compound selectors (higher specificity)
+    // Look for compound keys in classColors where the element has ALL required classes
+    if (classes.length >= 2) {
+        // Check all compound keys in classColors
+        for (const [key, color] of cssContext.classColors) {
+            if (key.includes('.')) {
+                // This is a compound key (e.g., "metric-change.positive")
+                const requiredClasses = key.split('.');
+                if (requiredClasses.every(c => classes.includes(c))) {
+                    return extractHexColor(color);
+                }
+            }
+        }
+    }
+    // Then check simple class selectors
+    for (const className of classes) {
+        const color = cssContext.classColors.get(className);
+        if (color) {
+            return extractHexColor(color);
+        }
+    }
+    return undefined;
+}
+/**
+ * Extract the text color from an element's inline style, CSS class rules, or computed style.
+ * Checks inline style first, then CSS class rules, then element type rules, then computed style if available.
+ * Returns the actual color from the HTML - does NOT filter out any colors.
+ * Per the skill rules: ALL styling values MUST be extracted from HTML, never filtered.
+ */
+export function extractTextColor(element, cssContext) {
+    // Check inline style first (highest priority)
+    const inlineStyle = element.getAttribute("style") || "";
+    const colorMatch = inlineStyle.match(/(?:^|;)\s*color:\s*([^;]+)/i);
+    if (colorMatch) {
+        let colorValue = colorMatch[1].trim();
+        // Resolve CSS variables in inline styles (e.g., var(--color-muted))
+        if (cssContext && colorValue.includes("var(")) {
+            const varMatch = colorValue.match(/var\s*\(\s*(--[a-zA-Z0-9-]+)\s*\)/);
+            if (varMatch) {
+                const resolvedValue = cssContext.variables.get(varMatch[1]);
+                if (resolvedValue) {
+                    colorValue = resolvedValue;
+                }
+            }
+        }
+        const color = extractHexColor(colorValue);
+        if (color) {
+            return color;
+        }
+    }
+    // Check CSS rules using getElementStyles which handles the full cascade:
+    // element type < class < compound class < nested selectors < inline styles
+    if (cssContext) {
+        const elementStyles = getElementStyles(element, cssContext);
+        if (elementStyles.color) {
+            const color = extractHexColor(elementStyles.color);
+            if (color) {
+                return color;
+            }
+        }
+        // Fallback to classColors map for colors not captured by getElementStyles
+        const classColor = getColorFromClasses(element, cssContext);
+        if (classColor) {
+            return classColor;
+        }
+    }
+    // Try computed style if available (browser environment)
+    if (typeof window !== "undefined" && window.getComputedStyle) {
+        try {
+            const computed = window.getComputedStyle(element);
+            const computedColor = computed.color;
+            if (computedColor) {
+                const color = extractHexColor(computedColor);
+                if (color) {
+                    return color;
+                }
+            }
+        }
+        catch {
+            // getComputedStyle may fail in some environments
+        }
+    }
+    return undefined;
+}
+/**
+ * Extract border color from a border shorthand or border-color property.
+ * Also handles borderLeft, borderRight, borderTop, borderBottom.
+ */
+export function extractBorderColorFromStyle(style) {
+    if (style.borderColor) {
+        return extractHexColor(style.borderColor);
+    }
+    // Check border shorthand
+    if (style.border) {
+        // Parse "1px solid #e5e7eb" or "1px solid rgb(184, 218, 255)" or "1px solid blue"
+        // Try hex color first (most common)
+        const hexMatch = style.border.match(/#([0-9a-fA-F]{3,6})/);
+        if (hexMatch) {
+            let hex = hexMatch[1];
+            if (hex.length === 3) {
+                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+            }
+            return hex.toUpperCase();
+        }
+        // Try rgb/rgba color
+        const rgbMatch = style.border.match(/(rgba?\s*\([^)]+\))/i);
+        if (rgbMatch) {
+            return extractHexColor(rgbMatch[1]);
+        }
+        // Try named color (last word in the shorthand, after "solid" or "dashed" etc.)
+        const parts = style.border.trim().split(/\s+/);
+        const lastPart = parts[parts.length - 1];
+        if (lastPart && !lastPart.match(/^\d/) && !["solid", "dashed", "dotted", "double", "none", "hidden", "groove", "ridge", "inset", "outset"].includes(lastPart)) {
+            return extractHexColor(lastPart);
+        }
+    }
+    // Check individual border properties (borderLeft, borderRight, borderTop, borderBottom)
+    const borderProps = [style.borderLeft, style.borderRight, style.borderTop, style.borderBottom];
+    for (const borderValue of borderProps) {
+        if (borderValue) {
+            // Parse "4px solid #7c3aed" or similar — try hex first, then rgb, then named
+            const hexMatch = borderValue.match(/#([0-9a-fA-F]{3,6})/);
+            if (hexMatch) {
+                let hex = hexMatch[1];
+                if (hex.length === 3) {
+                    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+                }
+                return hex.toUpperCase();
+            }
+            const rgbMatch = borderValue.match(/(rgba?\s*\([^)]+\))/i);
+            if (rgbMatch) {
+                return extractHexColor(rgbMatch[1]);
+            }
+        }
+    }
+    return undefined;
+}
+/**
+ * Check if an element has a border-bottom style that should become a horizontal rule.
+ * Returns the border color if found, undefined otherwise.
+ */
+export function extractBorderBottomColor(element, cssContext) {
+    // Check inline style for border-bottom
+    const inlineStyle = element.getAttribute("style") || "";
+    const borderMatch = inlineStyle.match(/border-bottom:\s*([^;]+)/i);
+    if (borderMatch) {
+        const borderValue = borderMatch[1];
+        // Parse "1px solid #e5e7eb" or similar
+        const colorMatch = borderValue.match(/#([0-9a-fA-F]{3,6})/);
+        if (colorMatch) {
+            let hex = colorMatch[1];
+            if (hex.length === 3) {
+                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+            }
+            return hex.toUpperCase();
+        }
+        // Check for CSS variable in border
+        const varMatch = borderValue.match(/var\s*\(\s*(--[a-zA-Z0-9-]+)\s*\)/);
+        if (varMatch) {
+            const varValue = cssContext.variables.get(varMatch[1]);
+            if (varValue) {
+                const hex = extractHexColor(varValue);
+                if (hex)
+                    return hex;
+            }
+        }
+    }
+    // Check CSS styles for border-bottom (generalized approach)
+    const styles = getElementStyles(element, cssContext);
+    // Check border-bottom first (most specific for horizontal rules)
+    if (styles.borderBottom) {
+        const borderValue = styles.borderBottom;
+        const colorMatch = borderValue.match(/#([0-9a-fA-F]{3,6})/);
+        if (colorMatch) {
+            let hex = colorMatch[1];
+            if (hex.length === 3) {
+                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+            }
+            return hex.toUpperCase();
+        }
+        // Check for CSS variable reference in border-bottom
+        const varMatch = borderValue.match(/var\s*\(\s*(--[a-zA-Z0-9-]+)\s*\)/);
+        if (varMatch) {
+            const varValue = cssContext.variables.get(varMatch[1]);
+            if (varValue) {
+                const hex = extractHexColor(varValue);
+                if (hex)
+                    return hex;
+            }
+        }
+    }
+    // Check if this element has a border-bottom defined in CSS
+    // The border property might be a shorthand like "1px solid #e5e7eb"
+    if (styles.border) {
+        const borderValue = styles.border;
+        const colorMatch = borderValue.match(/#([0-9a-fA-F]{3,6})/);
+        if (colorMatch) {
+            let hex = colorMatch[1];
+            if (hex.length === 3) {
+                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+            }
+            return hex.toUpperCase();
+        }
+        // Check for CSS variable reference
+        const varMatch = borderValue.match(/var\s*\(\s*(--[a-zA-Z0-9-]+)\s*\)/);
+        if (varMatch) {
+            const varValue = cssContext.variables.get(varMatch[1]);
+            if (varValue) {
+                const hex = extractHexColor(varValue);
+                if (hex)
+                    return hex;
+            }
+        }
+    }
+    // Also check borderColor directly
+    if (styles.borderColor) {
+        const hex = extractHexColor(styles.borderColor);
+        if (hex)
+            return hex;
+    }
+    return undefined;
+}
+/**
+ * Extract color from a border-top CSS property on an element.
+ * Checks inline styles and CSS classes, and resolves CSS variables.
+ */
+export function extractBorderTopColor(element, cssContext) {
+    // First, check inline style for border-top (highest specificity)
+    const inlineStyle = element.getAttribute("style") || "";
+    const borderMatch = inlineStyle.match(/border-top:\s*([^;]+)/i);
+    if (borderMatch) {
+        const borderValue = borderMatch[1];
+        // Parse "1px solid #e5e7eb" or similar
+        const colorMatch = borderValue.match(/#([0-9a-fA-F]{3,6})/);
+        if (colorMatch) {
+            let hex = colorMatch[1];
+            if (hex.length === 3) {
+                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+            }
+            return hex.toUpperCase();
+        }
+        // Check for CSS variable in border
+        const varMatch = borderValue.match(/var\s*\(\s*(--[a-zA-Z0-9-]+)\s*\)/);
+        if (varMatch) {
+            const varValue = cssContext.variables.get(varMatch[1]);
+            if (varValue) {
+                const hex = extractHexColor(varValue);
+                if (hex)
+                    return hex;
+            }
+        }
+    }
+    // Then, check CSS class styles (e.g., .menu-footer { border-top: 2px solid #b8860b; })
+    const styles = getElementStyles(element, cssContext);
+    if (styles.borderTop) {
+        const borderValue = styles.borderTop;
+        // Parse "2px solid #b8860b" or similar
+        const colorMatch = borderValue.match(/#([0-9a-fA-F]{3,6})/);
+        if (colorMatch) {
+            let hex = colorMatch[1];
+            if (hex.length === 3) {
+                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+            }
+            return hex.toUpperCase();
+        }
+        // Check for CSS variable in border that was already resolved
+        // (resolveValue in parseCssContext should have resolved it)
+        const resolved = extractHexColor(borderValue);
+        if (resolved)
+            return resolved;
+    }
+    return undefined;
+}
+//# sourceMappingURL=parse-css.js.map