/* CSS variables and utilities copied from Tailwind setup to match 1:1 visuals */
:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 15%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 15%;
  --primary: 0 73% 51%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 15%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;
  --accent: 0 73% 51%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 73% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 73% 51%;

  --blood-red: 0 73% 51%;
  --blood-red-light: 0 73% 60%;
  --blood-red-dark: 0 73% 42%;

  --gradient-hero: linear-gradient(135deg, hsl(var(--blood-red)), hsl(var(--blood-red-light)));
  --gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(0 0% 98%));

  --shadow-blood: 0 10px 30px -10px hsl(var(--blood-red) / 0.3);
  --shadow-card: 0 4px 20px -4px hsl(0 0% 0% / 0.1);
  --shadow-hero: 0 20px 60px -20px hsl(var(--blood-red) / 0.4);

  --radius: 0.5rem;
}

.bg-gradient-hero { background: var(--gradient-hero); }
.bg-gradient-card { background: var(--gradient-card); }
.shadow-blood { box-shadow: var(--shadow-blood); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-hero { box-shadow: var(--shadow-hero); }

/* Animations copied from tailwind.config.ts */
@keyframes fade-in { 0% { opacity: 0; transform: translateY(20px);} 100% { opacity: 1; transform: translateY(0);} }
@keyframes slide-in-left { 0% { opacity: 0; transform: translateX(-20px);} 100% { opacity: 1; transform: translateX(0);} }
@keyframes pulse-blood { 0%,100% { transform: scale(1); opacity: 1;} 50% { transform: scale(1.05); opacity: 0.8;} }
@keyframes drop-bounce { 0% { transform: translateY(-10px) scale(0.9); opacity: 0;} 50% { transform: translateY(0) scale(1.1); opacity: 1;} 100% { transform: translateY(0) scale(1); opacity: 1;} }

.animate-fade-in { animation: fade-in .6s ease-out both; }
.animate-slide-in-left { animation: slide-in-left .6s ease-out both; }
.animate-pulse-blood { animation: pulse-blood 2s ease-in-out infinite; }
.animate-drop-bounce { animation: drop-bounce .8s ease-out both; }

/* Ensure container width like Tailwind container */
.container { width: 100%; max-width: 1400px; padding-left: 2rem; padding-right: 2rem; margin-left: auto; margin-right: auto; }

/* Base body colors to match */
body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }

/* Simple utility to ensure border color matches */
* { border-color: hsl(var(--border)); }

/* Helper for backdrop blur on header on scroll (via JS adds class) */
.header-solid { background: white !important; box-shadow: var(--shadow-card); }