/**
 * Sparkles Shared Utilities - Tailwind CSS
 * Common patterns consolidated from across all components to reduce duplication and ensure consistency
 * Extends: sparkles-utilities.css, sparkles-animations.css, sparkles-tokens.css
 * All 3 optimization layers applied: keyframes consolidated, patterns extracted, component organization
 */

/* ========== SPARKLES DESIGN TOKENS - REMOVED (Phase 7) ========== */
/* CRITICAL FIX: Design tokens moved back to proper location in tokens/sparkles-tokens.css
 * 
 * This utilities file should ONLY contain utility classes that USE tokens,
 * not define them. All design tokens are properly defined in:
 * - tokens/sparkles-tokens.css (main design tokens)
 * - tokens/store-variables.css (store-specific overrides)
 * 
 * This architectural separation ensures:
 * - Single source of truth for design values
 * - Proper CSS cascade and inheritance
 * - Easier maintenance and updates
 * - Clear separation of concerns
 */

/* Z-Index utility classes using semantic CSS variables (keep for consistency) */
.z-dropdown {
    z-index: var(--z-dropdown);
    /* Keep raw for CSS variable */
}

.z-sticky {
    z-index: var(--z-sticky);
    /* Keep raw for CSS variable */
}

.z-fixed {
    z-index: var(--z-fixed);
    /* Keep raw for CSS variable */
}

.z-modal-backdrop {
    z-index: var(--z-modal-backdrop);
    /* Keep raw for CSS variable */
}

.z-modal {
    z-index: var(--z-modal);
    /* Keep raw for CSS variable */
}

.z-popover {
    z-index: var(--z-popover);
    /* Keep raw for CSS variable */
}

.z-tooltip {
    z-index: var(--z-tooltip);
    /* Keep raw for CSS variable */
}

.z-notification {
    z-index: var(--z-notification);
    /* Keep raw for CSS variable */
}

.z-maximum {
    z-index: var(--z-maximum);
    /* Keep raw for CSS variable */
}

/* ========== CRITICAL MISSING CLASSES (Build Fixes) ========== */

/* NOTE: Removed duplicate classes that already exist in:
 * - sparkles-admin-card* classes → admin-unified.css
 * - sparkles-alert → alerts.css  
 * - sparkles-aspect-* → responsive-images.css
 * - sparkles-rounded-* → used in navigation.css, forms-advanced.css
 *
* Only keeping truly missing utility classes needed for @apply statements;
 */

/* Action utilities - these appear to be genuinely missing */
.sparkles-action-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: 1px solid var(--gray-300);
    background-color: var(--white);
    color: var(--gray-700);
}

.sparkles-action-group {
    gap: 0.5rem;
}

/* NOTE: These classes are already defined in tailwind.config.js:
 * - sparkles-btn, sparkles-btn-primary, sparkles-btn-secondary (addUtilities)
 * - sparkles-relative, sparkles-transition-*, sparkles-card-base
 * - All color variants: bg-primary-dark, bg-primary-darker, etc.
 * - No need to duplicate them here
 */

/* REMOVED: sparkles-button-link-sm alias
 * Need to check what this was consolidated to in the refactor
 * and update the references in privacy-consent.css to use the proper class
 */

/* Loading/Spinner utilities */
.sparkles-loading-spinner-centered {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Button compatibility classes removed - causing circular dependency
 * Classes that need sparkles-button-base should use sparkles-btn directly
 * Classes that need sparkles-button-sm should use sparkles-btn-sm directly
 */

/* Font utilities */
.sparkles-font-display {
    font-family: var(--font-display);
}

/* Missing layout classes for build */
.sparkles-design-library>*+* {
    margin-top: 1.5rem;
}

.sparkles-utilities>*+* {
    margin-top: 1rem;
}

/* Missing layout classes for build */
.sparkles-rounded-card {
    border-radius: 0.5rem;
}

.sparkles-isolate {
    isolation: isolate;
}

.sparkles-rounded-sm {
    border-radius: 0.125rem;
}

/* NOTE: sparkles-rounded-* classes already exist and are used in navigation.css, forms-advanced.css */

/* ========== COMMON COLOR/THEME CLASSES ========== */

/* Basic color classes using design tokens */
.sparkles-primary {
    color: var(--color-primary);
}

.sparkles-secondary {
    color: var(--color-secondary);
}

.sparkles-accent {
    color: var(--color-accent);
}

/* Text color classes (missing from consolidation) */
.sparkles-text-primary {
    color: var(--color-primary);
}

/* Background color classes */
.sparkles-bg-primary {
    background-color: var(--color-primary);
}

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

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

/* Text color classes - REMOVED DUPLICATE: .sparkles-text-primary already defined at line 123 */

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

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

/* Brand-specific color aliases */
.sparkles-gold {
    color: var(--color-primary);
}

.sparkles-charcoal {
    color: var(--color-secondary);
}

.sparkles-cream {
    color: var(--color-accent);
}

/* Layout containers */
.sparkles-container,
.sparkles-container-reading,
.sparkles-container-content,
.sparkles-container-wide,
.sparkles-container-responsive {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.sparkles-container {
    max-width: 85rem;
}

.sparkles-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ========== CARD SYSTEM ========== */
/* Button system moved to buttons.css to eliminate duplicates */

/* Base card - replaces duplicate patterns across 5+ files */
.sparkles-card-base,
.sparkles-card-elevated {
    background-color: var(--white);
    border-radius: 0.5rem;
    overflow: hidden;
}

.sparkles-card-base {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--gray-200);
}

/* Card with border - design library variant */
/* Consolidates EXACT duplicates: tables.css (6 selectors), author-profiles.css (1 selector) */
.sparkles-card-bordered-lg,
.sparkles-table-container,
.sparkles-social-proof,
.sparkles-newsletter-bordered,
.sparkles-skeleton-card,
.sparkles-admin-card,
.sparkles-import-container,
.sparkles-author-profile--card {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    border-radius: var(--radius-lg);
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-width: 1px;
    border-color: var(--gray-200);
}

.sparkles-card-interactive,
.sparkles-card-blog,
.sparkles-rule-item-base {
    background-color: var(--white);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.3s ease-out;
}

.sparkles-card-interactive {
    cursor: pointer;
}

.sparkles-card-interactive:hover {
    box-shadow: 0 10px 20px rgb(var(--color-secondary-rgb) / 0.1);
    transform: translateY(-0.25rem);
}

.sparkles-card-elevated {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 2px solid var(--gray-200);
}

.sparkles-card-luxury {
    background-color: var(--white);
    border-radius: 0.5rem;
    border: 2px solid var(--gray-200);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: all 0.5s ease-out;
    border-color: rgb(var(--color-primary-rgb) / 0.2);
}

.sparkles-card-luxury:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(-0.5rem);
}

/* Card sections */
.sparkles-card-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    background-color: rgb(249 250 251 / 0.5);
}

/* Legacy button classes removed - use sparkles-button-* utilities or components from buttons.css instead */

.sparkles-card-body {
    padding: 1.5rem;
}

.sparkles-card-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--gray-200);
    background-color: rgba(249, 250, 251, 0.5);
}

/* ========== FORM SYSTEM ========== */

/* Base input - replaces duplicate patterns across 4+ files */
.sparkles-input-base,
.sparkles-input-error,
.sparkles-input-success,
.sparkles-admin-input,
.sparkles-admin-select {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--white);
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
}

.sparkles-input-base,
.sparkles-input-error,
.sparkles-input-success {
    font-size: 1rem;
}

.sparkles-admin-input,
.sparkles-admin-select {
    font-size: 0.875rem;
    opacity: 1;
}

.sparkles-input-base,
.sparkles-admin-input,
.sparkles-admin-select {
    border: 2px solid var(--gray-300);
}

.sparkles-input-error {
    border: 2px solid var(--color-error);
}

.sparkles-input-success {
    border: 2px solid var(--color-success);
}

.sparkles-input-base:disabled,
.sparkles-input-error:disabled,
.sparkles-input-success:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sparkles-input-base::placeholder,
.sparkles-input-error::placeholder,
.sparkles-input-success::placeholder {
    color: var(--gray-500);
}

.sparkles-input-base:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgb(var(--color-primary-rgb) / 0.1);
    outline: none;
}

.sparkles-input-error:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.sparkles-input-success:focus {
    border-color: var(--color-success);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

/* Form utilities - Note: Full form components are in forms.css
   Keeping only input utilities here to avoid conflicts */

/* ========== STATUS SYSTEM ========== */

/* Base badge - replaces duplicate patterns across 6+ files */
.sparkles-status-base,
.sparkles-status-info {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

/* NOTE: .sparkles-status-success, .sparkles-status-error, .sparkles-status-warning,
 * .sparkles-status-neutral are defined in sparkles-status.css to avoid duplicates */

.sparkles-status-info {
    color: var(--color-primary-dark);
    background-color: rgb(var(--color-primary-rgb) / 0.1);
}

/* ========== LOADING SYSTEM ========== */

/* Base spinner - replaces duplicate patterns across 8+ files */
.sparkles-spinner-base {
    border: 4px solid var(--gray-200);
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;
    border-top-color: var(--color-primary);
}

.sparkles-spinner-xs,
.sparkles-spinner-sm,
.sparkles-spinner-md,
.sparkles-spinner-lg,
.sparkles-spinner-xl {
    border-radius: var(--radius-full);
}

.sparkles-spinner-xs,
.sparkles-spinner-sm {
    border: 2px solid var(--gray-200);
}

.sparkles-spinner-md,
.sparkles-spinner-lg,
.sparkles-spinner-xl {
    border: 4px solid var(--gray-200);
}

.sparkles-spinner-xs {
    width: 0.75rem;
    height: 0.75rem;
}

.sparkles-spinner-sm {
    width: 1rem;
    height: 1rem;
}

.sparkles-spinner-md {
    width: 1.5rem;
    height: 1.5rem;
}

.sparkles-spinner-lg {
    width: 2rem;
    height: 2rem;
}

.sparkles-spinner-xl {
    width: 3rem;
    height: 3rem;
}

/* Color variants */
.sparkles-spinner-white {
    border-color: rgb(var(--color-white-rgb) / 0.3);
    border-top-color: white;
}

.sparkles-spinner-primary {
    border-color: rgb(var(--color-primary-rgb) / 0.2);
    border-top-color: var(--color-primary);
}

/* ========== LAYOUT UTILITIES ========== */

/* Position utilities that provide genuine convenience (keep compound utilities) */
.sparkles-absolute-center,
.sparkles-animation-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sparkles-flex-center-col,
.sparkles-flex-col-center,
.sparkles-countdown-unit,
.sparkles-countdown-unit-base {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.sparkles-flex-center-col {
    justify-content: center;
}

.sparkles-flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sparkles-flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Additional compound flex patterns that provide convenience */
.sparkles-flex-between-start,
.sparkles-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Responsive flex patterns */
.sparkles-flex-responsive {
    display: flex;
    flex-direction: column;
}

.sparkles-flex-responsive-gap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Grid utilities */
.sparkles-grid-auto {
    gap: 1.5rem;
}

.sparkles-grid-responsive {
    gap: 1rem;
}

/* ========== ANIMATION UTILITIES ========== */

/* Base transition utilities - consolidates 20+ duplicate transition patterns */
.sparkles-transition-fast {
    transition: all 0.15s ease-out;
}

.sparkles-transition-normal {
    transition: all 0.3s ease-out;
}

.sparkles-transition-slow {
    transition: all 0.5s ease-out;
}

.sparkles-transition-smooth {
    transition: all 0.2s ease-in-out;
}

/* Legacy transition aliases */
.sparkles-transition-legacy {
    transition: all 0.3s ease-in-out;
}

/* Specific transition types for common use cases */
.sparkles-transition-colors {
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
}

/* .sparkles-transition-transform merged into consolidated block below */

.sparkles-transition-opacity {
    transition: opacity 0.3s ease-out;
}

/* ========== CONSOLIDATED TRANSITION PATTERNS ========== */
/* These replace the most common inline transition patterns found across files */

/* Most common: transition-all duration-150 ease-out (8+ instances in media-gallery, social, tooltip) */
.sparkles-transition-quick-out {
    transition: all 0.15s ease-out;
}

/* Common: transition-all duration-200 (12+ instances across multiple files) */
.sparkles-transition-quick {
    transition: all 0.2s ease-out;
}

/* Common: transition-all duration-300 (5+ instances) */
.sparkles-transition-medium {
    transition: all 0.3s ease-out;
}

/* Phase 5 Refactoring: Abstracted Base Transition */
.sparkles-transition-base {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Animation classes removed - keyframes missing or misnamed. Use animation utilities from sparkles-animations.css instead. */

/* ========== SHARED KEYFRAMES ========== */

/* sparkles-spin keyframe moved to animations/sparkles-animations.css */

/* ========== ACCESSIBILITY UTILITIES ========== */


/* Focus utilities */
.sparkles-focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px rgb(var(--color-primary-rgb) / 0.1);
}

/* Accessibility transition disable - common pattern across files */
.sparkles-no-transition {
    transition: none;
}

/* Reduced motion utility */
@media (prefers-reduced-motion: reduce) {
    .sparkles-respect-motion {
        animation: none;
        transition: none;
    }
}

.sparkles-focus-visible:focus {
    outline: none;
}

.sparkles-focus-visible:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px rgb(var(--color-primary-rgb) / 0.1);
}

/* ========== ANIMATION PATTERN UTILITIES ========== */
/* Extracted from sparkles-animations.css - common patterns (148+ instances) */

/* Position utilities for animation containers */
.sparkles-animation-container {
    position: relative;
    overflow: hidden;
}

/* Common transition patterns (20+ instances extracted) - Note: .transition-all duration-300 ease-out defined above */

/* REMOVED: Duplicate .sparkles-transition-transform and .sparkles-transition-quick - already defined above */

.sparkles-transition-long {
    transition: all 0.6s var(--animation-easing);
    /* Keep raw for CSS variable */
}

/* Icon Rotation */
.icon-rotate:hover,
.icon-spin:hover,
.sparkle-rotate:hover {
    animation: sparkles-rotate 0.5s ease-in-out;
}

/* Phase 5 Refactoring: Consolidated Transition Utility (Selector Grouping) */
.sparkles-transition-transform,
.product-detail-sparkles .product-media-sparkles .product-image-photo,
.sparkle-scale,
.sparkles-product-image img,
.sparkles-gallery-image img,
.sparkles-countdown-flip .sparkles-countdown-number {
    transition-property: transform;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover animation utilities (common patterns) */
.sparkles-hover-lift {
    transition: all 0.3s ease-out;
}

.sparkles-hover-lift:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.sparkles-hover-scale {
    transition: transform 0.3s;
}

.sparkles-hover-scale:hover {
    transform: scale(1.02);
}

/* Custom text hover effect for brand color */
.group:hover .sparkles-text-brand-hover {
    color: var(--color-primary);
}

/* Catalog text hover effect - brand color */
.group:hover .sparkles-catalog-hover {
    color: var(--color-primary);
}

/* Transform utilities for animations */
.sparkles-preserve-3d {
    transform-style: preserve-3d;
    /* Keep raw for 3D transforms */
}

.sparkles-backface-hidden {
    backface-visibility: hidden;
    /* Keep raw for 3D transforms */
}

/* Animation state utilities */
.sparkles-animation-paused {
    animation-play-state: paused;
    /* Keep raw for animation control */
}

.sparkles-animation-running {
    animation-play-state: running;
    /* Keep raw for animation control */
}

/* ========== RESPONSIVE UTILITIES ========== */

/* Common responsive patterns */
@media (max-width: 768px) {
    .sparkles-mobile-stack {
        flex-direction: column;
    }

    .sparkles-mobile-full {
        width: 100%;
    }

    .sparkles-mobile-text-center {
        text-align: center;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .transition-all,
    .duration-150,
    .ease-out,
    .sparkles-transition-normal,
    .duration-500 {
        transition: none;
        animation: none;
    }
}

/* High contrast support */
@media (prefers-contrast: high) {
    .sparkles-btn-primary {
        border: 2px solid var(--black);
    }

    .sparkles-btn-secondary {
        border: 2px solid var(--black);
    }

    .sparkles-btn-danger {
        border: 2px solid var(--black);
    }

    .sparkles-btn-success {
        border: 2px solid var(--black);
    }

    .sparkles-card-base {
        border: 2px solid var(--black);
    }
}

/* ========== CMS-SPECIFIC UTILITIES ========== */

/* CMS text utilities - common patterns from cms-pages.css */
.sparkles-text-content-base {
    line-height: 1.625;
    color: var(--color-slate);
}

.sparkles-text-list-item {
    margin-bottom: 0.5rem;
    line-height: 1.625;
}

.sparkles-text-list-item:last-child {
    margin-bottom: 0;
}

.sparkles-img-block-rounded {
    overflow: hidden;
    border-radius: 0.5rem;
}

.sparkles-img-hover-lift {
    transition: transform 0.2s ease-out;
}

.sparkles-img-hover-lift:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* CMS layout utilities - common responsive patterns */
.sparkles-responsive-flex {
    gap: 2rem;
}

@media (max-width: 768px) {
    .sparkles-responsive-flex {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
}

.sparkles-responsive-grid-2 {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Keep raw for complex grid */
}

.sparkles-responsive-grid-3 {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* Keep raw for complex grid */
}

.sparkles-responsive-grid-4 {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    /* Keep raw for complex grid */
}

@media (max-width: 768px) {

    .sparkles-responsive-grid-2,
    .sparkles-responsive-grid-3,
    .sparkles-responsive-grid-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* CMS container patterns - reading-optimized widths */
.sparkles-container-reading {
    max-width: 48rem;
}

.sparkles-container-content {
    max-width: 56rem;
}

.sparkles-container-wide {
    max-width: 72rem;
}

@media (min-width: 768px) {

    .sparkles-container-reading,
    .sparkles-container-content,
    .sparkles-container-wide {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ========== NAVIGATION & TABLE SHARED UTILITIES ========== */

/* Interactive hover states - common across navigation and tables */
.sparkles-interactive-row {
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.sparkles-surface-hover {
    background-color: var(--gray-50);
}

/* Table specific utilities */
.sparkles-table-cell-header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sparkles-table-cell-body {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: var(--gray-900);
    border-bottom: 1px solid var(--gray-200);
}

/* Common hover lift patterns for cards and interactive elements */
.sparkles-hover-lift-subtle {
    transition: all 0.3s ease-out;
}

.sparkles-hover-lift-subtle:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Interactive shadows for buttons and cards */
.sparkles-shadow-interactive {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease-out;
}

.sparkles-shadow-interactive:hover {
    box-shadow: 0 6px 12px rgb(var(--color-secondary-rgb) / 0.08);
}

/* Interactive borders for form elements and cards */
.sparkles-border-interactive {
    border: 2px solid var(--gray-300);
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.sparkles-border-interactive:hover {
    border-color: var(--gray-400);
}

/* Common spacing patterns */
.sparkles-spacing-compact {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.sparkles-spacing-normal {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Common border radius patterns for consistency - REMOVED (Phase 5A)
 * Use Tailwind's rounded-sm, rounded-md, rounded-lg directly instead
 */

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .sparkles-card-base {
        background-color: var(--gray-800);
        border-color: var(--gray-700);
    }

    .sparkles-card-header,
    .sparkles-card-footer {
        background-color: rgba(17, 24, 39, 0.5);
        border-color: var(--gray-700);
    }

    .sparkles-input-base {
        background-color: var(--gray-800);
        border-color: var(--gray-600);
        color: var(--white);
    }

    /* Note: Form label styles moved to forms.css */
}

/* ========== TASK 4: COMPONENT PATTERN EXTRACTION ========== */

/* Additional transition patterns not already covered */
.sparkles-transition-colors-smooth {
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.sparkles-transition-transform-smooth {
    transition: transform 0.3s ease-out;
}

/* Enhanced hover lift effects */
.sparkles-hover-lift-medium {
    transition: all 0.3s ease-out;
}

.sparkles-hover-lift-medium:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 20px 40px rgb(var(--color-secondary-rgb) / 0.12);
}

.sparkles-hover-lift-strong {
    transition: all 0.3s ease-out;
}

.sparkles-hover-lift-strong:hover {
    transform: translateY(-1rem);
}

/* Scale hover effects */
.sparkles-hover-scale-subtle {
    transition: transform 0.3s;
}

.sparkles-hover-scale-subtle:hover {
    transform: scale(1.05);
}

.sparkles-hover-scale-medium {
    transition: transform 0.3s;
}

.sparkles-hover-scale-medium:hover {
    transform: scale(1.1);
}

/* Enhanced interactive shadows */
.sparkles-shadow-interactive-strong {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease-out;
}

.sparkles-shadow-interactive-strong:hover {
    box-shadow: 0 20px 40px rgb(var(--color-secondary-rgb) / 0.12);
}

/* Button-like patterns */
.sparkles-pill-button,
.sparkles-rounded-button {
    padding-left: 1rem;
    padding-right: 1rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.sparkles-pill-button {
    border-radius: var(--radius-full);
    padding-block: 0.75rem;
}

.sparkles-rounded-button {
    border-radius: 0.5rem;
    padding-block: 0.5rem;
}

/* Icon + text layout patterns */
.sparkles-icon-text {
    gap: 0.5rem;
}

.sparkles-icon-text-lg {
    gap: 0.75rem;
}

/* Focus states - consistent focus rings */
.sparkles-focus-primary {
    box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / 0.1);
    /* Keep raw for rgba */
}

.sparkles-focus-primary-strong {
    box-shadow: 0 0 0 2px var(--color-primary);
    /* Keep raw for CSS variable */
}

/* Enhanced card patterns */
.sparkles-card-interactive-basic,
.sparkles-card-interactive-emphasis {
    background-color: var(--white);
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
}

.sparkles-card-interactive-basic {
    border: 1px solid var(--gray-200);
    padding: 1rem;
}

.sparkles-card-interactive-basic:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-0.125rem);
}

.sparkles-card-interactive-emphasis {
    border: 2px solid var(--gray-200);
    padding: 1.5rem;
}

.sparkles-card-interactive-emphasis:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-0.25rem);
}

/* Animation easing patterns */
.transition-timing-function-bounce {
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    /* Keep raw for custom cubic-bezier */
}

.sparkles-easing-expo {
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    /* Keep raw for custom cubic-bezier */
}

/* ========== ADMIN-SPECIFIC UTILITIES (from Task 1 consolidation) ========== */

/* Admin layout helpers - common patterns from admin files */
.sparkles-admin-section,
.sparkles-admin-section>*+*,
.sparkles-admin-field-group,
.sparkles-admin-field-group>*+* {
    --space-y-reverse: 0;
    margin-top: calc(var(--sparkles-admin-space) * calc(1 - var(--space-y-reverse)));
    margin-bottom: calc(var(--sparkles-admin-space) * var(--space-y-reverse));
}

.sparkles-admin-section,
.sparkles-admin-section>*+* {
    --sparkles-admin-space: 1.5rem;
}

.sparkles-admin-field-group,
.sparkles-admin-field-group>*+* {
    --sparkles-admin-space: 1rem;
}

.sparkles-admin-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Status badge utilities - extracted from admin components */
.sparkles-status-badge {
    display: inline-flex;
    align-items: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

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

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

.sparkles-status-badge.error {
    background-color: var(--color-error-lighter);
    color: var(--color-error-dark);
}

.sparkles-status-badge.info {
    background-color: rgb(var(--color-primary-rgb) / 0.1);
    color: var(--color-primary-dark);
}

.sparkles-status-badge.neutral {
    background-color: var(--gray-100);
    color: var(--gray-800);
}

/* Admin form control utilities */
.sparkles-admin-select {
    appearance: none;
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    /* Keep raw for data URL */
}

.sparkles-admin-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--white);
    border: 2px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s ease-in-out;
    resize: vertical;
    min-height: 80px;
}

.sparkles-admin-textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sparkles-admin-textarea::placeholder {
    color: var(--gray-500);
}

/* Admin button size variants - commonly used patterns */
.sparkles-btn-admin-sm,
.sparkles-btn-admin-xs {
    padding-left: var(--sparkles-admin-btn-pad-x);
    padding-right: var(--sparkles-admin-btn-pad-x);
    padding-top: var(--sparkles-admin-btn-pad-y);
    padding-bottom: var(--sparkles-admin-btn-pad-y);
    font-size: 0.75rem;
}

.sparkles-btn-admin-sm {
    --sparkles-admin-btn-pad-x: 0.5rem;
    --sparkles-admin-btn-pad-y: 0.25rem;
}

.sparkles-btn-admin-xs {
    --sparkles-admin-btn-pad-x: 0.375rem;
    --sparkles-admin-btn-pad-y: 0.125rem;
}

/* Meta information display */
.sparkles-meta-info {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.sparkles-meta-group {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.sparkles-meta-group>*+* {
    margin-left: 0.5rem;
}

/* Admin grid layouts - common responsive patterns */
.sparkles-admin-grid-2 {
    gap: 1rem;
}

@media (min-width: 768px) {
    .sparkles-admin-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sparkles-admin-grid-3 {
    gap: 1rem;
}

@media (min-width: 768px) {
    .sparkles-admin-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .sparkles-admin-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.sparkles-admin-grid-auto {
    gap: 1rem;
}

@media (min-width: 640px) {
    .sparkles-admin-grid-auto {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .sparkles-admin-grid-auto {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Rule and configuration item layouts */
.sparkles-config-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--gray-100);
}

.sparkles-config-row:last-child {
    border-bottom: 0;
}

.sparkles-rule-item-base {
    padding: 1rem;
    transition: box-shadow 0.2s ease-out;
}

.sparkles-rule-item-base:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* ========== CONSOLIDATED RESPONSIVE UTILITIES ========== */

/* Mobile-specific utilities for common patterns */
@media (max-width: 768px) {

    /* Typography adjustments */
    .sparkles-mobile-text-sm {
        font-size: 0.875rem;
    }

    .sparkles-mobile-text-xs {
        font-size: 0.75rem;
    }

    /* Spacing adjustments */
    .sparkles-mobile-p-4 {
        padding: 1rem;
    }

    .sparkles-mobile-p-6 {
        padding: 1.5rem;
    }

    .sparkles-mobile-px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .sparkles-mobile-py-3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    /* Grid adjustments */
    .sparkles-mobile-grid-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .sparkles-mobile-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Flex adjustments */
    .sparkles-mobile-flex-col {
        flex-direction: column;
    }

    .sparkles-mobile-gap-2 {
        gap: 0.5rem;
    }

    .sparkles-mobile-gap-4 {
        gap: 1rem;
    }

    /* Width adjustments */
    .sparkles-mobile-w-full {
        width: 100%;
    }

    /* Position adjustments */
    .sparkles-mobile-static {
        position: static;
    }

    /* Transform adjustments */
    .sparkles-mobile-transform-none {
        transform: none;
    }

    /* Visibility adjustments */
    .sparkles-mobile-hidden {
        display: none;
    }

    /* Modal specific */
    .sparkles-mobile-modal-full {
        width: 100%;
        height: 100%;
        max-width: none;
        border-radius: 0;
    }

    /* Navigation specific */
    .sparkles-mobile-nav-vertical {
        flex-direction: column;
        width: 100%;
    }

    /* Button specific */
    .sparkles-mobile-btn-full {
        width: 100%;
        justify-content: center;
    }
}

/* Desktop-specific utilities */
@media (min-width: 769px) {
    .sparkles-desktop-flex {
        display: flex;
    }

    .sparkles-desktop-hidden {
        display: none;
    }

    .sparkles-desktop-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sparkles-desktop-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Reduced motion override for Task 1 & 4 utilities */
@media (prefers-reduced-motion: reduce) {

    .sparkles-hover-lift-medium,
    .sparkles-hover-lift-strong,
    .sparkles-hover-scale-subtle,
    .sparkles-hover-scale-medium,
    .sparkles-shadow-interactive-strong,
    .sparkles-card-interactive-basic,
    .sparkles-card-interactive-emphasis,
    .sparkles-rule-item-base {
        transition: none;
        transform: none;
    }
}

/* ========== MODAL & OVERLAY UTILITIES ========== */
.sparkles-modal-backdrop,
.sparkles-modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-out;
    background-color: rgb(var(--color-black-rgb) / 0.5);
}

.sparkles-modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0.95);
    background-color: var(--white);
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-out;
    max-width: 56rem;
    width: 100%;
    overflow: hidden;
    max-height: 90vh;
}

.sparkles-modal-close-button:hover {
    color: var(--gray-700);
    background-color: var(--gray-100);
}

/* REMOVED: .sparkles-button-ghost-hover - use .sparkles-btn-ghost:hover from buttons.css */

.sparkles-lightbox-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out;
    background-color: rgb(var(--color-black-rgb) / 0.9);
}

.sparkles-lightbox-control-button {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    border-radius: 0.5rem;
    color: var(--white);
    transition: all 0.2s ease-out;
    background-color: rgb(var(--color-white-rgb) / 0.1);
}

.sparkles-lightbox-control-hover {
    background-color: rgb(var(--color-white-rgb) / 0.2);
}

.sparkles-confirm-dialog {
    background-color: var(--white);
    border-radius: 0.75rem;
    padding: 2rem;
    max-width: 28rem;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Drawer utilities */
.sparkles-drawer-base {
    position: fixed;
    top: 0;
    bottom: 0;
    background-color: var(--white);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: var(--z-modal-backdrop);
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
}

/* Notification utilities */
.sparkles-notification-toast {
    position: fixed;
    right: 1rem;
    max-width: 24rem;
    width: 100%;
    background-color: var(--white);
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    padding: 1rem;
    pointer-events: auto;
    z-index: var(--z-notification);
    transform: translateX(0);
    transition: all 0.3s ease-out;
}

/* Custom font classes - REMOVED (Phase 5B)
 * Now available through Tailwind config:
 * .font-display → font-display (from tailwind.config.js)
 * .font-heading → font-heading (from tailwind.config.js)
 * .font-primary → font-primary (from tailwind.config.js)
 * .font-secondary → font-secondary (from tailwind.config.js)
 */

/* Custom Sparkles color classes - REMOVED (Phase 5B)
 * Now available through Tailwind config:
 * .bg-sparkles-charcoal → bg-sparkles-charcoal (from tailwind.config.js)
 * .bg-sparkles-cream → bg-sparkles-cream (from tailwind.config.js)  
 * .bg-sparkles-gold → bg-sparkles-gold (from tailwind.config.js)
 * .text-sparkles-charcoal → text-sparkles-charcoal (from tailwind.config.js)
 * .text-sparkles-cream → text-sparkles-cream (from tailwind.config.js)
 * .text-sparkles-gold → text-sparkles-gold (from tailwind.config.js)
 * .border-sparkles-charcoal → border-sparkles-charcoal (from tailwind.config.js)
 * .border-sparkles-cream → border-sparkles-cream (from tailwind.config.js)
 * .border-sparkles-gold → border-sparkles-gold (from tailwind.config.js)
 */

/* Gradient color utilities for Tailwind gradients - REMOVED (Phase 5B)
 * Use Tailwind's gradient system with config colors instead:
 * .from-cream → from-accent or from-sparkles-cream
 * .to-cream → to-accent or to-sparkles-cream
 * .via-cream → via-accent or via-sparkles-cream
 * .from-gold-light → from-primary-light
 * .to-gold-light → to-primary-light  
 * .via-gold-light → via-primary-light
 * 
 * Gradient backgrounds available via:
 * bg-gradient-primary, bg-gradient-premium, bg-gradient-sparkles (from tailwind.config.js)
 */

/* Background color utilities - REMOVED (Phase 5B)
 * Use Tailwind config classes instead: bg-accent or bg-sparkles-cream
 */

/* Aspect ratio utilities */
.sparkles-aspect-ultrawide {
    aspect-ratio: 21/9;
}

.sparkles-container-responsive {
    max-width: 80rem;
}

/* REMOVED: Button utilities - use buttons.css classes instead
 * .sparkles-button-base → .sparkles-btn
 * .sparkles-button-primary → .sparkles-btn-primary
 * .sparkles-button-secondary → .sparkles-btn-secondary
 * These are defined in components/buttons.css with better implementations
 */

/* Modal utilities - REMOVED: Duplicates exist in modals.css */
/* .sparkles-modal-backdrop is defined in components/modals.css */

.sparkles-modal-content-lg {
    position: relative;
    background-color: var(--white);
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 1.5rem;
    width: 100%;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    transition: transform 0.3s ease-out;
    transform: scale(0.95);
}

/* Card and interactive utilities */
/* REMOVED: Duplicate .sparkles-card-interactive - using the more complete definition at line 42 */

.sparkles-toggle-active {
    background-color: var(--color-primary);
}

.sparkles-toggle-thumb {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--white);
    border-radius: var(--radius-full);
    transition: transform 0.2s ease-out;
}

/* Status and focus utilities */
.sparkles-status-indicator {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    padding: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease-out;
}

.sparkles-surface-hover-lift:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-0.25rem);
}

.sparkles-focus-ring {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px rgb(var(--color-primary-rgb) / 0.1);
}

.sparkles-focus-ring-tight {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 3px rgb(var(--color-primary-rgb) / 0.1);
}

/* Font utilities - REMOVED (Phase 5B)
 * Use Tailwind config classes instead: font-secondary
 */

/* Text color utilities - REMOVED (Phase 5B)
 * Use Tailwind config classes instead:
 * .text-primary-hover → text-primary-dark (from tailwind.config.js)
 * .text-primary-dark → text-primary-dark (from tailwind.config.js)
 */

/* .font-primary - REMOVED (Phase 5B)
 * Use Tailwind config class instead: font-primary
 */

/* Background color utilities - REMOVED (Phase 5B)
 * Use Tailwind config classes instead: bg-primary-dark
 */

/* Carousel utility classes */
.sparkles-carousel-base {
    position: relative;
    overflow: hidden;
    background-color: var(--white);
    border-radius: 0.5rem;
}



.sparkles-carousel-button-hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    color: var(--color-primary);
}

.sparkles-recommendations-section {
    background-color: var(--gray-50);
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}

.sparkles-indicator-dot {
    width: 0.75rem;
    height: 0.75rem;
    background-color: var(--gray-300);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.sparkles-indicator-active {
    transform: scale(1.25);
    background-color: var(--color-primary);
}

.animation-pause {
    animation-play-state: paused;
}

/* Loading and skeleton utilities - REMOVED: Use loading-states.css classes instead */
/* .sparkles-loading-spinner-centered - use .sparkles-spinner-base with positioning utilities */

.sparkles-skeleton-item {
    background-color: var(--gray-200);
    border-radius: 0.25rem;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Additional height utilities - REMOVED (Phase 5A)
 * Use Tailwind arbitrary values instead:
 * min-h-75 → min-h-[18.75rem] or min-h-[300px]
 * w-75 → w-[18.75rem] or w-[300px]
 * w-100 → w-[25rem] or w-[400px]
 * w-150 → w-[37.5rem] or w-[600px]
 * w-200 → w-[50rem] or w-[800px]
 * w-225 → w-[56.25rem] or w-[900px]  
 * w-300 → w-[75rem] or w-[1200px]
 * w-60 → w-[15rem] or w-[240px]
 * w-70 → w-[17.5rem] or w-[280px]
 * min-w-60 → min-w-[15rem] or min-w-[240px]
 * min-w-70 → min-w-[17.5rem] or min-w-[280px]
 * h-125 → h-[31.25rem] or h-[500px]
 * h-7-5 → h-[1.875rem] or h-[30px]
 */

/* Blog component utilities */
.sparkles-card-blog {
    padding: 0;
}

.sparkles-card-blog:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.sparkles-card-hover-lift:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.sparkles-blog-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.75rem;
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sparkles-blog-excerpt {
    color: var(--gray-600);
    line-height: 1.625;
}

.sparkles-read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease-out;
    color: var(--color-primary);
}

.sparkles-badge-category,
.sparkles-post-meta .sparkles-category-badge {
    display: inline-flex;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-badge);
    color: var(--color-primary);
    background-color: rgb(var(--color-primary-rgb) / 0.1);
}

.sparkles-badge-hover:hover {
    background-color: var(--gray-200);
}

/* .sparkles-author-card moved to author-profiles.css (grouped with .sparkles-author-info) */

.sparkles-author-link {
    font-weight: 600;
    color: var(--gray-800);
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.sparkles-author-link:hover {
    color: var(--color-primary);
}

.sparkles-tag-button {
    display: inline-flex;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    background-color: var(--gray-100);
    color: var(--gray-700);
    font-size: 0.875rem;
    border-radius: 0.375rem;
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.sparkles-tag-button:hover {
    background-color: var(--gray-200);
}

.sparkles-tag-active {
    color: var(--white);
    background-color: var(--color-primary);
}

.sparkles-pagination-button {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.sparkles-pagination-button:hover {
    background-color: var(--gray-50);
}

.sparkles-pagination-hover {
    transition: all 0.2s ease-out;
}

.sparkles-pagination-hover:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.sparkles-card-sidebar {
    background-color: var(--white);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--gray-200);
    padding: 1.5rem;
}

.sparkles-list-item-interactive {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.sparkles-list-item-interactive:hover {
    background-color: var(--gray-50);
}

.sparkles-interactive-slide:hover {
    transform: translateX(0.25rem);
}

.sparkles-category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700);
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.sparkles-category-link:hover {
    color: var(--color-primary);
}

.sparkles-category-hover:hover {
    background-color: var(--gray-50);
    transform: translateX(0.25rem);
}

.sparkles-search-input {
    width: 100%;
    padding-left: 1rem;
    padding-right: 3rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
}

.sparkles-search-input:focus {
    box-shadow: 0 0 0 2px rgb(var(--color-primary-rgb) / 0.2);
}

.sparkles-input-base:focus,
.sparkles-search-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

.sparkles-input-focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgb(var(--color-primary-rgb) / 0.2);
}

/* sparkles-newsletter-input removed - defined in newsletter.css */

/* Width utilities for blog components - REMOVED (Phase 5A)
 * Use Tailwind arbitrary values instead:
 * w-15 → w-[3.75rem] or w-[60px]  
 * h-15 → h-[3.75rem] or h-[60px]
 */

/* Additional color utilities - REMOVED (Phase 5B)
 * Use Tailwind config classes instead:
 * .sparkles-text-primary → text-primary
 * .text-charcoal → text-secondary
 * .to-primary-dark → to-primary-dark (from tailwind.config.js)
 * .bg-primary-dark → bg-primary-dark (from tailwind.config.js)
 */

/* REMOVED: Simple shadow utilities - use Tailwind's shadow-xl and shadow-2xl instead
 * .shadow-luxury → shadow-xl
 * .shadow-luxury-lg → shadow-2xl
 */

/* Countdown component utilities */
.sparkles-countdown-base {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--white);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.sparkles-countdown-number-base {
    --sparkles-type-size: 1.5rem;
    --sparkles-type-weight: 700;
    --sparkles-type-margin-bottom: 0.25rem;
}

.sparkles-countdown-label-base {
    font-size: 0.75rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sparkles-countdown-premium {
    color: var(--white);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    background: linear-gradient(to bottom right, var(--color-primary), var(--color-primary-dark));
}

.sparkles-countdown-unit-boxed {
    background-color: var(--gray-100);
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* TW v4.1 upgrade path: drop-shadow() below can use native colored drop-shadow utilities
   e.g. drop-shadow-primary/30 or @utility sparkles-countdown-glow { ... } with drop-shadow-* tokens */
.sparkles-countdown-glow {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    filter: drop-shadow(0 0 10px rgb(var(--color-primary-rgb) / 0.3));
}

/* TW v4.1 upgrade path: text-shadow is now a first-class utility in Tailwind v4.1.
   This class can be replaced with @utility sparkles-text-glow { text-shadow: ... } or
   native text-shadow-* utilities (text-shadow-sm, text-shadow-lg) with custom color tokens. */
.sparkles-text-glow {
    text-shadow: 0 0 10px rgb(var(--color-primary-rgb) / 0.5);
}

.sparkles-countdown-urgent-style {
    background-color: var(--color-error);
    color: var(--white);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.sparkles-progress-fill-animated {
    height: 100%;
    transition: all 0.5s ease-out;
    background-color: var(--color-primary);
}

.sparkles-banner-promotional {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    color: var(--white);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    background: linear-gradient(to right, var(--color-primary), var(--color-primary-dark));
}

/* ========== PHASE 2: ONLY TRULY MISSING/CUSTOM UTILITIES ========== */
/* These utilities either don't exist in standard Tailwind or need custom Sparkles behavior */

/* NOTE: Transition utilities already exist in tailwind.config.js:
 * - sparkles-transition-quick (line 298) - different implementation!
 * - sparkles-transition-standard (line 301)  
 * - sparkles-transition-long (line 304)
 * No need to duplicate them here
 */

/* NOTE: sparkles-btn-primary and sparkles-btn-secondary already exist in sparkles-utilities.css 
 * - Line 563+ contains the existing button definitions
 * - No need to duplicate them here
 */

/* Focus ring utility - custom implementation (defined at line 621, do not duplicate) */

/* ========== ADDITIONAL MISSING UTILITIES ========== */

/* Animated input with focus ring */
.sparkles-input-animated {
    transition-property: all;
    transition-duration: 200ms;
}

.sparkles-input-animated:focus {
    box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / 0.1);
}

/* Mega menu positioning */
.sparkles-mega-menu {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    background-color: var(--white);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Video player container */
.sparkles-video-player {
    aspect-ratio: 16/9;
    background-color: var(--black);
    position: relative;
}

/* Soft shadow with transition */
.sparkles-shadow-soft {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition-property: box-shadow;
    transition-duration: 200ms;
}

.sparkles-shadow-soft:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Component border radius */
.sparkles-rounded-component {
    border-radius: 0.5rem;
}

/* Custom styled scrollbar */
.sparkles-scrollbar-styled {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-primary-rgb) / 0.3) transparent;
}

.sparkles-scrollbar-styled::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.sparkles-scrollbar-styled::-webkit-scrollbar-track {
    background-color: transparent;
}

.sparkles-scrollbar-styled::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-primary-rgb) / 0.3);
    border-radius: var(--radius-full);
}

.sparkles-scrollbar-styled::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--color-primary-rgb) / 0.5);
}

.sparkles-min-h-auto {
    min-height: auto;
}

/* Confetti container */
.sparkles-confetti-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: var(--z-low);
}

/* ========== TOUCH TARGET ENFORCEMENT ========== */
/* Replaces JS loop in mobile-enhancements.source.js (Phase 0, P0 priority)
 * Ensures all interactive elements meet 44x44px minimum for touch devices
 * WCAG 2.1 Level AAA: Target Size (2.5.5)
 */
@media (pointer: coarse) {

    a,
    button,
    input,
    select,
    textarea,
    [role="button"],
    [role="link"],
    [role="tab"],
    [tabindex]:not([tabindex="-1"]) {
        min-block-size: 44px;
        min-inline-size: 44px;
    }

    /* Icon buttons need padding to reach 44px */
    .icon-button,
    .btn-icon {
        padding: 0.625rem;
        /* 10px padding + 24px icon = 44px total */
    }

    /* Small buttons in button groups */
    .btn-group button,
    .button-group button {
        min-inline-size: 44px;
        padding-inline: 0.75rem;
    }

    /* Ensure spacing between touch targets */
    .btn-group,
    .button-group {
        gap: 0.5rem;
    }
}