@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--background: 0 0% 100%;
		--foreground: 222 29% 15%; /* #1A2332 */
		--card: 0 0% 100%;
		--card-foreground: 222 29% 15%;
		--popover: 0 0% 100%;
		--popover-foreground: 222 29% 15%;
		--primary: 16 100% 60%; /* #FF6B35 */
		--primary-foreground: 0 0% 100%;
		--secondary: 0 0% 96.1%; /* #F5F5F5 */
		--secondary-foreground: 222 29% 15%;
		--muted: 0 0% 96.1%;
		--muted-foreground: 215.4 16.3% 46.9%;
		--accent: 0 0% 96.1%;
		--accent-foreground: 222 29% 15%;
		--destructive: 0 84.2% 60.2%;
		--destructive-foreground: 0 0% 98%;
		--border: 214.3 31.8% 91.4%;
		--input: 214.3 31.8% 91.4%;
		--ring: 16 100% 60%;
		--radius: 0.5rem;

        /* Image Aspect Ratios */
        --image-ratio-hero: 16/9;
        --image-ratio-card: 4/3;
        --image-ratio-square: 1/1;
	}

	.dark {
		--background: 222 29% 15%;
		--foreground: 0 0% 98%;
		--card: 222 29% 15%;
		--card-foreground: 0 0% 98%;
		--popover: 222 29% 15%;
		--popover-foreground: 0 0% 98%;
		--primary: 16 100% 60%;
		--primary-foreground: 0 0% 9%;
		--secondary: 217.2 32.6% 17.5%;
		--secondary-foreground: 0 0% 98%;
		--muted: 217.2 32.6% 17.5%;
		--muted-foreground: 215 20.2% 65.1%;
		--accent: 217.2 32.6% 17.5%;
		--accent-foreground: 0 0% 98%;
		--destructive: 0 62.8% 30.6%;
		--destructive-foreground: 0 0% 98%;
		--border: 217.2 32.6% 17.5%;
		--input: 217.2 32.6% 17.5%;
		--ring: 16 100% 60%;
	}

	* {
		@apply border-border;
	}

	body {
		@apply bg-background text-foreground;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

@layer components {
	.surface-base {
		@apply bg-background text-foreground;
	}

	.surface-elevated {
		@apply bg-card text-card-foreground border border-border shadow-sm rounded-lg;
	}

    /* Image Container Utilities */
    .image-container-hero {
        aspect-ratio: var(--image-ratio-hero);
        @apply relative overflow-hidden bg-gray-100 w-full flex-shrink-0;
    }
    
    .image-container-card {
        aspect-ratio: var(--image-ratio-card);
        @apply relative overflow-hidden bg-gray-100 w-full flex-shrink-0;
    }
    
    .image-container-square {
        aspect-ratio: var(--image-ratio-square);
        @apply relative overflow-hidden bg-gray-100 w-full flex-shrink-0;
    }

    .image-container-hero img,
    .image-container-card img,
    .image-container-square img {
        @apply absolute inset-0 w-full h-full object-cover object-center;
    }

    /* Smooth 60FPS Transitions */
	.transition-default {
		@apply transition-all duration-300 ease-out will-change-transform;
	}
    
    .btn-primary-graff {
        @apply bg-graff-orange text-white hover:bg-graff-darkOrange shadow-lg hover:scale-105 active:scale-95 transition-all duration-300 min-h-[48px] px-6 font-bold focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#FF6B35];
    }
    
    .btn-secondary-graff {
        @apply bg-graff-blue text-white hover:bg-black shadow-lg hover:scale-105 active:scale-95 transition-all duration-300 min-h-[48px] px-6 font-bold focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#1A2332];
    }

    .btn-urgent-graff {
        @apply bg-graff-red text-white hover:bg-red-700 shadow-lg hover:scale-105 active:scale-95 transition-all duration-300 min-h-[48px] px-6 font-bold animate-pulse hover:animate-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600;
    }

    /* Slider Specific Styles */
    .slider-gradient-overlay {
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
    }

    .glass-text {
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    
    /* Accessibility Focus States */
    :focus-visible {
        outline: 2px solid #FF6B35;
        outline-offset: 4px;
        border-radius: 2px;
    }

    /* Hardware Acceleration for Smoother Animations */
    .will-change-transform {
        will-change: transform;
        transform: translateZ(0); /* Force GPU */
    }

    /* Fade Page Transitions */
    .page-enter {
        opacity: 0;
        transform: translateY(10px);
    }
    .page-enter-active {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 300ms, transform 300ms;
    }
    .page-exit {
        opacity: 1;
    }
    .page-exit-active {
        opacity: 0;
        transition: opacity 300ms;
    }
}