/* ============================================
   Yay!Timer - Custom Styles & Tailwind Overrides
   ============================================
   
   This file contains:
   1. Custom color variables matching Tailwind config
   2. Critical CSS for above-the-fold content
   3. Custom utility classes used across the site
   
   Load Order (for optimal performance):
   1. inter-font.css (font-face declarations)
   2. This file (custom-styles.css)
   3. Tailwind CDN (deferred/async)
   4. navigation.css
   
   Last Updated: January 27, 2026
   ============================================ */

/* ===========================================
   CSS Custom Properties (matching Tailwind config)
   =========================================== */
:root {
    /* Brand Colors */
    --color-primary: #FF6B6B;
    --color-primary-dark: #D32F2F; /* High contrast variant - 4.77:1 on white, passes WCAG AA */
    --color-secondary: #4ECDC4;
    --color-accent: #FFE66D;
    --color-dark: #1a1a2e;
    --color-light: #f8f9fa;
    
    /* Gradient Colors */
    --gradient-start: #667eea;
    --gradient-end: #764ba2;
}

/* ===========================================
   Base Styles (Critical CSS)
   =========================================== */
* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* Prevent FOUC (Flash of Unstyled Content) */
body {
    opacity: 1;
    transition: opacity 0.1s ease-in;
}

/* ===========================================
   Custom Tailwind Color Utilities
   These mirror the Tailwind config for critical elements
   =========================================== */

/* Background Colors */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-dark { background-color: var(--color-dark); }
.bg-light { background-color: var(--color-light); }

/* Text Colors */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-dark { color: var(--color-dark); }
.text-light { color: var(--color-light); }

/* Border Colors */
.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }

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

/* ===========================================
   Gradient Utilities
   =========================================== */
.gradient-bg {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

.gradient-text {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===========================================
   Animation Utilities
   =========================================== */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

/* ===========================================
   Screenshot Carousel Styles
   =========================================== */
.screenshot-container {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ===========================================
   Dark Mode Support
   =========================================== */
.dark {
    color-scheme: dark;
}

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

/* ===========================================
   Print Styles
   =========================================== */
@media print {
    .no-print {
        display: none !important;
    }
}