/* Spark Interactions - Unified Transition and Micro-interaction System
 * 
 * This file defines consistent timing, easing, and interaction tokens
 * for all interactive elements in the Care Companion UI.
 * 
 * Spark's micro-interactions are:
 * - Soft, subtle, and very short (80–180ms)
 * - Consistent across components
 * - Used to reinforce hierarchy and user orientation
 * - Never distracting or high-contrast
 */

:root {
  /* Transition timing tokens */
  --trans-fast: 80ms ease;
  --trans-normal: 120ms ease;
  --trans-slow: 180ms ease;
  
  /* Focus ring for keyboard navigation */
  --focus-ring: 0 0 0 2px rgba(74, 116, 249, 0.35);
  
  /* Fade-in animation variables */
  --fade-in-duration: 120ms;
  --fade-in-ease: ease-out;
  
  /* Hover effects */
  --hover-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  --hover-shadow-dark: 0 2px 8px rgba(0, 0, 0, 0.45);
  
  /* Expand/collapse timing */
  --expand-duration: 150ms;
  --expand-ease: ease;
}

/* Dark mode adjustments for shadows */
[data-theme="dark"] {
  --hover-shadow: var(--hover-shadow-dark);
}

/* Reduced motion support - accessibility first */
@media (prefers-reduced-motion: reduce) {
  :root {
    --trans-fast: 0ms;
    --trans-normal: 0ms;
    --trans-slow: 0ms;
    --fade-in-duration: 0ms;
    --expand-duration: 0ms;
  }
}

/* =========================
   Focus States (Keyboard Navigation)
   ========================= */

/* Base focusable class for consistent keyboard navigation */
.spark-focusable:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* =========================
   Fade-in Animation
   ========================= */

/* Spark fade-in keyframe - used for messages, chips, and new content */
@keyframes sparkFadeIn {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply fade-in to chat bubbles and messages */
.spark-chat-bubble {
  animation: sparkFadeIn var(--fade-in-duration) var(--fade-in-ease);
}

/* =========================
   Expandable Sections
   ========================= */

/* Base expandable section style */
.spark-expandable {
  overflow: hidden;
  transition: max-height var(--expand-duration) var(--expand-ease),
              opacity var(--expand-duration) var(--expand-ease);
}

.spark-expandable--collapsed {
  max-height: 0;
  opacity: 0;
}

.spark-expandable--expanded {
  opacity: 1;
  /* max-height should be set dynamically in component code */
}

/* =========================
   Common Interactive Elements
   ========================= */

/* Smooth transitions for all interactive elements */
button,
.spark-chip,
.spark-surface,
.spark-conversation-card,
.spark-step-nav__phase,
.spark-step-nav__step,
.spark-resizer {
  transition: background-color var(--trans-normal),
              border-color var(--trans-normal),
              box-shadow var(--trans-fast),
              color var(--trans-fast),
              transform var(--trans-fast);
}

/* Active/pressed state for buttons and interactive elements */
button:active,
.spark-chip--clickable:active,
.spark-conversation-card:active,
.spark-step-nav__phase:active,
.spark-step-nav__step:active {
  transform: scale(0.98);
}