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

:root {
  --background: hsl(43, 41%, 96%);
  --foreground: hsl(210, 25%, 7.8431%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(210, 25%, 7.8431%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(210, 25%, 7.8431%);
  --primary: hsl(22, 47%, 70%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(95, 14%, 71%);
  --secondary-foreground: hsl(210, 25%, 7.8431%);
  --muted: hsl(240, 1.9608%, 90%);
  --muted-foreground: hsl(210, 25%, 7.8431%);
  --accent: hsl(36, 30%, 76%);
  --accent-foreground: hsl(210, 25%, 7.8431%);
  --destructive: hsl(0, 85%, 60%);
  --destructive-foreground: hsl(0, 0%, 100%);
  --border: hsl(43, 20%, 90%);
  --input: hsl(43, 20%, 94%);
  --ring: hsl(22, 47%, 70%);
  --chart-1: hsl(22, 47%, 70%);
  --chart-2: hsl(95, 14%, 71%);
  --chart-3: hsl(36, 30%, 76%);
  --chart-4: hsl(147.1429, 78.5047%, 41.9608%);
  --chart-5: hsl(341.4894, 75.2000%, 50.9804%);
  --sidebar: hsl(0, 0%, 100%);
  --sidebar-foreground: hsl(210, 25%, 7.8431%);
  --sidebar-primary: hsl(22, 47%, 70%);
  --sidebar-primary-foreground: hsl(0, 0%, 100%);
  --sidebar-accent: hsl(43, 20%, 95%);
  --sidebar-accent-foreground: hsl(22, 47%, 70%);
  --sidebar-border: hsl(43, 20%, 90%);
  --sidebar-ring: hsl(22, 47%, 70%);
  --font-sans: 'Inter', sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius: 0.75rem;
  --terracotta: hsl(22, 47%, 70%);
  --sage: hsl(95, 14%, 71%);
  --sandy: hsl(36, 30%, 76%);
  --cream: hsl(43, 41%, 96%);
  --warm-gray: hsl(213, 13%, 63%);
}

.dark {
  --background: hsl(0, 0%, 0%);
  --foreground: hsl(200, 6.6667%, 91.1765%);
  --card: hsl(228, 9.8039%, 10%);
  --card-foreground: hsl(0, 0%, 85.0980%);
  --popover: hsl(0, 0%, 0%);
  --popover-foreground: hsl(200, 6.6667%, 91.1765%);
  --primary: hsl(22, 47%, 60%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(95, 14%, 61%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --muted: hsl(0, 0%, 9.4118%);
  --muted-foreground: hsl(210, 3.3898%, 46.2745%);
  --accent: hsl(36, 30%, 66%);
  --accent-foreground: hsl(0, 0%, 100%);
  --destructive: hsl(0, 85%, 60%);
  --destructive-foreground: hsl(0, 0%, 100%);
  --border: hsl(210, 5.2632%, 14.9020%);
  --input: hsl(207.6923, 27.6596%, 18.4314%);
  --ring: hsl(22, 47%, 60%);
}

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

  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

@layer components {
  .terracotta {
    @apply text-[color:var(--terracotta)];
  }
  
  .bg-terracotta {
    @apply bg-[color:var(--terracotta)];
  }
  
  .border-terracotta {
    @apply border-[color:var(--terracotta)];
  }
  
  .sage {
    @apply text-[color:var(--sage)];
  }
  
  .bg-sage {
    @apply bg-[color:var(--sage)];
  }
  
  .sandy {
    @apply text-[color:var(--sandy)];
  }
  
  .bg-sandy {
    @apply bg-[color:var(--sandy)];
  }
  
  .cream {
    @apply text-[color:var(--cream)];
  }
  
  .bg-cream {
    @apply bg-[color:var(--cream)];
  }
  
  .warm-gray {
    @apply text-[color:var(--warm-gray)];
  }
  
  .bg-warm-gray {
    @apply bg-[color:var(--warm-gray)];
  }
}
