imkFinal/frontend/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');

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

@layer base {
  /* Base styles */
  html {
    @apply antialiased scroll-smooth;
  }
  
  body {
    @apply bg-neutral-50 text-neutral-800 font-sans;
  }

  /* Typography base styles */
  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
  }

  /* Focus styles */
  *:focus-visible {
    @apply outline-none ring-2 ring-primary-400 ring-offset-2;
  }
}

@layer components {
  /* Layout Components */
  .container-base {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .section-padding {
    @apply py-12 md:py-16 lg:py-24;
  }

  .flex-center {
    @apply flex items-center justify-center;
  }

  .flex-between {
    @apply flex items-center justify-between;
  }

  /* Card Variants */
  .card {
    @apply bg-white rounded-lg shadow-sm border border-neutral-200/80 transition-all duration-200 hover:shadow-md hover:border-neutral-300/80;
  }

  .card-interactive {
    @apply card cursor-pointer hover:border-primary-200;
  }

  .card-padding-sm {
    @apply p-4;
  }

  .card-padding-base {
    @apply p-6;
  }

  .card-padding-lg {
    @apply p-8;
  }

  /* Button Variants */
  .btn-base {
    @apply inline-flex items-center justify-center rounded-lg font-medium 
    transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 
    disabled:opacity-60 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply btn-base bg-primary-600 text-white 
    hover:bg-primary-700 
    focus:ring-primary-400 
    shadow-sm border border-transparent;
  }

  .btn-secondary {
    @apply btn-base bg-neutral-100 text-neutral-800 
    hover:bg-neutral-200 
    border border-neutral-200 
    focus:ring-primary-400;
  }

  .btn-outline {
    @apply btn-base bg-transparent text-primary-600 
    hover:bg-primary-50 
    border border-primary-600 
    focus:ring-primary-400;
  }

  .btn-danger {
    @apply btn-base bg-red-600 text-white hover:bg-red-700 
    focus:ring-red-500 shadow-sm border border-transparent;
  }

  /* Button Sizes */
  .btn-sm {
    @apply px-3 py-1.5 text-sm;
  }

  .btn-base {
    @apply px-4 py-2 text-sm;
  }

  .btn-lg {
    @apply px-6 py-3 text-base;
  }

  /* Form Elements */
  .form-group {
    @apply space-y-1;
  }

  .input-label {
    @apply block text-sm font-medium text-neutral-700 mb-1;
  }

  .input-base {
    @apply block w-full rounded-lg 
    border-neutral-300 
    shadow-sm 
    focus:border-primary-500 focus:ring-primary-400 
    disabled:bg-neutral-100 disabled:cursor-not-allowed
    placeholder:text-neutral-400
    sm:text-sm;
  }

  .input-error {
    @apply border-red-300 text-red-900 placeholder-red-300 
    focus:border-red-500 focus:ring-red-500;
  }

  .error-message {
    @apply text-sm text-red-600 mt-1;
  }

  .input-help {
    @apply text-sm text-neutral-500 mt-1;
  }

  /* Typography Utilities */
  .heading-1 {
    @apply text-4xl sm:text-5xl lg:text-6xl font-display font-bold text-neutral-900 tracking-tight;
  }

  .heading-2 {
    @apply text-3xl sm:text-4xl font-display font-semibold text-neutral-900;
  }

  .heading-3 {
    @apply text-2xl font-display font-semibold text-neutral-900;
  }

  .heading-4 {
    @apply text-xl font-display font-semibold text-neutral-900;
  }

  .text-body-lg {
    @apply text-lg text-neutral-600;
  }

  .text-body {
    @apply text-base text-neutral-600;
  }

  .text-body-sm {
    @apply text-sm text-neutral-600;
  }

  /* Badge Variants */
  .badge-base {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
  }

  .badge-primary {
    @apply badge-base bg-primary-100 text-primary-800;
  }

  .badge-success {
    @apply badge-base bg-success-100 text-success-800;
  }

  .badge-warning {
    @apply badge-base bg-warning-100 text-warning-800;
  }

  .badge-error {
    @apply badge-base bg-error-100 text-error-800;
  }

  /* Table Styles */
  .table-container {
    @apply overflow-x-auto rounded-lg border border-neutral-200 bg-white;
  }

  .table-base {
    @apply min-w-full divide-y divide-neutral-200;
  }

  .table-header {
    @apply bg-neutral-50 text-left text-sm font-medium text-neutral-600;
  }

  .table-header-cell {
    @apply px-6 py-3;
  }

  .table-body {
    @apply divide-y divide-neutral-200 bg-white;
  }

  .table-row {
    @apply hover:bg-neutral-50 transition-colors duration-150;
  }

  .table-cell {
    @apply whitespace-nowrap px-6 py-4 text-sm text-neutral-700;
  }

  /* Grid Layouts */
  .grid-cards {
    @apply grid gap-6 sm:grid-cols-2 lg:grid-cols-3;
  }

  .grid-cards-4 {
    @apply grid gap-6 sm:grid-cols-2 lg:grid-cols-4;
  }

  /* Animation Utilities */
  .animate-fade-in {
    @apply transition-opacity duration-300 ease-in-out;
  }

  .animate-slide-up {
    @apply transition-all duration-300 ease-in-out transform;
  }

  /* Loading States */
  .loading-spinner {
    @apply animate-spin rounded-full border-4 border-neutral-200 border-t-primary-600 h-8 w-8;
  }

  .loading-pulse {
    @apply animate-pulse bg-neutral-200 rounded;
  }

  /* Overlay/Modal */
  .overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm transition-opacity;
  }

  .modal-container {
    @apply fixed inset-0 z-50 overflow-y-auto;
  }

  .modal-content {
    @apply relative transform overflow-hidden 
    rounded-xl bg-white 
    shadow-xl transition-all 
    border border-neutral-200;
  }

  /* Navigation styles */
  .nav-link {
    @apply text-neutral-600 hover:text-primary-600 
    transition-colors duration-200 
    px-3 py-2 rounded-lg 
    hover:bg-primary-50;
  }

  .nav-link-active {
    @apply text-primary-600 bg-primary-50;
  }
}

/* Custom Scrollbar */
@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
  }

  .scrollbar-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }

  /* Custom scrollbar for Webkit browsers */
  .scrollbar-custom::-webkit-scrollbar {
    @apply w-2;
  }

  .scrollbar-custom::-webkit-scrollbar-track {
    @apply bg-neutral-100 rounded-full;
  }

  .scrollbar-custom::-webkit-scrollbar-thumb {
    @apply bg-neutral-300 rounded-full hover:bg-neutral-400;
  }
}