/**
 * DS Agency Utility Framework
 * Tailwind-inspired utility classes for rapid development
 *
 * @package Developer_Starter_BD_Child
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Spacing Scale */
    --ds-space-0: 0;
    --ds-space-1: 0.25rem;    /* 4px */
    --ds-space-2: 0.5rem;     /* 8px */
    --ds-space-3: 0.75rem;    /* 12px */
    --ds-space-4: 1rem;       /* 16px */
    --ds-space-5: 1.25rem;    /* 20px */
    --ds-space-6: 1.5rem;     /* 24px */
    --ds-space-8: 2rem;       /* 32px */
    --ds-space-10: 2.5rem;    /* 40px */
    --ds-space-12: 3rem;      /* 48px */
    --ds-space-16: 4rem;      /* 64px */
    --ds-space-20: 5rem;      /* 80px */
    --ds-space-24: 6rem;      /* 96px */
    --ds-space-32: 8rem;      /* 128px */

    /* Typography Scale */
    --ds-text-xs: 0.75rem;    /* 12px */
    --ds-text-sm: 0.875rem;   /* 14px */
    --ds-text-base: 1rem;     /* 16px */
    --ds-text-lg: 1.125rem;   /* 18px */
    --ds-text-xl: 1.25rem;    /* 20px */
    --ds-text-2xl: 1.5rem;    /* 24px */
    --ds-text-3xl: 1.875rem;  /* 30px */
    --ds-text-4xl: 2.25rem;   /* 36px */
    --ds-text-5xl: 3rem;      /* 48px */
    --ds-text-6xl: 3.75rem;   /* 60px */

    /* Font Weights */
    --ds-font-light: 300;
    --ds-font-normal: 400;
    --ds-font-medium: 500;
    --ds-font-semibold: 600;
    --ds-font-bold: 700;
    --ds-font-extrabold: 800;

    /* Line Heights */
    --ds-leading-none: 1;
    --ds-leading-tight: 1.25;
    --ds-leading-snug: 1.375;
    --ds-leading-normal: 1.5;
    --ds-leading-relaxed: 1.625;
    --ds-leading-loose: 2;

    /* Border Radius */
    --ds-rounded-none: 0;
    --ds-rounded-sm: 0.125rem;
    --ds-rounded: 0.25rem;
    --ds-rounded-md: 0.375rem;
    --ds-rounded-lg: 0.5rem;
    --ds-rounded-xl: 0.75rem;
    --ds-rounded-2xl: 1rem;
    --ds-rounded-3xl: 1.5rem;
    --ds-rounded-full: 9999px;

    /* Shadows */
    --ds-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --ds-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --ds-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --ds-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --ds-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --ds-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* Transitions */
    --ds-transition-fast: 150ms ease;
    --ds-transition: 200ms ease;
    --ds-transition-slow: 300ms ease;
    --ds-transition-slower: 500ms ease;

    /* Z-Index Scale */
    --ds-z-0: 0;
    --ds-z-10: 10;
    --ds-z-20: 20;
    --ds-z-30: 30;
    --ds-z-40: 40;
    --ds-z-50: 50;
    --ds-z-sticky: 100;
    --ds-z-modal: 1000;
    --ds-z-popover: 1100;
    --ds-z-tooltip: 1200;

    /* Semantic Colors (integrate with Breakdance globals) */
    --ds-color-primary: var(--bde-brand-primary-color, #667eea);
    --ds-color-primary-light: #818cf8;
    --ds-color-primary-dark: #4f46e5;
    --ds-color-secondary: var(--bde-brand-secondary-color, #764ba2);
    --ds-color-success: #10b981;
    --ds-color-warning: #f59e0b;
    --ds-color-error: #ef4444;
    --ds-color-info: #3b82f6;

    /* Neutral Colors */
    --ds-gray-50: #f9fafb;
    --ds-gray-100: #f3f4f6;
    --ds-gray-200: #e5e7eb;
    --ds-gray-300: #d1d5db;
    --ds-gray-400: #9ca3af;
    --ds-gray-500: #6b7280;
    --ds-gray-600: #4b5563;
    --ds-gray-700: #374151;
    --ds-gray-800: #1f2937;
    --ds-gray-900: #111827;
}

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */

/* Margin */
.ds-m-0 { margin: var(--ds-space-0) !important; }
.ds-m-1 { margin: var(--ds-space-1) !important; }
.ds-m-2 { margin: var(--ds-space-2) !important; }
.ds-m-3 { margin: var(--ds-space-3) !important; }
.ds-m-4 { margin: var(--ds-space-4) !important; }
.ds-m-5 { margin: var(--ds-space-5) !important; }
.ds-m-6 { margin: var(--ds-space-6) !important; }
.ds-m-8 { margin: var(--ds-space-8) !important; }
.ds-m-10 { margin: var(--ds-space-10) !important; }
.ds-m-12 { margin: var(--ds-space-12) !important; }
.ds-m-16 { margin: var(--ds-space-16) !important; }
.ds-m-auto { margin: auto !important; }

/* Margin Top */
.ds-mt-0 { margin-top: var(--ds-space-0) !important; }
.ds-mt-1 { margin-top: var(--ds-space-1) !important; }
.ds-mt-2 { margin-top: var(--ds-space-2) !important; }
.ds-mt-3 { margin-top: var(--ds-space-3) !important; }
.ds-mt-4 { margin-top: var(--ds-space-4) !important; }
.ds-mt-5 { margin-top: var(--ds-space-5) !important; }
.ds-mt-6 { margin-top: var(--ds-space-6) !important; }
.ds-mt-8 { margin-top: var(--ds-space-8) !important; }
.ds-mt-10 { margin-top: var(--ds-space-10) !important; }
.ds-mt-12 { margin-top: var(--ds-space-12) !important; }
.ds-mt-16 { margin-top: var(--ds-space-16) !important; }
.ds-mt-20 { margin-top: var(--ds-space-20) !important; }
.ds-mt-24 { margin-top: var(--ds-space-24) !important; }

/* Margin Bottom */
.ds-mb-0 { margin-bottom: var(--ds-space-0) !important; }
.ds-mb-1 { margin-bottom: var(--ds-space-1) !important; }
.ds-mb-2 { margin-bottom: var(--ds-space-2) !important; }
.ds-mb-3 { margin-bottom: var(--ds-space-3) !important; }
.ds-mb-4 { margin-bottom: var(--ds-space-4) !important; }
.ds-mb-5 { margin-bottom: var(--ds-space-5) !important; }
.ds-mb-6 { margin-bottom: var(--ds-space-6) !important; }
.ds-mb-8 { margin-bottom: var(--ds-space-8) !important; }
.ds-mb-10 { margin-bottom: var(--ds-space-10) !important; }
.ds-mb-12 { margin-bottom: var(--ds-space-12) !important; }
.ds-mb-16 { margin-bottom: var(--ds-space-16) !important; }
.ds-mb-20 { margin-bottom: var(--ds-space-20) !important; }
.ds-mb-24 { margin-bottom: var(--ds-space-24) !important; }

/* Margin X/Y */
.ds-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ds-my-0 { margin-top: var(--ds-space-0) !important; margin-bottom: var(--ds-space-0) !important; }
.ds-my-4 { margin-top: var(--ds-space-4) !important; margin-bottom: var(--ds-space-4) !important; }
.ds-my-8 { margin-top: var(--ds-space-8) !important; margin-bottom: var(--ds-space-8) !important; }
.ds-my-12 { margin-top: var(--ds-space-12) !important; margin-bottom: var(--ds-space-12) !important; }

/* Padding */
.ds-p-0 { padding: var(--ds-space-0) !important; }
.ds-p-1 { padding: var(--ds-space-1) !important; }
.ds-p-2 { padding: var(--ds-space-2) !important; }
.ds-p-3 { padding: var(--ds-space-3) !important; }
.ds-p-4 { padding: var(--ds-space-4) !important; }
.ds-p-5 { padding: var(--ds-space-5) !important; }
.ds-p-6 { padding: var(--ds-space-6) !important; }
.ds-p-8 { padding: var(--ds-space-8) !important; }
.ds-p-10 { padding: var(--ds-space-10) !important; }
.ds-p-12 { padding: var(--ds-space-12) !important; }
.ds-p-16 { padding: var(--ds-space-16) !important; }

/* Padding X/Y */
.ds-px-0 { padding-left: var(--ds-space-0) !important; padding-right: var(--ds-space-0) !important; }
.ds-px-4 { padding-left: var(--ds-space-4) !important; padding-right: var(--ds-space-4) !important; }
.ds-px-6 { padding-left: var(--ds-space-6) !important; padding-right: var(--ds-space-6) !important; }
.ds-px-8 { padding-left: var(--ds-space-8) !important; padding-right: var(--ds-space-8) !important; }
.ds-py-0 { padding-top: var(--ds-space-0) !important; padding-bottom: var(--ds-space-0) !important; }
.ds-py-4 { padding-top: var(--ds-space-4) !important; padding-bottom: var(--ds-space-4) !important; }
.ds-py-6 { padding-top: var(--ds-space-6) !important; padding-bottom: var(--ds-space-6) !important; }
.ds-py-8 { padding-top: var(--ds-space-8) !important; padding-bottom: var(--ds-space-8) !important; }
.ds-py-12 { padding-top: var(--ds-space-12) !important; padding-bottom: var(--ds-space-12) !important; }
.ds-py-16 { padding-top: var(--ds-space-16) !important; padding-bottom: var(--ds-space-16) !important; }
.ds-py-20 { padding-top: var(--ds-space-20) !important; padding-bottom: var(--ds-space-20) !important; }

/* Gap */
.ds-gap-1 { gap: var(--ds-space-1) !important; }
.ds-gap-2 { gap: var(--ds-space-2) !important; }
.ds-gap-3 { gap: var(--ds-space-3) !important; }
.ds-gap-4 { gap: var(--ds-space-4) !important; }
.ds-gap-5 { gap: var(--ds-space-5) !important; }
.ds-gap-6 { gap: var(--ds-space-6) !important; }
.ds-gap-8 { gap: var(--ds-space-8) !important; }
.ds-gap-10 { gap: var(--ds-space-10) !important; }
.ds-gap-12 { gap: var(--ds-space-12) !important; }

/* ==========================================================================
   Typography Utilities
   ========================================================================== */

/* Font Size */
.ds-text-xs { font-size: var(--ds-text-xs) !important; }
.ds-text-sm { font-size: var(--ds-text-sm) !important; }
.ds-text-base { font-size: var(--ds-text-base) !important; }
.ds-text-lg { font-size: var(--ds-text-lg) !important; }
.ds-text-xl { font-size: var(--ds-text-xl) !important; }
.ds-text-2xl { font-size: var(--ds-text-2xl) !important; }
.ds-text-3xl { font-size: var(--ds-text-3xl) !important; }
.ds-text-4xl { font-size: var(--ds-text-4xl) !important; }
.ds-text-5xl { font-size: var(--ds-text-5xl) !important; }
.ds-text-6xl { font-size: var(--ds-text-6xl) !important; }

/* Font Weight */
.ds-font-light { font-weight: var(--ds-font-light) !important; }
.ds-font-normal { font-weight: var(--ds-font-normal) !important; }
.ds-font-medium { font-weight: var(--ds-font-medium) !important; }
.ds-font-semibold { font-weight: var(--ds-font-semibold) !important; }
.ds-font-bold { font-weight: var(--ds-font-bold) !important; }
.ds-font-extrabold { font-weight: var(--ds-font-extrabold) !important; }

/* Text Alignment */
.ds-text-left { text-align: left !important; }
.ds-text-center { text-align: center !important; }
.ds-text-right { text-align: right !important; }
.ds-text-justify { text-align: justify !important; }

/* Text Transform */
.ds-uppercase { text-transform: uppercase !important; }
.ds-lowercase { text-transform: lowercase !important; }
.ds-capitalize { text-transform: capitalize !important; }
.ds-normal-case { text-transform: none !important; }

/* Letter Spacing */
.ds-tracking-tight { letter-spacing: -0.025em !important; }
.ds-tracking-normal { letter-spacing: 0 !important; }
.ds-tracking-wide { letter-spacing: 0.025em !important; }
.ds-tracking-wider { letter-spacing: 0.05em !important; }
.ds-tracking-widest { letter-spacing: 0.1em !important; }

/* Line Height */
.ds-leading-none { line-height: var(--ds-leading-none) !important; }
.ds-leading-tight { line-height: var(--ds-leading-tight) !important; }
.ds-leading-snug { line-height: var(--ds-leading-snug) !important; }
.ds-leading-normal { line-height: var(--ds-leading-normal) !important; }
.ds-leading-relaxed { line-height: var(--ds-leading-relaxed) !important; }
.ds-leading-loose { line-height: var(--ds-leading-loose) !important; }

/* ==========================================================================
   Color Utilities
   ========================================================================== */

/* Text Colors */
.ds-text-primary { color: var(--ds-color-primary) !important; }
.ds-text-secondary { color: var(--ds-color-secondary) !important; }
.ds-text-success { color: var(--ds-color-success) !important; }
.ds-text-warning { color: var(--ds-color-warning) !important; }
.ds-text-error { color: var(--ds-color-error) !important; }
.ds-text-white { color: #fff !important; }
.ds-text-black { color: #000 !important; }
.ds-text-gray-400 { color: var(--ds-gray-400) !important; }
.ds-text-gray-500 { color: var(--ds-gray-500) !important; }
.ds-text-gray-600 { color: var(--ds-gray-600) !important; }
.ds-text-gray-700 { color: var(--ds-gray-700) !important; }
.ds-text-gray-800 { color: var(--ds-gray-800) !important; }
.ds-text-gray-900 { color: var(--ds-gray-900) !important; }

/* Background Colors */
.ds-bg-primary { background-color: var(--ds-color-primary) !important; }
.ds-bg-secondary { background-color: var(--ds-color-secondary) !important; }
.ds-bg-success { background-color: var(--ds-color-success) !important; }
.ds-bg-warning { background-color: var(--ds-color-warning) !important; }
.ds-bg-error { background-color: var(--ds-color-error) !important; }
.ds-bg-white { background-color: #fff !important; }
.ds-bg-black { background-color: #000 !important; }
.ds-bg-gray-50 { background-color: var(--ds-gray-50) !important; }
.ds-bg-gray-100 { background-color: var(--ds-gray-100) !important; }
.ds-bg-gray-200 { background-color: var(--ds-gray-200) !important; }
.ds-bg-gray-800 { background-color: var(--ds-gray-800) !important; }
.ds-bg-gray-900 { background-color: var(--ds-gray-900) !important; }
.ds-bg-transparent { background-color: transparent !important; }

/* Gradient Backgrounds */
.ds-bg-gradient-primary {
    background: linear-gradient(135deg, var(--ds-color-primary) 0%, var(--ds-color-secondary) 100%) !important;
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

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

/* Flexbox */
.ds-flex-row { flex-direction: row !important; }
.ds-flex-col { flex-direction: column !important; }
.ds-flex-row-reverse { flex-direction: row-reverse !important; }
.ds-flex-col-reverse { flex-direction: column-reverse !important; }
.ds-flex-wrap { flex-wrap: wrap !important; }
.ds-flex-nowrap { flex-wrap: nowrap !important; }
.ds-flex-1 { flex: 1 1 0% !important; }
.ds-flex-auto { flex: 1 1 auto !important; }
.ds-flex-none { flex: none !important; }

/* Justify Content */
.ds-justify-start { justify-content: flex-start !important; }
.ds-justify-center { justify-content: center !important; }
.ds-justify-end { justify-content: flex-end !important; }
.ds-justify-between { justify-content: space-between !important; }
.ds-justify-around { justify-content: space-around !important; }
.ds-justify-evenly { justify-content: space-evenly !important; }

/* Align Items */
.ds-items-start { align-items: flex-start !important; }
.ds-items-center { align-items: center !important; }
.ds-items-end { align-items: flex-end !important; }
.ds-items-stretch { align-items: stretch !important; }
.ds-items-baseline { align-items: baseline !important; }

/* Grid */
.ds-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.ds-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.ds-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.ds-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.ds-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.ds-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

/* Width */
.ds-w-full { width: 100% !important; }
.ds-w-auto { width: auto !important; }
.ds-w-screen { width: 100vw !important; }
.ds-max-w-xs { max-width: 20rem !important; }
.ds-max-w-sm { max-width: 24rem !important; }
.ds-max-w-md { max-width: 28rem !important; }
.ds-max-w-lg { max-width: 32rem !important; }
.ds-max-w-xl { max-width: 36rem !important; }
.ds-max-w-2xl { max-width: 42rem !important; }
.ds-max-w-3xl { max-width: 48rem !important; }
.ds-max-w-4xl { max-width: 56rem !important; }
.ds-max-w-5xl { max-width: 64rem !important; }
.ds-max-w-6xl { max-width: 72rem !important; }
.ds-max-w-7xl { max-width: 80rem !important; }
.ds-max-w-prose { max-width: 65ch !important; }
.ds-max-w-full { max-width: 100% !important; }

/* Height */
.ds-h-full { height: 100% !important; }
.ds-h-screen { height: 100vh !important; }
.ds-h-auto { height: auto !important; }
.ds-min-h-screen { min-height: 100vh !important; }

/* ==========================================================================
   Effects Utilities
   ========================================================================== */

/* Border Radius */
.ds-rounded-none { border-radius: var(--ds-rounded-none) !important; }
.ds-rounded-sm { border-radius: var(--ds-rounded-sm) !important; }
.ds-rounded { border-radius: var(--ds-rounded) !important; }
.ds-rounded-md { border-radius: var(--ds-rounded-md) !important; }
.ds-rounded-lg { border-radius: var(--ds-rounded-lg) !important; }
.ds-rounded-xl { border-radius: var(--ds-rounded-xl) !important; }
.ds-rounded-2xl { border-radius: var(--ds-rounded-2xl) !important; }
.ds-rounded-3xl { border-radius: var(--ds-rounded-3xl) !important; }
.ds-rounded-full { border-radius: var(--ds-rounded-full) !important; }

/* Shadows */
.ds-shadow-none { box-shadow: none !important; }
.ds-shadow-sm { box-shadow: var(--ds-shadow-sm) !important; }
.ds-shadow { box-shadow: var(--ds-shadow) !important; }
.ds-shadow-md { box-shadow: var(--ds-shadow-md) !important; }
.ds-shadow-lg { box-shadow: var(--ds-shadow-lg) !important; }
.ds-shadow-xl { box-shadow: var(--ds-shadow-xl) !important; }
.ds-shadow-2xl { box-shadow: var(--ds-shadow-2xl) !important; }

/* Opacity */
.ds-opacity-0 { opacity: 0 !important; }
.ds-opacity-25 { opacity: 0.25 !important; }
.ds-opacity-50 { opacity: 0.5 !important; }
.ds-opacity-75 { opacity: 0.75 !important; }
.ds-opacity-100 { opacity: 1 !important; }

/* Transitions */
.ds-transition { transition: all var(--ds-transition) !important; }
.ds-transition-fast { transition: all var(--ds-transition-fast) !important; }
.ds-transition-slow { transition: all var(--ds-transition-slow) !important; }
.ds-transition-none { transition: none !important; }

/* Overflow */
.ds-overflow-hidden { overflow: hidden !important; }
.ds-overflow-auto { overflow: auto !important; }
.ds-overflow-visible { overflow: visible !important; }

/* ==========================================================================
   Responsive Utilities (Breakdance Breakpoints)
   ========================================================================== */

/* Tablet Landscape (max-width: 1119px) */
@media (max-width: 1119px) {
    .ds-tablet-hidden { display: none !important; }
    .ds-tablet-block { display: block !important; }
    .ds-tablet-flex { display: flex !important; }
    .ds-tablet-grid { display: grid !important; }
    .ds-tablet-text-center { text-align: center !important; }
    .ds-tablet-text-left { text-align: left !important; }
    .ds-tablet-flex-col { flex-direction: column !important; }
    .ds-tablet-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ds-tablet-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
}

/* Tablet Portrait (max-width: 991px) */
@media (max-width: 991px) {
    .ds-tablet-portrait-hidden { display: none !important; }
    .ds-tablet-portrait-block { display: block !important; }
    .ds-tablet-portrait-flex { display: flex !important; }
    .ds-tablet-portrait-flex-col { flex-direction: column !important; }
    .ds-tablet-portrait-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ds-tablet-portrait-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
}

/* Phone Landscape (max-width: 767px) */
@media (max-width: 767px) {
    .ds-mobile-hidden { display: none !important; }
    .ds-mobile-block { display: block !important; }
    .ds-mobile-flex { display: flex !important; }
    .ds-mobile-grid { display: grid !important; }
    .ds-mobile-text-center { text-align: center !important; }
    .ds-mobile-text-left { text-align: left !important; }
    .ds-mobile-flex-col { flex-direction: column !important; }
    .ds-mobile-w-full { width: 100% !important; }
    .ds-mobile-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .ds-mobile-py-8 { padding-top: var(--ds-space-8) !important; padding-bottom: var(--ds-space-8) !important; }
    .ds-mobile-py-12 { padding-top: var(--ds-space-12) !important; padding-bottom: var(--ds-space-12) !important; }
}

/* Phone Portrait (max-width: 479px) */
@media (max-width: 479px) {
    .ds-phone-hidden { display: none !important; }
    .ds-phone-block { display: block !important; }
    .ds-phone-text-sm { font-size: var(--ds-text-sm) !important; }
    .ds-phone-text-base { font-size: var(--ds-text-base) !important; }
}

/* ==========================================================================
   Animation Utilities
   ========================================================================== */

/* Keyframe Animations */
@keyframes ds-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes ds-slideDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ds-slideLeft {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes ds-slideRight {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes ds-scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes ds-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ds-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Animation Classes */
.ds-animate-fade-in { animation: ds-fadeIn 0.5s ease forwards; }
.ds-animate-slide-up { animation: ds-slideUp 0.5s ease forwards; }
.ds-animate-slide-down { animation: ds-slideDown 0.5s ease forwards; }
.ds-animate-slide-left { animation: ds-slideLeft 0.5s ease forwards; }
.ds-animate-slide-right { animation: ds-slideRight 0.5s ease forwards; }
.ds-animate-scale-in { animation: ds-scaleIn 0.3s ease forwards; }
.ds-animate-spin { animation: ds-spin 1s linear infinite; }
.ds-animate-pulse { animation: ds-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Hover Effects */
.ds-hover-lift {
    transition: transform var(--ds-transition), box-shadow var(--ds-transition);
}
.ds-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--ds-shadow-lg);
}

.ds-hover-scale {
    transition: transform var(--ds-transition);
}
.ds-hover-scale:hover {
    transform: scale(1.02);
}

.ds-hover-opacity {
    transition: opacity var(--ds-transition);
}
.ds-hover-opacity:hover {
    opacity: 0.8;
}

.ds-hover-grow {
    transition: transform var(--ds-transition);
}
.ds-hover-grow:hover {
    transform: scale(1.05);
}

/* Scroll-triggered Animation (use with IntersectionObserver) */
.ds-animate-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.ds-animate-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Animation Delays */
.ds-animate-in:nth-child(1) { transition-delay: 0s; }
.ds-animate-in:nth-child(2) { transition-delay: 0.1s; }
.ds-animate-in:nth-child(3) { transition-delay: 0.2s; }
.ds-animate-in:nth-child(4) { transition-delay: 0.3s; }
.ds-animate-in:nth-child(5) { transition-delay: 0.4s; }
.ds-animate-in:nth-child(6) { transition-delay: 0.5s; }
.ds-animate-in:nth-child(7) { transition-delay: 0.6s; }
.ds-animate-in:nth-child(8) { transition-delay: 0.7s; }

/* ==========================================================================
   Miscellaneous Utilities
   ========================================================================== */

/* Cursor */
.ds-cursor-pointer { cursor: pointer !important; }
.ds-cursor-default { cursor: default !important; }
.ds-cursor-not-allowed { cursor: not-allowed !important; }

/* Pointer Events */
.ds-pointer-events-none { pointer-events: none !important; }
.ds-pointer-events-auto { pointer-events: auto !important; }

/* User Select */
.ds-select-none { user-select: none !important; }
.ds-select-text { user-select: text !important; }
.ds-select-all { user-select: all !important; }

/* SR Only (Screen Reader) */
.ds-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Position */
.ds-relative { position: relative !important; }
.ds-absolute { position: absolute !important; }
.ds-fixed { position: fixed !important; }
.ds-sticky { position: sticky !important; }

/* Inset */
.ds-inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.ds-top-0 { top: 0 !important; }
.ds-right-0 { right: 0 !important; }
.ds-bottom-0 { bottom: 0 !important; }
.ds-left-0 { left: 0 !important; }

/* Object Fit */
.ds-object-cover { object-fit: cover !important; }
.ds-object-contain { object-fit: contain !important; }
.ds-object-fill { object-fit: fill !important; }

/* Aspect Ratio */
.ds-aspect-square { aspect-ratio: 1 / 1 !important; }
.ds-aspect-video { aspect-ratio: 16 / 9 !important; }
.ds-aspect-4-3 { aspect-ratio: 4 / 3 !important; }

/* List Style */
.ds-list-none { list-style: none !important; }
.ds-list-disc { list-style-type: disc !important; }
.ds-list-decimal { list-style-type: decimal !important; }

/* Text Decoration */
.ds-underline { text-decoration: underline !important; }
.ds-no-underline { text-decoration: none !important; }
.ds-line-through { text-decoration: line-through !important; }

/* Whitespace */
.ds-whitespace-normal { white-space: normal !important; }
.ds-whitespace-nowrap { white-space: nowrap !important; }
.ds-whitespace-pre { white-space: pre !important; }
.ds-whitespace-pre-wrap { white-space: pre-wrap !important; }

/* Text Overflow */
.ds-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.ds-line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.ds-line-clamp-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Border */
.ds-border { border: 1px solid var(--ds-gray-200) !important; }
.ds-border-0 { border: 0 !important; }
.ds-border-t { border-top: 1px solid var(--ds-gray-200) !important; }
.ds-border-b { border-bottom: 1px solid var(--ds-gray-200) !important; }
.ds-border-primary { border-color: var(--ds-color-primary) !important; }
.ds-border-gray-200 { border-color: var(--ds-gray-200) !important; }
.ds-border-gray-300 { border-color: var(--ds-gray-300) !important; }

/* Z-Index */
.ds-z-0 { z-index: var(--ds-z-0) !important; }
.ds-z-10 { z-index: var(--ds-z-10) !important; }
.ds-z-20 { z-index: var(--ds-z-20) !important; }
.ds-z-30 { z-index: var(--ds-z-30) !important; }
.ds-z-40 { z-index: var(--ds-z-40) !important; }
.ds-z-50 { z-index: var(--ds-z-50) !important; }