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

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

@layer base {
  :root {
    --background: 210 50% 98%;
    --foreground: 220 40% 15%;

    --card: 0 0% 100%;
    --card-foreground: 220 40% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 40% 15%;

    --primary: 200 100% 45%;
    --primary-foreground: 210 40% 98%;

    --secondary: 175 84% 32%;
    --secondary-foreground: 210 40% 98%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 175 70% 41%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214 22% 86%;
    --input: 214 22% 86%;
    --ring: 200 100% 45%;

    --radius: 0.5rem;

    --sidebar-background: 210 50% 98%;
    --sidebar-foreground: 220 40% 15%;
    --sidebar-primary: 200 100% 45%;
    --sidebar-primary-foreground: 210 40% 98%;
    --sidebar-accent: 210 40% 96.1%;
    --sidebar-accent-foreground: 220 40% 15%;
    --sidebar-border: 214 22% 86%;
    --sidebar-ring: 200 100% 45%;
  }

  .dark {
    --background: 220 40% 15%;
    --foreground: 210 40% 98%;

    --card: 220 40% 17%;
    --card-foreground: 210 40% 98%;

    --popover: 220 40% 17%;
    --popover-foreground: 210 40% 98%;

    --primary: 200 100% 45%;
    --primary-foreground: 210 40% 98%;

    --secondary: 175 84% 32%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 175 70% 41%;
    --accent-foreground: 210 40% 98%;

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

    --border: 215 20% 28%;
    --input: 215 20% 28%;
    --ring: 200 100% 45%;

    --sidebar-background: 220 40% 17%;
    --sidebar-foreground: 210 40% 98%;
    --sidebar-primary: 200 100% 45%;
    --sidebar-primary-foreground: 210 40% 98%;
    --sidebar-accent: 217.2 32.6% 17.5%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: 215 20% 28%;
    --sidebar-ring: 200 100% 45%;
  }
}

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

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

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

@layer components {
  .container-padding {
    @apply px-4 sm:px-6 lg:px-8;
  }
  
  .nav-link {
    @apply relative font-medium text-foreground hover:text-primary transition-colors duration-200;
  }
  
  .nav-link:after {
    @apply content-[''] absolute w-0 h-0.5 bg-primary left-0 -bottom-1 transition-all duration-300;
  }
  
  .nav-link:hover:after {
    @apply w-full;
  }
  
  .active-nav-link:after {
    @apply w-full;
  }
  
  .section {
    @apply py-8 sm:py-12 md:py-20;
  }
  
  .gdpr-notice {
    @apply text-xs text-muted-foreground mt-1;
  }
  
  .ki-gradient-bg {
    @apply bg-gradient-to-br from-kiblue-600 to-kiteal-500;
  }
  
  .text-balance {
    text-wrap: balance;
  }

  /* Mobile-first responsive text sizing */
  .text-responsive-sm {
    @apply text-sm sm:text-base;
  }

  .text-responsive-base {
    @apply text-base sm:text-lg;
  }

  .text-responsive-lg {
    @apply text-lg sm:text-xl lg:text-2xl;
  }

  .text-responsive-xl {
    @apply text-xl sm:text-2xl lg:text-3xl;
  }

  .text-responsive-2xl {
    @apply text-2xl sm:text-3xl lg:text-4xl;
  }

  .text-responsive-3xl {
    @apply text-3xl sm:text-4xl lg:text-5xl xl:text-6xl;
  }

  /* Mobile-first spacing utilities */
  .spacing-responsive-sm {
    @apply p-2 sm:p-3 lg:p-4;
  }

  .spacing-responsive-md {
    @apply p-3 sm:p-4 lg:p-6;
  }

  .spacing-responsive-lg {
    @apply p-4 sm:p-6 lg:p-8;
  }

  /* Mobile-first button sizing */
  .btn-responsive {
    @apply px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base;
  }

  .btn-responsive-lg {
    @apply px-6 py-3 text-base sm:px-8 sm:py-4 sm:text-lg;
  }
}
