@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

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

@layer base {
  :root {
    --background: 45 33% 98%;
    --foreground: 200 20% 15%;

    --card: 0 0% 100%;
    --card-foreground: 200 20% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 200 20% 15%;

    --primary: 187 75% 42%;
    --primary-foreground: 180 20% 98%;

    --secondary: 34 40% 92%;
    --secondary-foreground: 34 20% 25%;

    --muted: 34 20% 94%;
    --muted-foreground: 200 10% 45%;

    --accent: 191.54 54.17% 90.59%;
    --accent-foreground: 180 0.92% 21.37%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98.04%;

    --border: 187 20% 90%;
    --input: 187 20% 90%;
    --ring: 187 75% 42%;

    --radius: 1rem;
    --spacing: 0.25rem;

    --chart-1: 187 75% 42%;
    --chart-2: 16 90% 66%;
    --chart-3: 42 90% 62%;
    --chart-4: 160 50% 50%;
    --chart-5: 200 30% 70%;

    --sidebar-background: 45 33% 99%;
    --sidebar-foreground: 200 20% 20%;
    --sidebar-primary: 187 75% 42%;
    --sidebar-primary-foreground: 180 20% 98%;
    --sidebar-accent: 34 40% 94%;
    --sidebar-accent-foreground: 187 75% 30%;
    --sidebar-border: 187 20% 92%;
    --sidebar-ring: 187 75% 42%;

    --shadow-2xs: 0px 1px 2px 0px hsl(187 50% 20% / 0.03);
    --shadow-xs: 0px 1px 3px 0px hsl(187 50% 20% / 0.04);
    --shadow-sm: 0px 2px 4px 0px hsl(187 50% 20% / 0.05);
    --shadow: 0px 3px 8px -1px hsl(187 50% 20% / 0.06);
    --shadow-md: 0px 4px 12px -2px hsl(187 50% 20% / 0.08);
    --shadow-lg: 0px 8px 20px -4px hsl(187 50% 20% / 0.10);
    --shadow-xl: 0px 16px 32px -6px hsl(187 50% 20% / 0.12);
    --shadow-2xl: 0px 24px 48px -8px hsl(187 50% 20% / 0.16);

    --font-sans: 'Inter', ui-sans-serif, system-ui;
    --font-serif: 'Playfair Display', ui-serif, Georgia;
    --font-mono: 'JetBrains Mono', ui-monospace;
  }

  .dark {
    --background: 200 30% 6%;
    --foreground: 180 20% 98%;

    --card: 200 30% 9%;
    --card-foreground: 180 20% 98%;

    --popover: 200 30% 12%;
    --popover-foreground: 180 20% 98%;

    --primary: 187 70% 50%;
    --primary-foreground: 200 30% 6%;

    --secondary: 200 20% 18%;
    --secondary-foreground: 180 20% 98%;

    --muted: 200 20% 18%;
    --muted-foreground: 200 15% 70%;

    --accent: 191.82 100% 12.94%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62% 40%;
    --destructive-foreground: 0 0% 98%;

    --border: 200 20% 20%;
    --input: 200 20% 20%;
    --ring: 187 70% 50%;

    --sidebar-background: 200 30% 8%;
    --sidebar-foreground: 180 20% 90%;
    --sidebar-primary: 187 70% 50%;
    --sidebar-primary-foreground: 200 30% 6%;
    --sidebar-accent: 200 20% 15%;
    --sidebar-accent-foreground: 187 70% 60%;
    --sidebar-border: 200 20% 20%;
    --sidebar-ring: 187 70% 50%;
  }
}

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

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

  h1, h2, h3, h4, h5, h6 {
    @apply font-serif;
  }
}