/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Import Google Fonts - Alegreya family for typography */
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&display=swap');

/* Custom CSS Variables for consistent theming */
:root {
  --font-sans: 'Alegreya Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Alegreya', Georgia, 'Times New Roman', serif;

  --shadow-soft: 0 2px 8px 0 rgb(0 0 0 / 0.08);
  --shadow-medium: 0 4px 16px 0 rgb(0 0 0 / 0.12);
  --shadow-strong: 0 8px 32px 0 rgb(0 0 0 / 0.16);
}

/* Base styles */
body {
  font-family: var(--font-sans);
  background-color: #f8fafc;
}

/* Custom component styles */
.btn-primary {
  @apply bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-secondary {
  @apply bg-green-400 hover:bg-green-500 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.card {
  @apply bg-white rounded-xl shadow-soft border border-gray-100;
}

.card-hover {
  @apply bg-white rounded-xl shadow-soft hover:shadow-medium border border-gray-100 transition-shadow duration-200;
}

/* Nature-inspired backgrounds */
.bg-organic-gradient {
  background-image: radial-gradient(circle at 20% 80%, #dcf2e9 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, #f0f9f6 0%, transparent 50%);
}

/* Focus styles for better accessibility */
.focus-nature {
  @apply focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 focus:ring-offset-2;
}

/* Form element styling */
.form-input {
  @apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm;
}

.form-select {
  @apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm;
}

/* Custom table styling */
.table-nature {
  @apply min-w-full divide-y divide-gray-200 bg-white shadow-soft rounded-xl overflow-hidden;
}

.table-nature th {
  @apply px-6 py-3 bg-green-50 text-left text-xs font-medium text-green-800 uppercase tracking-wider;
}

.table-nature td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}