:root {
  /* MAFROUZA Brand Colors */
  --background: 42 45% 96%;
  --foreground: 120 35% 15%;

  --card: 42 40% 98%;
  --card-foreground: 120 35% 15%;

  --popover: 42 40% 98%;
  --popover-foreground: 120 35% 15%;

  /* Deep Forest Green - Primary Brand Color */
  --primary: 120 38% 25%;
  --primary-foreground: 42 45% 96%;

  /* Sage Green - Secondary */
  --secondary: 120 20% 90%;
  --secondary-foreground: 120 35% 20%;

  /* Muted Cream */
  --muted: 40 25% 92%;
  --muted-foreground: 120 15% 40%;

  /* Light Green Accent */
  --accent: 120 30% 85%;
  --accent-foreground: 120 38% 20%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 120 15% 85%;
  --input: 120 15% 85%;
  --ring: 120 38% 25%;

  --radius: 0.75rem;

  /* Custom Brand Tokens */
  --cream: 42 45% 96%;
  --cream-dark: 40 35% 90%;
  --forest: 120 38% 25%;
  --forest-light: 120 30% 35%;
  --forest-dark: 120 40% 18%;
  --sage: 120 20% 80%;
  --warm-brown: 30 30% 35%;
  --spice-red: 15 70% 45%;
  --gold: 45 80% 50%;

  /* Gradients */
  --gradient-hero: linear-gradient(
    135deg,
    hsl(42 45% 96%) 0%,
    hsl(40 35% 90%) 100%
  );
  --gradient-card: linear-gradient(
    180deg,
    hsl(42 40% 98%) 0%,
    hsl(42 45% 96%) 100%
  );
  --gradient-primary: linear-gradient(
    135deg,
    hsl(120 38% 25%) 0%,
    hsl(120 35% 32%) 100%
  );
}

.dark {
  --background: 120 35% 8%;
  --foreground: 42 45% 96%;

  --card: 120 30% 12%;
  --card-foreground: 42 45% 96%;

  --popover: 120 30% 12%;
  --popover-foreground: 42 45% 96%;

  --primary: 120 35% 45%;
  --primary-foreground: 120 35% 8%;

  --secondary: 120 20% 18%;
  --secondary-foreground: 42 45% 96%;

  --muted: 120 20% 15%;
  --muted-foreground: 42 30% 70%;

  --accent: 120 25% 20%;
  --accent-foreground: 42 45% 96%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;

  --border: 120 20% 20%;
  --input: 120 20% 20%;
  --ring: 120 35% 45%;
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Cairo", sans-serif;
  overflow-x: hidden;
}

/* Custom Components */
.text-gradient-primary {
  background: linear-gradient(
    135deg,
    hsl(var(--forest)) 0%,
    hsl(var(--forest-light)) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

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

.glass-effect {
  backdrop-filter: blur(12px);
  background: hsl(var(--cream) / 0.8);
  border: 1px solid hsl(var(--border) / 0.5);
}

.shadow-soft {
  box-shadow: 0 4px 20px -4px hsl(var(--forest) / 0.1);
}

.shadow-hover {
  box-shadow: 0 8px 30px -8px hsl(var(--forest) / 0.2);
}

.leaf-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5c5 8 15 15 25 15-3 10-12 18-25 25-13-7-22-15-25-25 10 0 20-7 25-15z' fill='%232D5A27' fill-opacity='0.03'/%3E%3C/svg%3E");
}

.animation-delay-200 {
  animation-delay: 200ms;
}

.animation-delay-400 {
  animation-delay: 400ms;
}

.animation-delay-600 {
  animation-delay: 600ms;
}

/* RTL Specifics */
[dir="rtl"] {
  text-align: right;
}

/* Animations (Simple versions of Framer Motion) */
[data-aos] {
  transition-duration: 600ms;
}