/**
 * OAM Component Library
 * Complete CSS-only component system with HTMX integration
 *
 * Version: 1.0.0
 * Architecture: CSS-only with OAM token system
 *
 * Usage:
 *   1. Include oam-tokens.css (from design-system/dist/)
 *   2. Include this file
 *   3. Apply component classes to HTML elements
 *
 * Example:
 *   <link rel="stylesheet" href="oam-tokens.css">
 *   <link rel="stylesheet" href="oam-components.css">
 *   <button class="oam-btn oam-btn-primary">Click me</button>
 */

/* ==========================================================================
   CORE COMPONENTS
   ========================================================================== */

/* Typography - Headings, prose, text treatments */
@import url('./typography.css');

/* Motion - Transitions, animations, reveals */
@import url('./motion.css');

/* Buttons - Primary interaction elements */
@import url('./buttons.css');

/* Cards - Content containers */
@import url('./cards.css');

/* Forms - Input elements and controls */
@import url('./forms.css');

/* Tables - Data display */
@import url('./tables.css');

/* Navigation - Menus, tabs, breadcrumbs */
@import url('./navigation.css');

/* Alerts - Notifications, badges, progress */
@import url('./alerts.css');

/* Modals - Dialogs, drawers, overlays */
@import url('./modals.css');

/* Layout - Stack, cluster, sidebar, grid primitives */
@import url('./layout.css');

/* Data Visualization - Charts, graphs, metrics displays */
@import url('./data-viz.css');

/* Utilities - Layout and helper classes */
@import url('./utilities.css');

/* Scroll Continuity - Scroll-tilt and teaser edge effects */
@import url('./scroll-continuity.css');

/* Umain Patterns - 8 award-winning landing page principles */
@import url('./umain-patterns.css');

/* ==========================================================================
   GLOBAL HTMX STATES
   ========================================================================== */

/**
 * HTMX Integration
 * These states work with any component when HTMX makes requests
 */

/* Generic loading state */
.htmx-request {
  cursor: wait;
}

/* Swap animation classes */
.htmx-swapping {
  opacity: 0.5;
}

.htmx-settling {
  opacity: 1;
  transition: opacity var(--oam-core-motion-duration-fast);
}

/* ==========================================================================
   GLOBAL ANIMATIONS
   ========================================================================== */

/**
 * Shared animations used across components
 */

/* Shimmer effect for skeletons */
@keyframes oam-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Pulse effect for status indicators */
@keyframes oam-pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.5); opacity: 0; }
}

/* Toast slide-in */
@keyframes oam-toast-in {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Toast slide-out */
@keyframes oam-toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-1rem);
  }
}

/* Progress indeterminate */
@keyframes oam-progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Spin animation */
@keyframes oam-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Ping animation */
@keyframes oam-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* Bounce animation */
@keyframes oam-bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  /* Hide interactive elements */
  .oam-btn,
  .oam-modal,
  .oam-drawer,
  .oam-backdrop,
  .oam-toast-container,
  .oam-navbar-toggle {
    display: none !important;
  }

  /* Remove shadows and backgrounds */
  .oam-card,
  .oam-table-container {
    box-shadow: none !important;
    border: 1px solid #000 !important;
  }

  /* Force black text */
  body {
    color: #000 !important;
  }

  /* Show link URLs */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .oam-btn {
    border: 2px solid currentColor;
  }

  .oam-input,
  .oam-select,
  .oam-textarea {
    border: 2px solid currentColor;
  }

  .oam-card {
    border: 2px solid currentColor;
  }
}

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--oam-core-color-semantic-border-focus);
  outline-offset: 2px;
}

/* Skip to main content link (place at top of document) */
.oam-skip-link {
  position: absolute;
  top: -100%;
  left: var(--oam-core-spacing-4);
  z-index: 9999;
  padding: var(--oam-core-spacing-2) var(--oam-core-spacing-4);
  background-color: var(--oam-core-color-semantic-background-primary);
  border: 2px solid var(--oam-core-color-semantic-border-focus);
  border-radius: var(--oam-core-radius-md);
  font-weight: 600;
  text-decoration: none;
  color: var(--oam-core-color-semantic-text-primary);
}

.oam-skip-link:focus {
  top: var(--oam-core-spacing-4);
}