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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 346 87% 30%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 346 87% 30%;
    --radius: 0.5rem;
    --primary-color: #000000;
    --primary-color-dark: #007E45;
    /* --primary-color: #C94635;   
    --primary-color-dark: #941403;  */
    --error-color: #C94635;
    --background-color: #ffffff;
    --text-color: #6f6f6f;
  }

  .dark {
    --primary-color: #941403;
    --background-color: #1a1a1a;
    --text-color: #ffffff;
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 346 87% 30%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 346 87% 30%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
  
  /* Unified Color Utilities - All mapped to #338660 */
  .text-\[\#941403\], .text-red-700, .text-\[\#A71810\], .text-\[\#00DB00\] {
    @apply text-[#338660];
  }
  
  .bg-\[\#941403\], .bg-red-700, .bg-\[\#A71810\], .bg-\[\#00DB00\] {
    @apply bg-[#338660];
  }
  
  .border-\[\#941403\], .border-red-700, .border-\[\#A71810\], .border-\[\#00DB00\] {
    @apply border-[#338660];
  }
  
  .ring-\[\#941403\], .ring-\[\#A71810\], .ring-\[\#00DB00\] {
    @apply ring-[#338660];
  }
}

body {
  font-family: 'Sage Text', sans-serif;
}

h1, h2, h3 {
  font-family: 'Sage Headline', sans-serif;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 20px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(107, 114, 128, 0.8);
}