workshopclaudecode/src/index.css

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

@layer base {
  html {
    @apply scroll-smooth;
  }

  body {
    @apply bg-warm-50 text-warm-800 antialiased;
  }

  /* Better focus states */
  *:focus-visible {
    @apply outline-none ring-4 ring-coral-500/50;
  }
}

@layer components {
  /* Heading styles */
  .heading-hero {
    @apply font-display text-4xl md:text-5xl font-extrabold
           leading-tight tracking-tight text-warm-900;
  }

  .heading-1 {
    @apply font-display text-3xl md:text-4xl font-bold
           leading-tight tracking-tight text-warm-900;
  }

  .heading-2 {
    @apply font-display text-2xl md:text-3xl font-bold
           leading-snug text-warm-900;
  }

  .heading-3 {
    @apply font-display text-xl md:text-2xl font-semibold
           leading-snug text-warm-800;
  }

  /* Button variants */
  .btn-primary {
    @apply px-8 py-4
           bg-coral-500 text-white
           font-semibold text-lg
           rounded-xl
           shadow-lg shadow-coral-500/25
           hover:bg-coral-600 hover:shadow-xl hover:shadow-coral-500/30
           active:bg-coral-700 active:shadow-md
           transition-all duration-200
           focus:outline-none focus:ring-4 focus:ring-coral-500/50;
  }

  .btn-secondary {
    @apply px-6 py-3
           bg-white text-coral-600
           font-semibold
           rounded-xl
           border-2 border-coral-200
           hover:border-coral-300 hover:bg-coral-50
           active:bg-coral-100
           transition-all duration-200
           focus:outline-none focus:ring-4 focus:ring-coral-500/30;
  }

  .btn-ghost {
    @apply px-4 py-2
           text-warm-700
           font-medium
           rounded-lg
           hover:bg-warm-100
           active:bg-warm-200
           transition-colors duration-150;
  }

  /* Card variants */
  .card {
    @apply bg-white rounded-2xl border border-warm-200
           p-6 lg:p-8 shadow-sm
           hover:shadow-md hover:border-warm-300
           transition-all duration-200;
  }

  .card-feature {
    @apply bg-gradient-to-br from-white to-coral-50/50
           rounded-2xl border border-coral-100
           p-6 lg:p-8 shadow-sm;
  }

  /* Section */
  .section {
    @apply py-12 lg:py-20;
  }

  .section-alt {
    @apply py-12 lg:py-20 bg-gradient-to-b from-warm-100/50 to-white;
  }

  /* Container */
  .container-page {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Prose styles voor Markdown-gerenderde content op de Installatie pagina */
  .prose-installatie h2 {
    @apply font-display text-2xl md:text-3xl font-bold leading-snug text-warm-900 mb-4 mt-10;
  }
  .prose-installatie h3 {
    @apply font-display text-xl md:text-2xl font-semibold leading-snug text-warm-800 mb-3;
  }
  .prose-installatie p {
    @apply text-warm-600 mb-4;
  }
  .prose-installatie a {
    @apply text-coral-500 hover:text-coral-600 font-semibold;
  }
  .prose-installatie code {
    @apply bg-warm-100 text-warm-800 px-1.5 py-0.5 rounded text-sm font-mono;
  }
  .prose-installatie img {
    @apply rounded-xl border border-warm-200 mb-6;
  }
  .prose-installatie ul {
    @apply list-disc pl-6 space-y-1 text-warm-600;
  }
  .prose-installatie ol {
    @apply space-y-4 text-warm-600;
  }
  .prose-installatie strong {
    @apply font-semibold text-warm-900;
  }

  /* Warnings en info blocks binnen prose */
  .prose-warning p {
    @apply text-teal-700 mb-1;
  }
  .prose-warning strong {
    @apply text-teal-700 font-semibold;
  }
  .prose-info p {
    @apply text-warm-700 mb-1;
  }
  .prose-info strong {
    @apply text-warm-700 font-semibold;
  }
}