@import './fonts.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base typography styles */
@layer base {
  html {
    font-family: 'Work Sans', sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Domaine Display', serif;
  }
}

/* Component styles for design system */
@layer components {
  /* Button styles */
  .btn-primary {
    @apply bg-titan-yellow-400 hover:bg-titan-yellow-500 text-titan-gray-900 font-medium px-6 py-3 rounded-button shadow-button transition-colors duration-200;
  }

  .btn-secondary {
    @apply bg-titan-gray-100 hover:bg-titan-gray-200 text-titan-gray-800 font-medium px-6 py-3 rounded-button shadow-button transition-colors duration-200;
  }

  /* Card styles */
  .card {
    @apply bg-white rounded-card shadow-card p-6;
  }

  /* Form input styles */
  .form-input {
    @apply w-full px-4 py-3 bg-transparent border-b-2 border-titan-gray-300 focus:border-titan-green-600 focus:outline-none transition-colors duration-200;
  }

  /* Typography utilities */
  .heading-serif {
    @apply font-serif;
  }

  .text-sans {
    @apply font-sans;
  }
}