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

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

@layer base {
  /* Base typography settings */
  html {
    @apply font-sans text-base text-gray-900;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
  }
  
  body {
    @apply bg-white text-gray-900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Professional heading hierarchy */
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif font-semibold text-gray-900 tracking-tight;
  }
  
  h1 {
    @apply text-4xl md:text-5xl leading-tight;
  }
  
  h2 {
    @apply text-3xl md:text-4xl leading-tight;
  }
  
  h3 {
    @apply text-2xl md:text-3xl leading-snug;
  }
  
  h4 {
    @apply text-xl md:text-2xl leading-snug;
  }
  
  h5 {
    @apply text-lg md:text-xl leading-snug;
  }
  
  h6 {
    @apply text-base md:text-lg leading-snug;
  }
  
  /* Body text optimization */
  p {
    @apply text-gray-700 leading-relaxed;
  }
  
  /* Link styling */
  a {
    @apply text-gray-900 hover:text-gray-700 transition-colors;
  }
  
  /* Form elements */
  input, textarea, select {
    @apply font-sans text-base;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  
  /* Table typography */
  table {
    @apply font-sans;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  
  /* Code and monospace */
  code, pre {
    @apply font-mono text-sm;
    font-feature-settings: "liga" 0;
  }
}

@layer components {
  /* Professional UI components */
  .btn-primary {
    @apply bg-black text-white font-medium px-6 py-3 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black transition-all duration-200;
  }
  
  .btn-secondary {
    @apply bg-gray-100 text-gray-900 font-medium px-6 py-3 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-200;
  }
  
  .btn-outline {
    @apply border border-gray-300 text-gray-700 font-medium px-6 py-3 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-200;
  }

  .btn-danger {
    @apply bg-red-600 text-white font-medium px-6 py-3 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all duration-200;
  }
  
  /* Card components */
  .card {
    @apply bg-white border border-gray-200 shadow-sm;
  }
  
  .card-header {
    @apply p-6 border-b border-gray-200;
  }
  
  .card-body {
    @apply p-6;
  }

  .card-footer {
    @apply p-6 border-t border-gray-200 bg-gray-50;
  }
  
  .card-title {
    @apply font-serif text-xl font-semibold text-gray-900 tracking-tight;
  }
  
  .card-subtitle {
    @apply font-sans text-sm text-gray-600 mt-1;
  }
  
  /* Navigation typography */
  .nav-link {
    @apply font-medium text-gray-700 hover:text-gray-900 transition-colors;
  }
  
  .nav-link-active {
    @apply font-semibold text-gray-900;
  }
  
  /* Form typography */
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
  
  .form-input {
    @apply w-full border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent transition-all duration-200;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  
  .form-select {
    @apply w-full border border-gray-300 px-3 py-2 bg-white focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent transition-all duration-200;
  }
  
  .form-textarea {
    @apply w-full border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent transition-all duration-200;
  }
  
  /* Table typography */
  .table-header {
    @apply font-medium text-gray-900 text-left py-3 px-4 bg-gray-50 border-b border-gray-200;
  }
  
  .table-cell {
    @apply py-3 px-4 border-b border-gray-200 text-gray-700;
  }
  
  .table-cell-numeric {
    @apply py-3 px-4 border-b border-gray-200 text-gray-700 text-right font-mono;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  
  /* Status badges */
  .badge {
    @apply inline-flex items-center px-3 py-1 text-xs font-medium;
  }
  
  .badge-success {
    @apply bg-green-100 text-green-800;
  }
  
  .badge-warning {
    @apply bg-yellow-100 text-yellow-800;
  }
  
  .badge-error {
    @apply bg-red-100 text-red-800;
  }
  
  .badge-neutral {
    @apply bg-gray-100 text-gray-800;
  }
  
  /* Typography utility classes */
  .text-display {
    @apply font-serif text-4xl font-bold text-gray-900 tracking-tight;
  }
  
  .text-headline {
    @apply font-serif text-3xl font-semibold text-gray-900 tracking-tight;
  }
  
  .text-title {
    @apply font-serif text-2xl font-semibold text-gray-900 tracking-tight;
  }
  
  .text-subtitle {
    @apply font-serif text-xl font-medium text-gray-900 tracking-tight;
  }
  
  .text-body {
    @apply font-sans text-base text-gray-700 leading-relaxed;
  }
  
  .text-caption {
    @apply font-sans text-sm text-gray-600;
  }
  
  .text-micro {
    @apply font-sans text-xs text-gray-500;
  }
  
  /* Data display */
  .text-data {
    @apply font-mono text-base;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  
  .text-data-large {
    @apply font-mono text-lg font-medium;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  
  /* Professional spacing */
  .section-padding {
    @apply py-12 px-4 sm:px-6 lg:px-8;
  }
  
  .content-width {
    @apply max-w-7xl mx-auto;
  }
  
  /* Focus styles */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black;
  }
  
  /* Responsive typography */
  @media (max-width: 640px) {
    .text-responsive-display {
      @apply text-3xl;
    }
    
    .text-responsive-headline {
      @apply text-2xl;
    }
    
    .text-responsive-title {
      @apply text-xl;
    }
  }
}

/* Custom font loading optimization */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/crimsontext/v19/wlp2gwHKFkZgtmSR3NB0oRJvaAJSA_JN3Q.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}