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

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  
.app.green {
    --background: 142 35% 92%;
    --foreground: 140 20% 15%;
    --card: 142 30% 88%;
    --card-foreground: 140 20% 15%;
    --popover: 142 30% 88%;
    --popover-foreground: 140 20% 15%;
    --primary: 142 65% 40%;
    --primary-foreground: 0 0% 100%;
    --secondary: 138 20% 82%;
    --secondary-foreground: 140 20% 15%;
    --muted: 138 20% 87%;
    --muted-foreground: 140 15% 40%;
    --accent: 142 35% 85%;
    --accent-foreground: 142 65% 40%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 141 32% 72%;
    --input: 141 25% 83%;
    --ring: 142 65% 40%;
    --chart-1: 142 65% 40%;
    --chart-2: 217 91% 60%;
    --chart-3: 38 92% 50%;
    --chart-4: 270 95% 75%;
    --chart-5: 340 82% 52%;
    --sidebar-background: 142 30% 88%;
    --sidebar-foreground: 140 20% 15%;
    --sidebar-primary: 142 65% 40%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 138 20% 82%;
    --sidebar-accent-foreground: 140 20% 15%;
    --sidebar-border: 141 32% 72%;
    --sidebar-ring: 142 65% 40%;
}

.app.orange {
    --background: 28 50% 92%;
    --foreground: 20 24% 15%;
    --card: 28 45% 88%;
    --card-foreground: 20 24% 15%;
    --popover: 28 45% 88%;
    --popover-foreground: 20 24% 15%;
    --primary: 25 85% 48%;
    --primary-foreground: 0 0% 100%;
    --secondary: 28 20% 82%;
    --secondary-foreground: 20 24% 15%;
    --muted: 28 20% 87%;
    --muted-foreground: 20 15% 40%;
    --accent: 25 50% 87%;
    --accent-foreground: 25 85% 48%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 28 32% 72%;
    --input: 28 25% 83%;
    --ring: 25 85% 48%;
    --chart-1: 25 85% 48%;
    --chart-2: 142 71% 45%;
    --chart-3: 217 91% 60%;
    --chart-4: 270 95% 75%;
    --chart-5: 340 82% 52%;
    --sidebar-background: 28 45% 88%;
    --sidebar-foreground: 20 24% 15%;
    --sidebar-primary: 25 85% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 28 20% 82%;
    --sidebar-accent-foreground: 20 24% 15%;
    --sidebar-border: 28 32% 72%;
    --sidebar-ring: 25 85% 48%;
}

.app.azalea {
    --background: 331 25% 95%;
    --foreground: 331 15% 18%;
    --card: 331 20% 90%;
    --card-foreground: 331 15% 18%;
    --popover: 331 20% 90%;
    --popover-foreground: 331 15% 18%;
    --primary: 331 63% 49%;
    --primary-foreground: 0 0% 100%;
    --secondary: 328 15% 85%;
    --secondary-foreground: 331 15% 18%;
    --muted: 328 15% 88%;
    --muted-foreground: 331 12% 42%;
    --accent: 331 25% 87%;
    --accent-foreground: 331 63% 49%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 331 20% 75%;
    --input: 331 18% 85%;
    --ring: 331 63% 49%;
    --chart-1: 331 63% 49%;
    --chart-2: 217 91% 60%;
    --chart-3: 38 92% 50%;
    --chart-4: 270 95% 75%;
    --chart-5: 340 82% 52%;
    --sidebar-background: 331 20% 90%;
    --sidebar-foreground: 331 15% 18%;
    --sidebar-primary: 331 63% 49%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 328 15% 85%;
    --sidebar-accent-foreground: 331 15% 18%;
    --sidebar-border: 331 20% 75%;
    --sidebar-ring: 331 63% 49%;
}

.app.pink {
    --background: 7 60% 95%;
    --foreground: 7 25% 18%;
    --card: 7 50% 90%;
    --card-foreground: 7 25% 18%;
    --popover: 7 50% 90%;
    --popover-foreground: 7 25% 18%;
    --primary: 7 100% 82%;
    --primary-foreground: 0 0% 100%;
    --secondary: 5 30% 85%;
    --secondary-foreground: 7 25% 18%;
    --muted: 5 30% 88%;
    --muted-foreground: 7 20% 42%;
    --accent: 7 60% 87%;
    --accent-foreground: 7 100% 82%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 7 50% 75%;
    --input: 7 40% 85%;
    --ring: 7 100% 82%;
    --chart-1: 7 100% 82%;
    --chart-2: 217 91% 60%;
    --chart-3: 38 92% 50%;
    --chart-4: 270 95% 75%;
    --chart-5: 340 82% 52%;
    --sidebar-background: 7 50% 90%;
    --sidebar-foreground: 7 25% 18%;
    --sidebar-primary: 7 100% 82%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 5 30% 85%;
    --sidebar-accent-foreground: 7 25% 18%;
    --sidebar-border: 7 50% 75%;
    --sidebar-ring: 7 100% 82%;
}

.app.crimson {
    --background: 341 25% 95%;
    --foreground: 341 15% 18%;
    --card: 341 20% 90%;
    --card-foreground: 341 15% 18%;
    --popover: 341 20% 90%;
    --popover-foreground: 341 15% 18%;
    --primary: 341 100% 30%;
    --primary-foreground: 0 0% 100%;
    --secondary: 338 15% 85%;
    --secondary-foreground: 341 15% 18%;
    --muted: 338 15% 88%;
    --muted-foreground: 341 12% 42%;
    --accent: 341 25% 87%;
    --accent-foreground: 341 100% 30%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 341 20% 75%;
    --input: 341 18% 85%;
    --ring: 341 100% 30%;
    --chart-1: 341 100% 30%;
    --chart-2: 217 91% 60%;
    --chart-3: 38 92% 50%;
    --chart-4: 270 95% 75%;
    --chart-5: 340 82% 52%;
    --sidebar-background: 341 20% 90%;
    --sidebar-foreground: 341 15% 18%;
    --sidebar-primary: 341 100% 30%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 338 15% 85%;
    --sidebar-accent-foreground: 341 15% 18%;
    --sidebar-border: 341 20% 75%;
    --sidebar-ring: 341 100% 30%;
}

.green button[variant="outline"],
.orange button[variant="outline"],
.azalea button[variant="outline"],
.pink button[variant="outline"]
.crimson button[variant="outline"]{
    border: 1px solid hsl(var(--border));
    background: transparent;
}

.app.green button[variant="ghost"],
.app.orange button[variant="ghost"],
.app.azalea button[variant="ghost"],
.app.pink button[variant="ghost"],
.app.crimson button[variant="ghost"] {
    border: none;
    background: transparent;
}

.app.green hr, .green .divider,
.app.orange hr, .orange .divider,
.app.azalea hr, .azalea .divider,
.app.pink hr, .pink .divider,
.app.crimson hr, .crimson .divider {
    border-color: hsl(var(--border));
    opacity: 0.8;
}

.app.green .separator,
.app.orange .separator,
.app.azalea .separator,
.app.pink .separator,
.app.crimson .separator {
    height: 1px;
    background: hsl(var(--border));
    opacity: 0.6;
}
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
