client/src/index.css

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

:root {
  --background: 0 0% 100%;
  --foreground: 20 14.3% 4.1%;
  --muted: 60 4.8% 95.9%;
  --muted-foreground: 25 5.3% 44.7%;
  --popover: 0 0% 100%;
  --popover-foreground: 20 14.3% 4.1%;
  --card: 0 0% 100%;
  --card-foreground: 20 14.3% 4.1%;
  --border: 20 5.9% 90%;
  --input: 20 5.9% 90%;
  --primary: 207 90% 54%;
  --primary-foreground: 211 100% 99%;
  --secondary: 60 4.8% 95.9%;
  --secondary-foreground: 24 9.8% 10%;
  --accent: 60 4.8% 95.9%;
  --accent-foreground: 24 9.8% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 60 9.1% 97.8%;
  --ring: 20 14.3% 4.1%;
  --radius: 0.5rem;

  /* Indian Cultural Theme Colors */
  --saffron: 30 100% 60%; /* #FF9933 */
  --deep-green: 120 82% 25%; /* #138808 */
  --navy-blue: 224 76% 35%; /* #1E3A8A */
  --warm-orange: 24 95% 62%; /* #FB923C */
  --emerald: 160 84% 39%; /* #059669 */
  --warm-gray: 25 9% 47%; /* #78716C */
  --light-cream: 37 100% 97%; /* #FEF7ED */
  --deep-charcoal: 30 17% 11%; /* #1C1917 */
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --primary: 207 90% 54%;
  --primary-foreground: 211 100% 99%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --ring: 240 4.9% 83.9%;
  --radius: 0.5rem;
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-light-cream text-deep-charcoal;
    background-color: hsl(var(--light-cream));
    color: hsl(var(--deep-charcoal));
  }
}

@layer utilities {
  .bg-saffron { background-color: hsl(var(--saffron)); }
  .bg-deep-green { background-color: hsl(var(--deep-green)); }
  .bg-navy-blue { background-color: hsl(var(--navy-blue)); }
  .bg-warm-orange { background-color: hsl(var(--warm-orange)); }
  .bg-emerald { background-color: hsl(var(--emerald)); }
  .bg-warm-gray { background-color: hsl(var(--warm-gray)); }
  .bg-light-cream { background-color: hsl(var(--light-cream)); }
  .bg-deep-charcoal { background-color: hsl(var(--deep-charcoal)); }
  
  .text-saffron { color: hsl(var(--saffron)); }
  .text-deep-green { color: hsl(var(--deep-green)); }
  .text-navy-blue { color: hsl(var(--navy-blue)); }
  .text-warm-orange { color: hsl(var(--warm-orange)); }
  .text-emerald { color: hsl(var(--emerald)); }
  .text-warm-gray { color: hsl(var(--warm-gray)); }
  .text-light-cream { color: hsl(var(--light-cream)); }
  .text-deep-charcoal { color: hsl(var(--deep-charcoal)); }
  
  .border-saffron { border-color: hsl(var(--saffron)); }
  .border-deep-green { border-color: hsl(var(--deep-green)); }
  .border-navy-blue { border-color: hsl(var(--navy-blue)); }
  .border-warm-orange { border-color: hsl(var(--warm-orange)); }
  .border-emerald { border-color: hsl(var(--emerald)); }

  .indian-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%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FF9933' fill-opacity='0.05'%3E%3Cpath d='M30 30l15-15v30l-15-15zm0 0l-15 15h30l-15-15z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
}

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

.font-poppins {
  font-family: 'Poppins', sans-serif;
}