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

:root {
  --color-primary: 59 130 246;
  --color-primary-foreground: 255 255 255;
  --color-secondary: 100 116 139;
  --color-secondary-foreground: 255 255 255;
  --color-background: 255 255 255;
  --color-foreground: 15 23 42;
  --color-muted: 248 250 252;
  --color-muted-foreground: 100 116 139;
  --color-border: 226 232 240;
  --color-accent: 241 245 249;
  --color-accent-foreground: 15 23 42;
}

[data-theme="dark"] {
  --color-primary: 96 165 250;
  --color-primary-foreground: 15 23 42;
  --color-secondary: 71 85 105;
  --color-secondary-foreground: 248 250 252;
  --color-background: 15 23 42;
  --color-foreground: 248 250 252;
  --color-muted: 30 41 59;
  --color-muted-foreground: 148 163 184;
  --color-border: 51 65 85;
  --color-accent: 30 41 59;
  --color-accent-foreground: 248 250 252;
}

@layer base {
  body {
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    @apply font-sans;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
  }
  
  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
  
  /* Add scroll margin for header offset */
  [id] {
    scroll-margin-top: 6rem;
  }
  
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background-color: rgb(var(--color-muted));
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-secondary));
    border-radius: 9999px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--color-secondary) / 0.8);
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50;
  }
  
  .btn-primary {
    @apply btn;
    background-color: rgb(var(--color-primary));
    color: rgb(var(--color-primary-foreground));
  }
  
  .btn-primary:hover {
    background-color: rgb(var(--color-primary) / 0.9);
  }
  
  .btn-secondary {
    @apply btn;
    background-color: rgb(var(--color-secondary));
    color: rgb(var(--color-secondary-foreground));
  }
  
  .btn-secondary:hover {
    background-color: rgb(var(--color-secondary) / 0.8);
  }
  
  .btn-outline {
    @apply btn;
    border: 1px solid rgb(var(--color-border));
    background-color: transparent;
    color: rgb(var(--color-foreground));
  }
  
  .btn-outline:hover {
    background-color: rgb(var(--color-accent));
  }
  
  .card {
    @apply rounded-lg border border-border bg-background p-6 shadow-sm;
  }
  
  .container-custom {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
  }
  
  .bg-background {
    background-color: rgb(var(--color-background));
  }
  
  .text-foreground {
    color: rgb(var(--color-foreground));
  }
  
  .text-muted-foreground {
    color: rgb(var(--color-muted-foreground));
  }
  
  .bg-muted {
    background-color: rgb(var(--color-muted));
  }
  
  .bg-primary {
    background-color: rgb(var(--color-primary));
  }
  
  .text-primary {
    color: rgb(var(--color-primary));
  }
  
  .text-primary-foreground {
    color: rgb(var(--color-primary-foreground));
  }
  
  .bg-accent {
    background-color: rgb(var(--color-accent));
  }
  
  .border-border {
    border-color: rgb(var(--color-border));
  }
}

@layer utilities {
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  .animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
  }
}