@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap');

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

:root {
  /* Primary Colors - Deep navy conveying scientific authority and trust */
  --color-primary: #1e3a5f; /* custom-navy-900 */
  --color-primary-light: #2c5282; /* custom-navy-700 */
  --color-primary-dark: #152a45; /* custom-navy-950 */
  
  /* Secondary Colors - Lighter navy for interactive elements and depth */
  --color-secondary: #2c5282; /* custom-navy-700 */
  --color-secondary-light: #3b6ba8; /* custom-navy-600 */
  --color-secondary-dark: #1e3a5f; /* custom-navy-900 */
  
  /* Accent Colors - Professional blue for CTAs and focus states */
  --color-accent: #3182ce; /* blue-600 */
  --color-accent-light: #4299e1; /* blue-500 */
  --color-accent-dark: #2c5282; /* blue-700 */
  --color-accent-hover: #2b6cb0; /* blue-700 */
  
  /* Background Colors - Pure white for clean, laboratory-like clarity */
  --color-background: #ffffff; /* white */
  --color-surface: #f7fafc; /* gray-50 */
  --color-surface-hover: #edf2f7; /* gray-100 */
  
  /* Text Colors */
  --color-text-primary: #2d3748; /* gray-800 */
  --color-text-secondary: #4a5568; /* gray-700 */
  --color-text-tertiary: #718096; /* gray-600 */
  --color-text-inverse: #ffffff; /* white */
  
  /* Status Colors */
  --color-success: #38a169; /* green-600 */
  --color-success-light: #48bb78; /* green-500 */
  --color-success-dark: #2f855a; /* green-700 */
  
  --color-warning: #d69e2e; /* yellow-600 */
  --color-warning-light: #ecc94b; /* yellow-500 */
  --color-warning-dark: #b7791f; /* yellow-700 */
  
  --color-error: #e53e3e; /* red-600 */
  --color-error-light: #f56565; /* red-500 */
  --color-error-dark: #c53030; /* red-700 */
  
  /* Border Colors */
  --color-border: #e2e8f0; /* gray-300 */
  --color-border-light: #edf2f7; /* gray-100 */
  --color-border-dark: #cbd5e0; /* gray-400 */
  
  /* Shadow Values */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  
  /* Transition Values */
  --transition-base: 300ms ease-in-out;
  --transition-fast: 150ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
}

@layer base {
  body {
    @apply font-sans text-text-primary bg-background antialiased;
    font-feature-settings: 'kern' 1, 'liga' 1;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-sans font-semibold text-text-primary;
    letter-spacing: -0.02em;
  }
  
  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl font-bold leading-tight;
  }
  
  h2 {
    @apply text-3xl md:text-4xl lg:text-5xl font-bold leading-tight;
  }
  
  h3 {
    @apply text-2xl md:text-3xl lg:text-4xl font-semibold leading-snug;
  }
  
  h4 {
    @apply text-xl md:text-2xl lg:text-3xl font-semibold leading-snug;
  }
  
  h5 {
    @apply text-lg md:text-xl lg:text-2xl font-semibold leading-normal;
  }
  
  h6 {
    @apply text-base md:text-lg lg:text-xl font-semibold leading-normal;
  }
  
  p {
    @apply text-base leading-relaxed text-text-secondary;
  }
  
  a {
    @apply text-accent transition-colors duration-300 hover:text-accent-dark;
  }
  
  code, pre {
    @apply font-mono text-sm;
  }
}

@layer components {
  /* Button Styles */
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 font-semibold rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  
  .btn-primary {
    @apply bg-accent text-white hover:bg-accent-hover focus:ring-accent shadow-md hover:shadow-lg;
  }
  
  .btn-secondary {
    @apply bg-secondary text-white hover:bg-secondary-dark focus:ring-secondary shadow-sm hover:shadow-md;
  }
  
  .btn-outline {
    @apply border-2 border-accent text-accent hover:bg-accent hover:text-white focus:ring-accent;
  }
  
  .btn-ghost {
    @apply text-accent hover:bg-surface focus:ring-accent;
  }
  
  /* Card Styles */
  .card {
    @apply bg-white rounded-lg border border-border p-6 transition-shadow duration-300;
    box-shadow: var(--shadow-sm);
  }
  
  .card-hover {
    @apply hover:shadow-md;
  }
  
  .card-elevated {
    box-shadow: var(--shadow-md);
  }
  
  /* Form Styles */
  .form-input {
    @apply w-full px-4 py-3 border border-border rounded-lg bg-white text-text-primary placeholder-text-tertiary transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-accent focus:border-accent;
  }
  
  .form-label {
    @apply block text-sm font-medium text-text-primary mb-2;
  }
  
  .form-error {
    @apply text-sm text-error mt-1;
  }
  
  .form-success {
    @apply text-sm text-success mt-1;
  }
  
  /* Badge Styles */
  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
  }
  
  .badge-success {
    @apply bg-success/10 text-success;
  }
  
  .badge-warning {
    @apply bg-warning/10 text-warning;
  }
  
  .badge-error {
    @apply bg-error/10 text-error;
  }
  
  .badge-primary {
    @apply bg-primary/10 text-primary;
  }
  
  /* Section Styles */
  .section {
    @apply py-16 md:py-24 lg:py-32;
  }
  
  .section-alt {
    @apply bg-surface;
  }
  
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  /* Animation Utilities */
  .animate-fade-in {
    animation: fadeIn var(--transition-base) ease-in-out;
  }
  
  .animate-slide-up {
    animation: slideUp var(--transition-base) ease-in-out;
  }
  
  .animate-slide-down {
    animation: slideDown var(--transition-base) ease-in-out;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .transition-base {
    transition: all var(--transition-base);
  }
  
  .transition-fast {
    transition: all var(--transition-fast);
  }
  
  .transition-slow {
    transition: all var(--transition-slow);
  }
}

/* Keyframe Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection Styles */
::selection {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
}

::-moz-selection {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
}

/* Focus Visible Styles */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-dark);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}