/**
 * Focus Styles - WCAG 2.1 AA Compliant
 * Comprehensive focus indicators for all interactive elements
 */

/* Focus indicator - uses design tokens from variables.css */
:root {
    --focus-color: var(--color-primary);
    --focus-color-dark: var(--color-primary-dark);
    --focus-outline-width: 3px;
    --focus-outline-offset: 2px;
    --focus-shadow: 0 0 0 4px rgba(90, 200, 250, 0.2);
}

/* Remove default outline for mouse users */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Strong focus indicator for keyboard navigation (WCAG 2.1 AA) */
*:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-color);
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-shadow);
}

/* Button focus styles */
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-color);
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-shadow);
    position: relative;
}

/* Input focus styles */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-color);
    outline-offset: var(--focus-outline-offset);
    border-color: var(--focus-color);
    box-shadow: var(--focus-shadow), 0 0 0 3px rgba(90, 200, 250, 0.1);
}

/* Link focus styles */
a:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: var(--focus-outline-offset);
    text-decoration: underline;
    border-radius: 2px;
}

/* Table row/cell focus styles */
tr:focus-visible,
td:focus-visible,
th:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 1px;
    background-color: var(--color-surface-hover);
}

/* Tab button focus styles */
.tab-button:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-color);
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-shadow);
    background-color: var(--color-surface-hover);
}

/* Icon button focus styles */
.icon-btn:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-color);
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-shadow);
}

/* Modal close button focus */
.modal-close:focus-visible,
.close-btn:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-color);
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-shadow);
}

/* High contrast mode - stronger focus indicators */
.high-contrast *:focus-visible {
    outline: 4px solid #000000 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3) !important;
}

.high-contrast input:focus-visible,
.high-contrast select:focus-visible,
.high-contrast textarea:focus-visible {
    border-color: #000000 !important;
    border-width: 3px !important;
}