@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap";

/* css/calendar-fix.css */
.rdp button[aria-label*=Month] {
  border-color: hsl(var(--primary)) !important;
}

/* css/react-app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  :root {
    --background: 40 33% 98%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --primary: 16 85% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 222 47% 14%;
    --secondary-foreground: 0 0% 100%;
    --muted: 40 20% 94%;
    --muted-foreground: 222 20% 45%;
    --accent: 16 85% 60%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 40 15% 88%;
    --input: 40 15% 88%;
    --ring: 16 85% 60%;
    --radius: 0.75rem;
    --coral: 16 85% 60%;
    --coral-light: 16 85% 70%;
    --coral-dark: 16 75% 50%;
    --navy: 222 47% 14%;
    --navy-light: 222 35% 22%;
    --cream: 40 33% 98%;
    --cream-dark: 40 20% 92%;
    --success: 160 60% 45%;
    --warning: 40 90% 55%;
    --gradient-hero:
      linear-gradient(
        135deg,
        hsl(16 85% 60%) 0%,
        hsl(35 90% 65%) 50%,
        hsl(16 75% 55%) 100%);
    --gradient-glow:
      radial-gradient(
        ellipse at center,
        hsl(16 85% 70% / 0.3) 0%,
        transparent 70%);
    --gradient-navy:
      linear-gradient(
        180deg,
        hsl(222 47% 11%) 0%,
        hsl(222 47% 18%) 100%);
    --gradient-card:
      linear-gradient(
        180deg,
        hsl(0 0% 100%) 0%,
        hsl(40 20% 98%) 100%);
    --shadow-sm: 0 2px 8px -2px hsl(222 47% 11% / 0.08);
    --shadow-md: 0 8px 24px -8px hsl(222 47% 11% / 0.12);
    --shadow-lg: 0 16px 48px -16px hsl(222 47% 11% / 0.16);
    --shadow-glow: 0 0 40px hsl(16 85% 60% / 0.25);
    --shadow-card: 0 4px 20px -4px hsl(222 47% 11% / 0.08);
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 222 47% 11%;
    --sidebar-primary: 16 85% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 40 20% 94%;
    --sidebar-accent-foreground: 222 47% 11%;
    --sidebar-border: 40 15% 88%;
    --sidebar-ring: 16 85% 60%;
  }
  .dark {
    --background: 222 47% 8%;
    --foreground: 40 20% 96%;
    --card: 222 40% 12%;
    --card-foreground: 40 20% 96%;
    --popover: 222 40% 12%;
    --popover-foreground: 40 20% 96%;
    --primary: 16 85% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 222 35% 20%;
    --secondary-foreground: 40 20% 96%;
    --muted: 222 35% 18%;
    --muted-foreground: 220 15% 60%;
    --accent: 16 85% 60%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 222 35% 20%;
    --input: 222 35% 20%;
    --ring: 16 85% 60%;
    --sidebar-background: 222 47% 10%;
    --sidebar-foreground: 40 20% 96%;
    --sidebar-primary: 16 85% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 222 35% 18%;
    --sidebar-accent-foreground: 40 20% 96%;
    --sidebar-border: 222 35% 20%;
    --sidebar-ring: 16 85% 60%;
  }
}
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-family:
      "Inter",
      system-ui,
      sans-serif;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family:
      "Space Grotesk",
      system-ui,
      sans-serif;
    @apply font-semibold tracking-tight;
  }
}
@layer utilities {
  .text-gradient-hero {
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .bg-gradient-hero {
    background: var(--gradient-hero);
  }
  .bg-gradient-navy {
    background: var(--gradient-navy);
  }
  .shadow-glow {
    box-shadow: var(--shadow-glow);
  }
  .shadow-card {
    box-shadow: var(--shadow-card);
  }
  .glass {
    backdrop-filter: blur(12px);
    background: hsl(0 0% 100% / 0.8);
    border: 1px solid hsl(0 0% 100% / 0.6);
  }
  .dark .glass {
    background: hsl(222 47% 11% / 0.8);
    border: 1px solid hsl(222 35% 20% / 0.6);
  }
}