/* Lastroo Design System - Custom Utilities */

/* 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 {
  @apply font-medium px-6 py-3 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 inline-flex items-center justify-center;
}

.btn-primary {
  @apply bg-lastroo-500 hover:bg-lastroo-600 text-white focus:ring-lastroo-500;
}

.btn-secondary {
  @apply bg-gray-800 hover:bg-gray-700 text-white focus:ring-gray-800;
}

.btn-outline {
  @apply border-2 border-lastroo-500 text-lastroo-500 hover:bg-lastroo-500 hover:text-white focus:ring-lastroo-500;
}

.btn-ghost {
  @apply text-lastroo-500 hover:bg-lastroo-50 focus:ring-lastroo-300;
}

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

.btn-lg {
  @apply px-8 py-4 text-lg;
}

/* Card Styles */
.card {
  @apply bg-white rounded-xl border border-gray-200 transition-shadow duration-200;
}

.card-hover:hover {
  box-shadow: 0 8px 24px rgba(92, 124, 92, 0.12);
}

.card-body {
  @apply p-6;
}

.card-header {
  @apply px-6 py-4 border-b border-gray-100;
}

.card-footer {
  @apply px-6 py-4 border-t border-gray-100 bg-gray-50;
}

/* Badge Styles */
.badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.badge-success {
  @apply bg-emerald-50 text-emerald-600;
}

.badge-warning {
  @apply bg-amber-50 text-amber-600;
}

.badge-error {
  @apply bg-red-50 text-red-600;
}

.badge-info {
  @apply bg-lastroo-50 text-lastroo-600;
}

.badge-neutral {
  @apply bg-gray-100 text-gray-600;
}

/* Form Input Styles */
.input {
  @apply block w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-lastroo-500 focus:border-lastroo-500 transition-colors;
}

.input-error {
  @apply border-red-500 focus:border-red-500 focus:ring-red-500/20;
}

.label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

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

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

/* Financial Display */
.financial-value {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  @apply font-medium text-gray-800;
}

.financial-value-positive {
  @apply text-emerald-600;
}

.financial-value-negative {
  @apply text-red-600;
}

/* Container Utilities */
.container-lastroo {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.section-spacing {
  @apply py-12 md:py-16 lg:py-20;
}

/* 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;
}