/**
 * Budget Planner Design System
 * 
 * Complete design system extracted from the Budget Planner application.
 * This file imports all design tokens and components for easy integration.
 */

/* Import Design Tokens */
@import 'tokens/colors.css';
@import 'tokens/typography.css';
@import 'tokens/spacing.css';
@import 'tokens/layout.css';

/* Import Components */
@import 'components/buttons.css';
@import 'components/forms.css';
@import 'components/cards.css';
@import 'components/modal.css';
@import 'components/navigation.css';
@import 'components/tooltip.css';
@import 'components/spinner.css';
@import 'components/snackbar.css';

/* Import Themes */
@import 'themes/dark.css';

/* Base Reset and Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-primary);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

/* Global Utility Classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-primary-light); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success-light); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }

.bg-primary { background: var(--color-primary-gradient); }
.bg-white { background: var(--color-white); }
.bg-gray-100 { background: var(--color-gray-100); }
.bg-success { background: var(--color-success-light); }
.bg-danger { background: var(--color-danger); }

.border { border: var(--border-width-thin) solid var(--color-border-light); }
.border-light { border-color: var(--color-border-light); }
.border-medium { border-color: var(--color-border-medium); }
.border-primary { border-color: var(--color-primary-light); }

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* Animation Classes */
.fade-in {
  animation: fadeIn 0.3s ease-out;
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* Hover Effects */
.hover-lift {
  transition: var(--transition-transform);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

.hover-shadow {
  transition: box-shadow 0.3s ease;
}

.hover-shadow:hover {
  box-shadow: var(--shadow-lg);
}

/* Focus Styles */
.focus-ring:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}



/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .card-section,
  .card {
    box-shadow: none !important;
    border: var(--border-width-thin) solid var(--color-gray-300) !important;
  }
  
  .btn {
    border: var(--border-width-thin) solid var(--color-gray-300) !important;
  }
}