@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

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

@layer base {
  :root {
    --background: 45 20% 97%;
    --foreground: 0 0% 10%;
    --card: 45 20% 97%;
    --card-foreground: 0 0% 10%;
    --popover: 45 20% 97%;
    --popover-foreground: 0 0% 10%;
    --primary: 30 25% 53%;
    --primary-foreground: 45 20% 97%;
    --secondary: 40 50% 70%;
    --secondary-foreground: 0 0% 10%;
    --muted: 30 10% 70%;
    --muted-foreground: 0 0% 20%;
    --accent: 30 25% 53%;
    --accent-foreground: 45 20% 97%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 30 15% 85%;
    --input: 45 20% 97%;
    --ring: 30 25% 53%;
    --radius: 12px;
  }

  .dark {
    --background: 0 0% 10%;
    --foreground: 45 20% 97%;
    --card: 0 0% 12%;
    --card-foreground: 45 20% 97%;
    --popover: 0 0% 12%;
    --popover-foreground: 45 20% 97%;
    --primary: 30 25% 53%;
    --primary-foreground: 45 20% 97%;
    --secondary: 40 50% 70%;
    --secondary-foreground: 0 0% 10%;
    --muted: 0 0% 20%;
    --muted-foreground: 30 10% 70%;
    --accent: 30 25% 53%;
    --accent-foreground: 45 20% 97%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 20%;
    --input: 0 0% 20%;
    --ring: 30 25% 53%;
  }

  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground;
    font-family: "DM Sans", sans-serif;
    overflow-x: clip;
    line-height: 1.7;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply text-foreground font-bold;
    text-wrap: balance;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl;
  }

  h2 {
    @apply text-3xl md:text-4xl;
  }

  h3 {
    @apply text-2xl md:text-3xl;
  }

  h4 {
    @apply text-xl md:text-2xl;
  }

  p {
    @apply leading-relaxed max-w-prose text-foreground;
  }
}

@layer utilities {
  .premium-shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .premium-shadow-lg {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .premium-transition {
    transition: all 0.3s ease;
  }

  .text-balance {
    text-wrap: balance;
  }
}