// Basic requirement breakdown
{
  visible: true,
  keyboard_operable: true,
  clear_indication: required
}

// Formula for 2px thick perimeter
const minArea = 2 * (2 * height + 2 * width);
// Example for 100x50px button
const buttonArea = 2 * (2 * 100 + 2 * 50) = 600px;

// Minimum contrast ratio: 3:1
const contrastRatio = (L1 + 0.05) / (L2 + 0.05);
// where L1 is the lighter color's relative luminance
// and L2 is the darker color's relative luminance

/* Basic implementation */
:focus-visible {
    outline: 3px solid black;
    box-shadow: 0 0 0 6px white;
    position: relative;
    z-index: 1; /* Ensure visibility */
}

/* Enhanced version with better support */
:focus-visible {
    outline: 3px solid var(--focus-color, black);
    box-shadow: 0 0 0 6px var(--focus-inverse, white);
    position: relative;
    z-index: var(--focus-z-index, 1);
    transition: outline-offset 0.1s ease;
    outline-offset: var(--focus-offset, 2px);
}

/* Advanced Oreo pattern with customization */
:focus-visible {
    --focus-outer-color: black;
    --focus-middle-color: white;
    --focus-width: 9px;
    --focus-gap: 6px;
    
    outline: var(--focus-width) double var(--focus-outer-color);
    box-shadow: 0 0 0 var(--focus-gap) var(--focus-middle-color);
    position: relative;
    z-index: 1;
}

/* High contrast mode support */
@media (forced-colors: active) {
    :focus-visible {
        outline-color: CanvasText;
        box-shadow: none;
    }
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid black;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px white;
}

input[type="text"]:focus-visible {
    outline: 3px solid black;
    outline-offset: 0;
    box-shadow: 
        0 0 0 6px white,
        inset 0 0 0 2px white; /* Inner highlight */
}

.card:focus-visible {
    outline: 3px solid black;
    outline-offset: 4px; /* Larger offset for bigger components */
    box-shadow: 
        0 0 0 6px white,
        var(--card-shadow); /* Maintain existing shadows */
}

/* Safari-specific focus fixes */
@supports (-webkit-touch-callout: none) {
    :focus-visible {
        outline-offset: 3px; /* Safari needs slightly different offset */
    }
}

/* Firefox-specific focus enhancements */
@-moz-document url-prefix() {
    :focus-visible {
        outline-style: solid; /* Firefox renders double outline differently */
    }
}

/* Windows High Contrast Mode adjustments */
@media screen and (-ms-high-contrast: active) {
    :focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 4px;
        background: transparent;
        box-shadow: none;
    }
}

// Calculate contrast ratio and adjust focus style
function adjustFocusIndicator(element) {
    const backgroundColor = getComputedStyle(element).backgroundColor;
    const luminance = calculateLuminance(backgroundColor);
    
    element.style.setProperty(
        '--focus-color',
        luminance > 0.5 ? 'black' : 'white'
    );
}

// Usage with MutationObserver
const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.type === 'attributes' && 
            mutation.attributeName === 'class') {
            adjustFocusIndicator(mutation.target);
        }
    });
});

.modal:focus-visible {
    outline: none; /* Remove default outline */
    box-shadow: 
        0 0 0 3px black,
        0 0 0 6px white,
        var(--modal-shadow); /* Maintain modal shadow */
}

.container:focus-within {
    position: relative;
}

.container:focus-within > :focus-visible {
    /* Adjust focus styles for nested elements */
    outline-offset: -2px;
}

// Jest test example
describe('Focus Indicator', () => {
    test('meets contrast requirements', () => {
        const element = document.createElement('button');
        const styles = getComputedStyle(element);
        const focusColor = styles.getPropertyValue('--focus-color');
        const backgroundColor = styles.backgroundColor;
        
        expect(
            calculateContrastRatio(focusColor, backgroundColor)
        ).toBeGreaterThanOrEqual(3);
    });
});