/**
 * BruteForce AI - Semantic Utility Classes
 * Foundation Sprint Phase 1
 *
 * These utility classes use the semantic tokens from tokens.css
 * to provide consistent, theme-aware styling.
 *
 * Usage: Apply these classes instead of hardcoded Tailwind colors
 * to enable automatic light/dark mode switching.
 */

/* =============================================================================
   BACKGROUND / SURFACE UTILITIES
   ============================================================================= */

.bg-surface-ground {
    background-color: var(--surface-ground);
}

.bg-surface-default {
    background-color: var(--surface-default);
}

.bg-surface-elevated {
    background-color: var(--surface-elevated);
}

.bg-surface-overlay {
    background-color: var(--surface-overlay);
}

.bg-surface-hover {
    background-color: var(--surface-hover);
}

.bg-surface-active {
    background-color: var(--surface-active);
}

.bg-surface-selected {
    background-color: var(--surface-selected);
}

/* Hover state variants */
.hover\:bg-surface-hover:hover {
    background-color: var(--surface-hover);
}

.hover\:bg-surface-active:hover {
    background-color: var(--surface-active);
}

.hover\:bg-surface-selected:hover {
    background-color: var(--surface-selected);
}

/* Focus state variants */
.focus\:bg-surface-elevated:focus {
    background-color: var(--surface-elevated);
}

/* =============================================================================
   TEXT COLOR UTILITIES
   ============================================================================= */

.text-default {
    color: var(--text-default);
}

.text-muted {
    color: var(--text-muted);
}

.text-subtle {
    color: var(--text-subtle);
}

.text-disabled {
    color: var(--text-disabled);
}

.text-inverse {
    color: var(--text-inverse);
}

.text-link {
    color: var(--text-link);
}

/* Hover state for links */
.hover\:text-link-hover:hover {
    color: var(--text-link-hover);
}

/* Hover states for text */
.hover\:text-default:hover {
    color: var(--text-default);
}

.hover\:text-muted:hover {
    color: var(--text-muted);
}

/* =============================================================================
   BORDER COLOR UTILITIES
   ============================================================================= */

.border-default {
    border-color: var(--border-default);
}

.border-muted {
    border-color: var(--border-muted);
}

.border-strong {
    border-color: var(--border-strong);
}

.border-focus {
    border-color: var(--border-focus);
}

/* Focus ring utility */
.focus\:ring-focus:focus {
    --tw-ring-color: var(--border-focus);
}

.focus\:ring-accent-primary:focus {
    --tw-ring-color: var(--accent-primary);
}

.focus\:border-focus:focus {
    border-color: var(--border-focus);
}

/* =============================================================================
   ACCENT PRIMARY UTILITIES
   ============================================================================= */

.bg-accent-primary {
    background-color: var(--accent-primary);
}

.bg-accent-primary-light {
    background-color: var(--accent-primary-light);
}

.text-accent-primary {
    color: var(--accent-primary);
}

.text-accent-primary-text {
    color: var(--accent-primary-text);
}

.border-accent-primary {
    border-color: var(--accent-primary);
}

/* Hover states */
.hover\:bg-accent-primary:hover {
    background-color: var(--accent-primary);
}

.hover\:bg-accent-primary-hover:hover {
    background-color: var(--accent-primary-hover);
}

.hover\:bg-accent-primary-light:hover {
    background-color: var(--accent-primary-light);
}

.hover\:text-accent-primary:hover {
    color: var(--accent-primary);
}

.hover\:border-accent-primary:hover {
    border-color: var(--accent-primary);
}

/* Active states */
.active\:bg-accent-primary-active:active {
    background-color: var(--accent-primary-active);
}

/* =============================================================================
   ACCENT SECONDARY (CTA/CORAL) UTILITIES
   ============================================================================= */

.bg-accent-secondary {
    background-color: var(--accent-secondary);
}

.bg-accent-secondary-light {
    background-color: var(--accent-secondary-light);
}

.text-accent-secondary {
    color: var(--accent-secondary);
}

.text-accent-secondary-text {
    color: var(--accent-secondary-text);
}

.border-accent-secondary {
    border-color: var(--accent-secondary);
}

/* Hover states */
.hover\:bg-accent-secondary-hover:hover {
    background-color: var(--accent-secondary-hover);
}

/* Active states */
.active\:bg-accent-secondary-active:active {
    background-color: var(--accent-secondary-active);
}

/* -----------------------------------------------------------------------------
   ACCENT TERTIARY (Violet) - For filter/category distinctions
   ----------------------------------------------------------------------------- */

.bg-accent-tertiary {
    background-color: var(--accent-tertiary);
}

.bg-accent-tertiary-light {
    background-color: var(--accent-tertiary-light);
}

.text-accent-tertiary {
    color: var(--accent-tertiary);
}

.text-accent-tertiary-text {
    color: var(--accent-tertiary-text);
}

.border-accent-tertiary {
    border-color: var(--accent-tertiary);
}

.border-accent-tertiary-border {
    border-color: var(--accent-tertiary-border);
}

/* Hover states */
.hover\:bg-accent-tertiary-hover:hover {
    background-color: var(--accent-tertiary-hover);
}

/* Active states */
.active\:bg-accent-tertiary-active:active {
    background-color: var(--accent-tertiary-active);
}

/* =============================================================================
   STATUS COLOR UTILITIES
   ============================================================================= */

/* Success */
.bg-status-success {
    background-color: var(--status-success);
}

.bg-status-success-light {
    background-color: var(--status-success-light);
}

.text-status-success {
    color: var(--status-success);
}

.text-status-success-text {
    color: var(--status-success-text);
}

.border-status-success {
    border-color: var(--status-success);
}

/* Success hover states */
.hover\:bg-status-success-hover:hover {
    background-color: var(--status-success-hover);
}

/* Warning */
.bg-status-warning {
    background-color: var(--status-warning);
}

.bg-status-warning-light {
    background-color: var(--status-warning-light);
}

.text-status-warning {
    color: var(--status-warning);
}

.text-status-warning-text {
    color: var(--status-warning-text);
}

.border-status-warning {
    border-color: var(--status-warning);
}

/* Error */
.bg-status-error {
    background-color: var(--status-error);
}

.bg-status-error-light {
    background-color: var(--status-error-light);
}

.text-status-error {
    color: var(--status-error);
}

.text-status-error-text {
    color: var(--status-error-text);
}

.border-status-error {
    border-color: var(--status-error);
}

/* Error hover states */
.hover\:bg-status-error-hover:hover {
    background-color: var(--status-error-hover);
}

.hover\:bg-status-error-light:hover {
    background-color: var(--status-error-light);
}

.hover\:text-status-error:hover {
    color: var(--status-error);
}

.hover\:text-status-error-hover:hover {
    color: var(--status-error-hover);
}

/* Info */
.bg-status-info {
    background-color: var(--status-info);
}

.bg-status-info-light {
    background-color: var(--status-info-light);
}

.text-status-info {
    color: var(--status-info);
}

.text-status-info-text {
    color: var(--status-info-text);
}

.border-status-info {
    border-color: var(--status-info);
}

/* =============================================================================
   COMPONENT PRESET CLASSES
   Pre-combined utility sets for common patterns
   ============================================================================= */

/* Card - elevated surface with border */
.card-surface {
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-default);
}

/* Panel - default surface with subtle border */
.panel-surface {
    background-color: var(--surface-default);
    border: 1px solid var(--border-muted);
}

/* Interactive element base */
.interactive-surface {
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-default);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.interactive-surface:hover {
    background-color: var(--surface-hover);
    border-color: var(--border-strong);
}

/* Primary button preset */
.btn-primary {
    background-color: var(--accent-primary);
    color: var(--accent-primary-text);
    border: none;
    transition: background-color var(--transition-fast);
}

.btn-primary:hover {
    background-color: var(--accent-primary-hover);
}

.btn-primary:active {
    background-color: var(--accent-primary-active);
}

/* Secondary/CTA button preset */
.btn-secondary {
    background-color: var(--accent-secondary);
    color: var(--accent-secondary-text);
    border: none;
    transition: background-color var(--transition-fast);
}

.btn-secondary:hover {
    background-color: var(--accent-secondary-hover);
}

.btn-secondary:active {
    background-color: var(--accent-secondary-active);
}

/* Ghost button preset */
.btn-ghost {
    background-color: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-default);
    transition: all var(--transition-fast);
}

.btn-ghost:hover {
    background-color: var(--surface-hover);
    color: var(--text-default);
    border-color: var(--border-strong);
}

/* Input field preset */
.input-field {
    background-color: var(--surface-elevated);
    color: var(--text-default);
    border: 1px solid var(--border-default);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-field::placeholder {
    color: var(--text-disabled);
}

.input-field:focus {
    border-color: var(--border-focus);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

/* Badge presets */
.badge-primary {
    background-color: var(--accent-primary-light);
    color: var(--accent-primary);
}

.badge-success {
    background-color: var(--status-success-light);
    color: var(--status-success-text);
}

.badge-warning {
    background-color: var(--status-warning-light);
    color: var(--status-warning-text);
}

.badge-error {
    background-color: var(--status-error-light);
    color: var(--status-error-text);
}

.badge-info {
    background-color: var(--status-info-light);
    color: var(--status-info-text);
}

/* =============================================================================
   TRANSITION UTILITIES
   ============================================================================= */

.transition-fast {
    transition-duration: 150ms;
    transition-timing-function: ease;
}

.transition-normal {
    transition-duration: 200ms;
    transition-timing-function: ease;
}

.transition-slow {
    transition-duration: 300ms;
    transition-timing-function: ease;
}