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

@layer base {
  html {
    @apply text-lg scroll-smooth;
  }
  
  body {
    @apply font-serif bg-background text-text dark:bg-background-dark dark:text-text-light flex flex-col min-h-screen transition-colors;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif text-text dark:text-text-light mt-10 mb-4 leading-tight font-medium;
  }
  
  h1 {
    @apply text-4xl mt-16 -tracking-wider;
  }
  
  h2 {
    @apply text-3xl pb-2 border-b border-border dark:border-border-dark;
  }
  
  h3 {
    @apply text-2xl;
  }
  
  h4 {
    @apply text-xl;
  }
  
  p {
    @apply mb-6 max-w-prose;
  }
  
  a {
    @apply text-link underline decoration-1 underline-offset-2 transition-colors hover:text-link-hover hover:decoration-primary dark:text-link-light;
  }
  
  blockquote {
    @apply my-10 py-6 px-10 border-l-4 border-primary bg-primary-light dark:bg-primary-dark/20 rounded-r italic text-text/80 dark:text-text-light/80 relative;
  }
  
  blockquote::before {
    content: '"';
    @apply absolute top-0 left-4 text-6xl text-primary/20 font-serif;
  }
  
  pre, code {
    @apply font-mono text-sm;
  }
  
  pre {
    @apply bg-gray-100 dark:bg-gray-800 p-4 rounded overflow-x-auto my-6 border-l-3 border-primary;
  }
  
  code {
    @apply bg-gray-100 dark:bg-gray-800 py-0.5 px-1.5 rounded;
  }
  
  pre code {
    @apply bg-transparent p-0;
  }
  
  hr {
    @apply border-none h-px bg-border dark:bg-border-dark my-10;
  }
  
  ul, ol {
    @apply pl-10 my-6 max-w-prose;
  }
  
  li {
    @apply mb-2;
  }
}

@layer components {
  .container {
    @apply w-full max-w-7xl mx-auto px-4;
  }
  
  .content-narrow {
    @apply max-w-3xl mx-auto;
  }
  
  /* Header */
  header {
    @apply border-b border-border dark:border-border-dark bg-background dark:bg-background-dark sticky top-0 z-40 transition-shadow backdrop-blur-md;
  }
  
  header.scrolled {
    @apply shadow-sm;
  }
  
  /* Hero section */
  .hero {
    @apply py-24 mb-16 text-center bg-primary-light dark:bg-primary-dark/20 relative overflow-hidden rounded;
  }
  
  /* Home sections */
  .home-section {
    @apply mb-16;
  }
  
  /* Card Grid */
  .card {
    @apply bg-white dark:bg-gray-900 rounded-lg shadow hover:shadow-lg transition-all border border-border dark:border-border-dark flex flex-col h-full relative hover:-translate-y-1.5;
  }
  
  /* Directory listing */
  .directory-list {
    @apply list-none p-0 my-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4;
  }
  
  .directory-item {
    @apply mb-2 transition-all rounded-lg border border-border dark:border-border-dark bg-white dark:bg-gray-900 shadow hover:shadow-md overflow-hidden hover:-translate-y-1;
  }
  
  /* Footer */
  footer {
    @apply mt-auto py-10 bg-primary-light/50 dark:bg-primary-dark/10 border-t border-border dark:border-border-dark;
  }
  
  /* Animation effects */
  .animate-in {
    animation: fadeIn 0.6s ease forwards;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  /* Kenneth quotes */
  #kenneth-quote {
    @apply italic relative cursor-pointer inline-block px-2 transition-all;
  }
}