/* ================================================================
   OPERON DESIGN SYSTEM — Utilities & Animations
   Atomic utility classes + reusable animation library
   ================================================================ */

/* ===== LAYOUT UTILITIES ===== */

/* Display */
.op-flex { display: flex; }
.op-inline-flex { display: inline-flex; }
.op-grid { display: grid; }
.op-block { display: block; }
.op-inline { display: inline; }
.op-hidden { display: none; }

/* Flex Direction */
.op-flex-row { flex-direction: row; }
.op-flex-col { flex-direction: column; }
.op-flex-row-reverse { flex-direction: row-reverse; }

/* Flex Wrap */
.op-flex-wrap { flex-wrap: wrap; }
.op-flex-nowrap { flex-wrap: nowrap; }

/* Align */
.op-items-start { align-items: flex-start; }
.op-items-center { align-items: center; }
.op-items-end { align-items: flex-end; }
.op-items-stretch { align-items: stretch; }
.op-items-baseline { align-items: baseline; }

/* Justify */
.op-justify-start { justify-content: flex-start; }
.op-justify-center { justify-content: center; }
.op-justify-end { justify-content: flex-end; }
.op-justify-between { justify-content: space-between; }
.op-justify-around { justify-content: space-around; }
.op-justify-evenly { justify-content: space-evenly; }

/* Flex Item */
.op-flex-1 { flex: 1; }
.op-flex-auto { flex: auto; }
.op-flex-none { flex: none; }
.op-flex-shrink-0 { flex-shrink: 0; }
.op-flex-grow { flex-grow: 1; }

/* Gap */
.op-gap-0 { gap: 0; }
.op-gap-1 { gap: var(--sp-1); }
.op-gap-2 { gap: var(--sp-2); }
.op-gap-3 { gap: var(--sp-3); }
.op-gap-4 { gap: var(--sp-4); }
.op-gap-5 { gap: var(--sp-5); }
.op-gap-6 { gap: var(--sp-6); }
.op-gap-8 { gap: var(--sp-8); }

/* Grid Columns */
.op-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.op-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.op-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.op-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.op-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.op-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.op-grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.op-grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ===== SPACING UTILITIES ===== */

/* Margin */
.op-m-0 { margin: 0; }
.op-m-auto { margin: auto; }
.op-mt-0 { margin-top: 0; } .op-mt-1 { margin-top: var(--sp-1); } .op-mt-2 { margin-top: var(--sp-2); } .op-mt-3 { margin-top: var(--sp-3); } .op-mt-4 { margin-top: var(--sp-4); } .op-mt-6 { margin-top: var(--sp-6); } .op-mt-8 { margin-top: var(--sp-8); }
.op-mb-0 { margin-bottom: 0; } .op-mb-1 { margin-bottom: var(--sp-1); } .op-mb-2 { margin-bottom: var(--sp-2); } .op-mb-3 { margin-bottom: var(--sp-3); } .op-mb-4 { margin-bottom: var(--sp-4); } .op-mb-6 { margin-bottom: var(--sp-6); } .op-mb-8 { margin-bottom: var(--sp-8); }
.op-ml-0 { margin-left: 0; } .op-ml-1 { margin-left: var(--sp-1); } .op-ml-2 { margin-left: var(--sp-2); } .op-ml-3 { margin-left: var(--sp-3); } .op-ml-4 { margin-left: var(--sp-4); } .op-ml-auto { margin-left: auto; }
.op-mr-0 { margin-right: 0; } .op-mr-1 { margin-right: var(--sp-1); } .op-mr-2 { margin-right: var(--sp-2); } .op-mr-3 { margin-right: var(--sp-3); } .op-mr-4 { margin-right: var(--sp-4); } .op-mr-auto { margin-right: auto; }
.op-mx-auto { margin-left: auto; margin-right: auto; }

/* Padding */
.op-p-0 { padding: 0; }
.op-p-1 { padding: var(--sp-1); } .op-p-2 { padding: var(--sp-2); } .op-p-3 { padding: var(--sp-3); } .op-p-4 { padding: var(--sp-4); } .op-p-5 { padding: var(--sp-5); } .op-p-6 { padding: var(--sp-6); } .op-p-8 { padding: var(--sp-8); }
.op-px-0 { padding-left: 0; padding-right: 0; }
.op-px-2 { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.op-px-3 { padding-left: var(--sp-3); padding-right: var(--sp-3); }
.op-px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.op-px-5 { padding-left: var(--sp-5); padding-right: var(--sp-5); }
.op-px-6 { padding-left: var(--sp-6); padding-right: var(--sp-6); }
.op-py-0 { padding-top: 0; padding-bottom: 0; }
.op-py-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.op-py-3 { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.op-py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.op-py-6 { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }

/* ===== SIZING UTILITIES ===== */
.op-w-full { width: 100%; }
.op-w-auto { width: auto; }
.op-h-full { height: 100%; }
.op-h-screen { height: 100vh; }
.op-min-h-0 { min-height: 0; }
.op-min-h-screen { min-height: 100vh; }
.op-max-w-sm { max-width: var(--container-sm); }
.op-max-w-md { max-width: var(--container-md); }
.op-max-w-lg { max-width: var(--container-lg); }
.op-max-w-xl { max-width: var(--container-xl); }
.op-max-w-full { max-width: 100%; }

/* ===== TYPOGRAPHY UTILITIES ===== */
.op-font-sans { font-family: var(--font); }
.op-font-display { font-family: var(--font-display); }
.op-text-2xs { font-size: var(--text-2xs); }
.op-text-xs { font-size: var(--text-xs); }
.op-text-sm { font-size: var(--text-sm); }
.op-text-base { font-size: var(--text-base); }
.op-text-md { font-size: var(--text-md); }
.op-text-lg { font-size: var(--text-lg); }
.op-text-xl { font-size: var(--text-xl); }
.op-text-2xl { font-size: var(--text-2xl); }
.op-text-3xl { font-size: var(--text-3xl); }
.op-text-4xl { font-size: var(--text-4xl); }

.op-font-light { font-weight: var(--fw-light); }
.op-font-normal { font-weight: var(--fw-regular); }
.op-font-medium { font-weight: var(--fw-medium); }
.op-font-semibold { font-weight: var(--fw-semibold); }
.op-font-bold { font-weight: var(--fw-bold); }
.op-font-extrabold { font-weight: var(--fw-extrabold); }

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

.op-leading-tight { line-height: var(--leading-tight); }
.op-leading-snug { line-height: var(--leading-snug); }
.op-leading-normal { line-height: var(--leading-normal); }
.op-leading-relaxed { line-height: var(--leading-relaxed); }

.op-tracking-tight { letter-spacing: var(--tracking-tight); }
.op-tracking-normal { letter-spacing: var(--tracking-normal); }
.op-tracking-wide { letter-spacing: var(--tracking-wide); }
.op-tracking-caps { letter-spacing: var(--tracking-caps); text-transform: uppercase; }

.op-uppercase { text-transform: uppercase; }
.op-lowercase { text-transform: lowercase; }
.op-capitalize { text-transform: capitalize; }
.op-normal-case { text-transform: none; }

.op-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.op-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.op-whitespace-nowrap { white-space: nowrap; }
.op-break-words { overflow-wrap: break-word; }

/* ===== COLOR UTILITIES ===== */
.op-text-primary { color: var(--text-primary); }
.op-text-secondary { color: var(--text-secondary); }
.op-text-muted { color: var(--text-muted); }
.op-text-inverse { color: var(--text-inverse); }
.op-text-brand { color: var(--brand-500); }
.op-text-accent { color: var(--accent-500); }
.op-text-success { color: var(--success); }
.op-text-warning { color: var(--warning); }
.op-text-danger { color: var(--danger); }
.op-text-info { color: var(--info); }

.op-bg-primary { background: var(--bg-primary); }
.op-bg-secondary { background: var(--bg-secondary); }
.op-bg-tertiary { background: var(--bg-tertiary); }
.op-bg-app { background: var(--bg-app); }

/* ===== BORDER UTILITIES ===== */
.op-border { border: 1px solid var(--border); }
.op-border-t { border-top: 1px solid var(--border); }
.op-border-b { border-bottom: 1px solid var(--border); }
.op-border-l { border-left: 1px solid var(--border); }
.op-border-r { border-right: 1px solid var(--border); }
.op-border-0 { border: 0; }
.op-border-light { border-color: var(--border-light); }

.op-rounded-none { border-radius: 0; }
.op-rounded-xs { border-radius: var(--r-xs); }
.op-rounded-sm { border-radius: var(--r-sm); }
.op-rounded-md { border-radius: var(--r-md); }
.op-rounded-lg { border-radius: var(--r-lg); }
.op-rounded-xl { border-radius: var(--r-xl); }
.op-rounded-2xl { border-radius: var(--r-2xl); }
.op-rounded-full { border-radius: var(--r-full); }

/* ===== SHADOW UTILITIES ===== */
.op-shadow-none { box-shadow: none; }
.op-shadow-xs { box-shadow: var(--shadow-xs); }
.op-shadow-sm { box-shadow: var(--shadow-sm); }
.op-shadow-md { box-shadow: var(--shadow-md); }
.op-shadow-lg { box-shadow: var(--shadow-lg); }
.op-shadow-xl { box-shadow: var(--shadow-xl); }

/* ===== POSITION UTILITIES ===== */
.op-relative { position: relative; }
.op-absolute { position: absolute; }
.op-fixed { position: fixed; }
.op-sticky { position: sticky; }
.op-inset-0 { inset: 0; }
.op-top-0 { top: 0; }
.op-right-0 { right: 0; }
.op-bottom-0 { bottom: 0; }
.op-left-0 { left: 0; }

/* ===== OVERFLOW UTILITIES ===== */
.op-overflow-hidden { overflow: hidden; }
.op-overflow-auto { overflow: auto; }
.op-overflow-x-auto { overflow-x: auto; }
.op-overflow-y-auto { overflow-y: auto; }
.op-overflow-visible { overflow: visible; }

/* ===== CURSOR & POINTER ===== */
.op-cursor-pointer { cursor: pointer; }
.op-cursor-default { cursor: default; }
.op-cursor-not-allowed { cursor: not-allowed; }
.op-pointer-events-none { pointer-events: none; }
.op-select-none { user-select: none; }
.op-select-all { user-select: all; }

/* ===== OPACITY ===== */
.op-opacity-0 { opacity: 0; }
.op-opacity-25 { opacity: 0.25; }
.op-opacity-50 { opacity: 0.5; }
.op-opacity-75 { opacity: 0.75; }
.op-opacity-100 { opacity: 1; }

/* ===== TRANSITION UTILITIES ===== */
.op-transition { transition: all var(--t-base) var(--ease-smooth); }
.op-transition-fast { transition: all var(--t-fast) var(--ease-smooth); }
.op-transition-slow { transition: all var(--t-slow) var(--ease-smooth); }
.op-transition-none { transition: none; }

/* ===== ANIMATION LIBRARY ===== */

/* Fade */
.op-anim-fade-in { animation: op-fade-in var(--t-enter) var(--ease-out) both; }
.op-anim-fade-out { animation: op-fade-out var(--t-exit) var(--ease-in) both; }
@keyframes op-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes op-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Slide Up */
.op-anim-slide-up { animation: op-slide-up var(--t-enter) var(--ease-out) both; }
.op-anim-slide-up-out { animation: op-slide-up-out var(--t-exit) var(--ease-in) both; }
@keyframes op-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes op-slide-up-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } }

/* Slide Down */
.op-anim-slide-down { animation: op-slide-down var(--t-enter) var(--ease-out) both; }
@keyframes op-slide-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }

/* Slide Right / Left */
.op-anim-slide-right { animation: op-slide-right var(--t-enter) var(--ease-out) both; }
.op-anim-slide-left { animation: op-slide-left var(--t-enter) var(--ease-out) both; }
@keyframes op-slide-right { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes op-slide-left { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* Scale In */
.op-anim-scale-in { animation: op-scale-in var(--t-enter) var(--ease-spring) both; }
@keyframes op-scale-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* Scale Out */
.op-anim-scale-out { animation: op-scale-out var(--t-exit) var(--ease-in) both; }
@keyframes op-scale-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }

/* Pop */
.op-anim-pop { animation: op-pop 0.35s var(--ease-spring) both; }
@keyframes op-pop { 0% { transform: scale(0.8); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }

/* Shake (error feedback) */
.op-anim-shake { animation: op-shake 0.4s ease both; }
@keyframes op-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Pulse */
.op-anim-pulse { animation: op-anim-pulse 2s ease-in-out infinite; }
@keyframes op-anim-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Spin */
.op-anim-spin { animation: op-spin 1s linear infinite; }

/* Bounce */
.op-anim-bounce { animation: op-bounce 0.5s var(--ease-spring) both; }
@keyframes op-bounce { 0% { transform: translateY(0); } 40% { transform: translateY(-12px); } 60% { transform: translateY(-4px); } 100% { transform: translateY(0); } }

/* Stagger support — use with animation-delay */
.op-stagger-1 { animation-delay: 50ms; }
.op-stagger-2 { animation-delay: 100ms; }
.op-stagger-3 { animation-delay: 150ms; }
.op-stagger-4 { animation-delay: 200ms; }
.op-stagger-5 { animation-delay: 250ms; }
.op-stagger-6 { animation-delay: 300ms; }
.op-stagger-7 { animation-delay: 350ms; }
.op-stagger-8 { animation-delay: 400ms; }

/* Duration overrides */
.op-duration-75 { animation-duration: 75ms; }
.op-duration-100 { animation-duration: 100ms; }
.op-duration-150 { animation-duration: 150ms; }
.op-duration-200 { animation-duration: 200ms; }
.op-duration-300 { animation-duration: 300ms; }
.op-duration-500 { animation-duration: 500ms; }
.op-duration-700 { animation-duration: 700ms; }
.op-duration-1000 { animation-duration: 1000ms; }

/* ===== RESPONSIVE UTILITIES ===== */
@media (max-width: 640px) {
  .op-sm\:hidden { display: none; }
  .op-sm\:flex-col { flex-direction: column; }
  .op-sm\:grid-cols-1 { grid-template-columns: 1fr; }
  .op-sm\:text-center { text-align: center; }
  .op-sm\:w-full { width: 100%; }
  .op-sm\:p-3 { padding: var(--sp-3); }
  .op-sm\:p-4 { padding: var(--sp-4); }
  .op-sm\:gap-2 { gap: var(--sp-2); }
  .op-sm\:gap-3 { gap: var(--sp-3); }
}

@media (max-width: 768px) {
  .op-md\:hidden { display: none; }
  .op-md\:flex { display: flex; }
  .op-md\:flex-col { flex-direction: column; }
  .op-md\:grid-cols-1 { grid-template-columns: 1fr; }
  .op-md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .op-md\:w-full { width: 100%; }
  .op-md\:p-4 { padding: var(--sp-4); }
  .op-md\:gap-3 { gap: var(--sp-3); }
}

@media (min-width: 1024px) {
  .op-lg\:flex { display: flex; }
  .op-lg\:hidden { display: none; }
  .op-lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .op-lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1280px) {
  .op-xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .op-xl\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
  .op-xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

/* ===== SCREEN-READER ONLY ===== */
.op-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;
}

/* ===== SCROLL SNAP (for carousels/kanban) ===== */
.op-snap-x { scroll-snap-type: x mandatory; overflow-x: auto; }
.op-snap-start { scroll-snap-align: start; }
.op-snap-center { scroll-snap-align: center; }

/* ===== ASPECT RATIO ===== */
.op-aspect-square { aspect-ratio: 1; }
.op-aspect-video { aspect-ratio: 16 / 9; }
.op-aspect-4-3 { aspect-ratio: 4 / 3; }