/*
 * Foundational Interaction Patterns
 * 
 * These patterns establish consistent behavioral rules across all components.
 * AI agents can reference these patterns to maintain consistency when modifying components.
 */

/* ============================================================================
 * FOCUS PATTERNS - Consistent focus indicators across all interactive elements
 * ============================================================================ */

.focus-pattern {
    outline: none;
    transition: box-shadow var(--timing-fast) ease-out;
}

.focus-pattern:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
}

.focus-pattern:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

/* Focus pattern for inverse backgrounds */
.focus-pattern-inverse:focus-visible {
    box-shadow: 0 0 0 2px hsl(var(--surface-primary)), 0 0 0 4px hsl(var(--border-focus));
}

/* ============================================================================
 * HOVER PATTERNS - Consistent hover states for interactive elements
 * ============================================================================ */

.hover-pattern {
    transition: opacity var(--timing-fast) ease-out,
                transform var(--timing-fast) ease-out,
                box-shadow var(--timing-fast) ease-out;
}

.hover-pattern:hover:not(:disabled) {
    opacity: var(--state-hover-opacity);
}

.hover-pattern-lift:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pronounced);
}

.hover-pattern-scale:hover:not(:disabled) {
    transform: scale(1.02);
}

/* Disable hover patterns on touch devices */
@media (hover: none) and (pointer: coarse) {
    .hover-pattern:hover,
    .hover-pattern-lift:hover,
    .hover-pattern-scale:hover {
        opacity: 1;
        transform: none;
        box-shadow: var(--shadow-normal);
    }
}

/* ============================================================================
 * ACTIVE PATTERNS - Consistent active/pressed states
 * ============================================================================ */

.active-pattern:active:not(:disabled) {
    opacity: var(--state-active-opacity);
    transform: scale(0.98);
    transition: opacity var(--timing-instant) ease-out,
                transform var(--timing-instant) ease-out;
}

/* ============================================================================
 * DISABLED PATTERNS - Consistent disabled states
 * ============================================================================ */

.disabled-pattern:disabled,
.disabled-pattern[aria-disabled="true"] {
    opacity: var(--state-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

.disabled-pattern:disabled *,
.disabled-pattern[aria-disabled="true"] * {
    pointer-events: none;
}

/* ============================================================================
 * LOADING PATTERNS - Consistent loading states
 * ============================================================================ */

.loading-pattern {
    position: relative;
    pointer-events: none;
}

.loading-pattern::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    margin: -0.5rem 0 0 -0.5rem;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: loading-spin 1s linear infinite;
}

@keyframes loading-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Hide original content when loading */
.loading-pattern > * {
    opacity: 0;
}

/* ============================================================================
 * SELECTION PATTERNS - Consistent selection indicators
 * ============================================================================ */

.selection-pattern-checkbox {
    position: relative;
    transition: all var(--timing-fast) ease-out;
}

.selection-pattern-checkbox input:checked + .selection-indicator {
    background-color: hsl(var(--action-primary));
    border-color: hsl(var(--action-primary));
    color: hsl(var(--surface-primary));
}

.selection-pattern-radio {
    position: relative;
    transition: all var(--timing-fast) ease-out;
}

.selection-pattern-radio input:checked + .selection-indicator::after {
    opacity: 1;
    transform: scale(1);
}

/* ============================================================================
 * ANIMATION PATTERNS - Consistent animations and transitions
 * ============================================================================ */

.fade-in-pattern {
    opacity: 0;
    animation: fade-in var(--timing-normal) ease-out forwards;
}

@keyframes fade-in {
    to {
        opacity: 1;
    }
}

.slide-in-pattern {
    opacity: 0;
    transform: translateY(1rem);
    animation: slide-in var(--timing-normal) ease-out forwards;
}

@keyframes slide-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scale-in-pattern {
    opacity: 0;
    transform: scale(0.95);
    animation: scale-in var(--timing-normal) ease-out forwards;
}

@keyframes scale-in {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .fade-in-pattern,
    .slide-in-pattern,
    .scale-in-pattern {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .hover-pattern,
    .active-pattern,
    .selection-pattern-checkbox,
    .selection-pattern-radio {
        transition: none;
    }
    
    .loading-pattern::after {
        animation: none;
        border-top-color: transparent;
        border-right-color: currentColor;
    }
}

/* ============================================================================
 * RESPONSIVE PATTERNS - Touch-friendly adaptations
 * ============================================================================ */

.touch-target-pattern {
    min-height: var(--space-touch-target);
    min-width: var(--space-touch-target);
}

/* Increase touch targets on mobile */
@media (max-width: 768px) {
    .touch-target-pattern {
        min-height: calc(var(--space-touch-target) + 4px);
        padding: calc(var(--space-component-padding) + 2px);
    }
}

/* ============================================================================
 * SEMANTIC STATE PATTERNS - Consistent visual feedback for states
 * ============================================================================ */

.success-pattern {
    border-color: hsl(var(--feedback-success));
    background-color: hsl(var(--feedback-success) / 0.1);
    color: hsl(var(--feedback-success));
}

.warning-pattern {
    border-color: hsl(var(--feedback-warning));
    background-color: hsl(var(--feedback-warning) / 0.1);
    color: hsl(var(--feedback-warning));
}

.error-pattern {
    border-color: hsl(var(--feedback-error));
    background-color: hsl(var(--feedback-error) / 0.1);
    color: hsl(var(--feedback-error));
}

.info-pattern {
    border-color: hsl(var(--feedback-info));
    background-color: hsl(var(--feedback-info) / 0.1);
    color: hsl(var(--feedback-info));
}

/* ============================================================================
 * LAYOUT PATTERNS - Consistent spacing and alignment
 * ============================================================================ */

.component-pattern {
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.5;
}

.input-pattern {
    display: block;
    width: 100%;
    padding: var(--space-component-padding);
    border: 1px solid hsl(var(--border-primary));
    border-radius: var(--radius-normal);
    background-color: hsl(var(--surface-primary));
    color: hsl(var(--content-primary));
    font-size: var(--text-body);
    font-family: inherit;
    line-height: 1.5;
    transition: border-color var(--timing-fast) ease-out,
                box-shadow var(--timing-fast) ease-out;
}

.button-pattern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-component-gap);
    padding: var(--space-component-padding);
    border: none;
    border-radius: var(--radius-normal);
    background-color: transparent;
    color: hsl(var(--content-primary));
    font-size: var(--text-body);
    font-weight: 500;
    font-family: inherit;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.card-pattern {
    padding: calc(var(--space-component-padding) * 1.5);
    border: 1px solid hsl(var(--border-primary));
    border-radius: var(--radius-large);
    background-color: hsl(var(--surface-secondary));
    box-shadow: var(--shadow-subtle);
}