/* Base CSS - CSS Tokens and Global Styles */

:root {
  /* Color Tokens */
  --accent: #e6e6fa;           /* Light purple */
  --accent-dark: #d8bfd8;      /* Darker purple */
  --muted: #f5f5f5;            /* Light gray */
  --card-bg: #ffffff;          /* White background */
  --card-border: #e0e0e0;      /* Light border */
  --kpi-up: #a8d5a8;          /* Sage green for positive */
  --kpi-down: #f8b5d1;        /* Light pink for negative */
  --success: #22c55e;          /* Green for success/positive */
  --error: #ef4444;            /* Red for error/negative */
  --warning: #f59e0b;          /* Orange for warning */
  --danger: #dc2626;           /* Dark red for danger */
  --text-primary: #2c2c2c;     /* Black text */
  --text-secondary: #666666;  /* Gray text */
  --text-muted: #999999;      /* Muted text */
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--muted);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus Styles */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

.loading-skeleton {
  background: linear-gradient(90deg, var(--muted) 25%, #f0f0f0 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Additional utility classes can be added here as needed */