/* Lastroo Design System - Component Styles */

/* Apply default font families */
body {
  font-family: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
}

.font-financial, .font-mono {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Typography Utilities */
.text-display { font-size: 3rem; line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }
.text-h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -0.01em; font-weight: 500; }
.text-h2 { font-size: 1.5rem; line-height: 1.25; font-weight: 500; }
.text-h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 500; }
.text-h4 { font-size: 1.125rem; line-height: 1.4; font-weight: 500; }
.text-body-lg { font-size: 1.125rem; line-height: 1.6; font-weight: 400; }
.text-body { font-size: 1rem; line-height: 1.6; font-weight: 400; }
.text-body-sm { font-size: 0.875rem; line-height: 1.5; font-weight: 400; }
.text-caption { font-size: 0.75rem; line-height: 1.4; font-weight: 400; }

/* Button Base Styles */
.btn {
  font-weight: 500; padding: 0.75rem 1.5rem; border-radius: 0.5rem;
  transition-property: all; transition-duration: 200ms; outline: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(92, 124, 92, 0.5); }
.btn-primary { background-color: #5c7c5c; color: white; }
.btn-primary:hover { background-color: #4a6a4a; }
.btn-secondary { background-color: #1f2937; color: white; }
.btn-secondary:hover { background-color: #374151; }
.btn-outline { border: 2px solid #5c7c5c; color: #5c7c5c; }
.btn-outline:hover { background-color: #5c7c5c; color: white; }
.btn-ghost { color: #5c7c5c; }
.btn-ghost:hover { background-color: #f5f7f5; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.125rem; }

/* Card Styles */
.card { background-color: white; border-radius: 0.75rem; border: 1px solid #e5e7eb; transition: box-shadow 200ms; }
.card-hover:hover { box-shadow: 0 8px 24px rgba(92, 124, 92, 0.12); }
.card-body { padding: 1.5rem; }
.card-header { padding: 1rem 1.5rem; border-bottom: 1px solid #f3f4f6; }
.card-footer { padding: 1rem 1.5rem; border-top: 1px solid #f3f4f6; background-color: #f9fafb; }

/* Badge Styles */
.badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; }
.badge-success { background-color: rgba(5, 150, 105, 0.1); color: #059669; }
.badge-warning { background-color: rgba(217, 119, 6, 0.1); color: #d97706; }
.badge-error { background-color: rgba(220, 38, 38, 0.1); color: #dc2626; }
.badge-info { background-color: rgba(92, 124, 92, 0.1); color: #5c7c5c; }
.badge-neutral { background-color: rgba(107, 114, 128, 0.1); color: #6b7280; }

/* Form Input Styles */
.input { display: block; width: 100%; padding: 0.75rem 1rem; border: 1px solid #d1d5db; border-radius: 0.5rem; transition: all 200ms; }
.input:focus { outline: none; border-color: #5c7c5c; box-shadow: 0 0 0 3px rgba(92, 124, 92, 0.15); }
.input-error { border-color: #dc2626; }
.input-error:focus { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); }
.label { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.5rem; }
.input-help { margin-top: 0.25rem; font-size: 0.875rem; color: #6b7280; }
.input-error-message { margin-top: 0.25rem; font-size: 0.875rem; color: #dc2626; }

/* Financial Display */
.financial-value { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; color: #1f2937; }
.financial-value-positive { color: #059669; }
.financial-value-negative { color: #dc2626; }

/* Container Utilities */
.container-lastroo { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .container-lastroo { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .container-lastroo { padding-left: 2rem; padding-right: 2rem; } }
.section-spacing { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 768px) { .section-spacing { padding-top: 4rem; padding-bottom: 4rem; } }
@media (min-width: 1024px) { .section-spacing { padding-top: 5rem; padding-bottom: 5rem; } }

/* Animation Utilities */
.animate-fade-in { animation: fadeIn 0.5s ease-in-out; }
.animate-slide-up { animation: slideUp 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Responsive Typography */
@media (max-width: 768px) {
  .text-display { font-size: 2rem; }
  .text-h1 { font-size: 1.5rem; }
  .text-h2 { font-size: 1.25rem; }
  .text-h3 { font-size: 1.125rem; }
}

/* Focus Visible for Accessibility */
*:focus-visible { outline: 2px solid #5c7c5c; outline-offset: 2px; }

/* Lastroo Color Utilities - Background */
.bg-lastroo-50 { background-color: #f5f7f5; }
.bg-lastroo-100 { background-color: #e8ede8; }
.bg-lastroo-200 { background-color: #d1dbd1; }
.bg-lastroo-300 { background-color: #a8bca8; }
.bg-lastroo-400 { background-color: #7a9a7a; }
.bg-lastroo-500 { background-color: #5c7c5c; }
.bg-lastroo-600 { background-color: #4a6a4a; }
.bg-lastroo-700 { background-color: #3d573d; }
.bg-lastroo-800 { background-color: #334633; }
.bg-lastroo-900 { background-color: #2a3a2a; }

/* Lastroo Color Utilities - Text */
.text-lastroo-50 { color: #f5f7f5; }
.text-lastroo-100 { color: #e8ede8; }
.text-lastroo-200 { color: #d1dbd1; }
.text-lastroo-300 { color: #a8bca8; }
.text-lastroo-400 { color: #7a9a7a; }
.text-lastroo-500 { color: #5c7c5c; }
.text-lastroo-600 { color: #4a6a4a; }
.text-lastroo-700 { color: #3d573d; }
.text-lastroo-800 { color: #334633; }
.text-lastroo-900 { color: #2a3a2a; }

/* Lastroo Color Utilities - Border */
.border-lastroo-50 { border-color: #f5f7f5; }
.border-lastroo-100 { border-color: #e8ede8; }
.border-lastroo-200 { border-color: #d1dbd1; }
.border-lastroo-300 { border-color: #a8bca8; }
.border-lastroo-400 { border-color: #7a9a7a; }
.border-lastroo-500 { border-color: #5c7c5c; }
.border-lastroo-600 { border-color: #4a6a4a; }
.border-lastroo-700 { border-color: #3d573d; }
.border-lastroo-800 { border-color: #334633; }
.border-lastroo-900 { border-color: #2a3a2a; }

/* Lastroo Hover States */
.hover\:text-lastroo-500:hover { color: #5c7c5c; }
.hover\:text-lastroo-600:hover { color: #4a6a4a; }
.hover\:bg-lastroo-50:hover { background-color: #f5f7f5; }
.hover\:bg-lastroo-500:hover { background-color: #5c7c5c; }
.hover\:bg-lastroo-600:hover { background-color: #4a6a4a; }

/* Lastroo Box Shadow */
.shadow-lastroo-card { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.shadow-lastroo-card-hover { box-shadow: 0 8px 24px rgba(92, 124, 92, 0.12); }

/* Lastroo Border Radius */
.rounded-lastroo { border-radius: 0.75rem; }
.rounded-lastroo-sm { border-radius: 0.5rem; }
.rounded-lastroo-lg { border-radius: 1rem; }

/* Lastroo Ring (Focus States) */
.focus\:ring-lastroo:focus {
  --tw-ring-color: rgba(92, 124, 92, 0.5);
  box-shadow: 0 0 0 3px rgba(92, 124, 92, 0.5);
}