@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
  --background: 210 20% 98%;
  --foreground: 210 40% 11%;

  --card: 0 0% 100%;
  --card-foreground: 210 40% 11%;

  --popover: 0 0% 100%;
  --popover-foreground: 210 40% 11%;

  --primary: 85 70% 50%;
  --primary-foreground: 0 0% 100%;

  --secondary: 170 60% 94%;
  --secondary-foreground: 85 50% 25%;

  --muted: 85 30% 94%;
  --muted-foreground: 85 20% 40%;

  --accent: 45 95% 55%;
  --accent-foreground: 45 90% 15%;

  --border: 85 25% 88%;
  --input: 85 25% 88%;
  --ring: 85 70% 50%;

  --radius: 0.75rem;

  --gradient-primary: linear-gradient(135deg, hsl(170 75% 45%) 0%, hsl(85 70% 50%) 50%, hsl(50 90% 55%) 100%);
  --gradient-accent: linear-gradient(135deg, hsl(45 95% 55%) 0%, hsl(55 90% 60%) 100%);
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(85 30% 97%) 100%);
  --gradient-hero: linear-gradient(135deg, hsl(170 50% 95%) 0%, hsl(85 40% 95%) 50%, hsl(50 50% 95%) 100%);
  
  --shadow-card: 0 4px 20px -4px hsl(85 40% 20% / 0.08);
  --shadow-card-hover: 0 12px 40px -8px hsl(85 70% 50% / 0.25);
  --shadow-featured: 0 8px 30px -6px hsl(85 70% 50% / 0.3);
}

.font-cairo {
  font-family: 'Cairo', sans-serif;
}

.gradient-primary {
  background: var(--gradient-primary);
}

.gradient-accent {
  background: var(--gradient-accent);
}

.gradient-card {
  background: var(--gradient-card);
}

.gradient-hero {
  background: var(--gradient-hero);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

.shadow-card-hover {
  box-shadow: var(--shadow-card-hover);
}

.shadow-featured {
  box-shadow: var(--shadow-featured);
}

.text-gradient-primary {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

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

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container { max-width: 640px; }
}
@media (min-width: 768px) {
  .container { max-width: 768px; }
}
@media (min-width: 1024px) {
  .container { max-width: 1024px; }
}
@media (min-width: 1280px) {
  .container { max-width: 1280px; }
}