/* Color contrast: Auth banner uses --color-warning-text on --color-warning-bg; confidence card uses
   --color-text-inverse on --gradient-primary. Both are chosen for WCAG AA contrast. */

/* High Contrast Mode Styles */
.high-contrast {
    --color-primary: #000000;
    --color-primary-hover: #333333;
    --color-text-primary: #000000;
    --color-text-secondary: #333333;
    --color-surface: #FFFFFF;
    --color-surface-hover: #F0F0F0;
    --color-border: #000000;
    --color-success: #006600;
    --color-error: #CC0000;
    --color-warning: #CC6600;
    --color-info: #0066CC;
}

.high-contrast * {
    border-color: #000000 !important;
}

.high-contrast button,
.high-contrast .btn {
    border: 2px solid #000000 !important;
    font-weight: bold !important;
}

.high-contrast input,
.high-contrast select,
.high-contrast textarea {
    border: 2px solid #000000 !important;
}

/* Text Scaling Support */
.large-text {
    font-size: 120% !important;
}

/* Focus Indicators - WCAG 2.1 AA Compliant */
/* Ensure all interactive elements have visible focus indicators */

/* Default focus styles for all interactive elements */
*:focus {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

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

/* Strong focus indicator for keyboard navigation */
*:focus-visible {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(90, 200, 250, 0.2);
}

/* Button focus styles */
button:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(90, 200, 250, 0.2);
}

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

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

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

/* Focus Indicators for High Contrast */
.high-contrast *:focus {
    outline: 3px solid #000000 !important;
    outline-offset: 2px !important;
}

.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;
}

/* Zoomable Elements */
.zoomable {
    transition: transform 0.3s ease;
    transform-origin: center;
}

/* Drag and Drop Styles */
.dragging {
    opacity: 0.5;
    cursor: grabbing !important;
}

.drop-zone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    min-height: 100px;
    transition: all var(--transition-base);
}

.drop-zone.drag-over {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}

/* Screen Reader Only - Visually Hidden but Accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Touch-friendly Controls */
@media (hover: none) and (pointer: coarse) {
    button,
    .btn,
    a {
        min-height: 44px;
        min-width: 44px;
        padding: var(--spacing-md) !important;
    }

    input,
    select,
    textarea {
        min-height: 44px;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}