@getmicdrop/svelte-components 5.19.0 → 5.20.0

package/dist/tokens/utilities.css

@@ -1,353 +1,430 @@
-/**
- * Shared Utility Classes
- *
- * Generic CSS utility classes that can be shared across all Micdrop apps.
- * These utilities use only standard Tailwind classes - no app-specific CSS properties.
- *
- * Usage in app.css:
- *   @import '@getmicdrop/svelte-components/tokens/utilities';
- *
- * Categories:
- *   - Layout: flex-center, flex-between, flex-start, stack, row
- *   - Gap utilities: flex-row-gap-*, flex-col-gap-*, inline-flex-*
- *   - Typography: text-heading-*, text-label, text-muted, text-caption
- *   - Cards: card-base, card, card-elevated, card-compact
- *   - Borders: border-default, border-separator
- *   - Tables: table-row-base, table-row-clickable, table-row-selected
- *   - Badges: badge-base, badge-success, badge-error, badge-warning, badge-info
- *   - Form elements: input-base, btn-base
- *   - Dropdowns: dropdown-base, dropdown-item
- *   - Interactive: interactive-hover, interactive-press
- */
-
-@layer components {
-  /* ==========================================================================
-   * LAYOUT UTILITIES
-   * Common flex patterns for consistent layouts
-   * ========================================================================== */
-
-  /* Horizontal flex with centered items */
-  .flex-center {
-    @apply flex items-center justify-center;
-  }
-
-  /* Inline flex centered */
-  .inline-flex-center {
-    @apply inline-flex items-center justify-center;
-  }
-
-  /* Flex row with space between */
-  .flex-between {
-    @apply flex items-center justify-between;
-  }
-
-  /* Flex row with items at start */
-  .flex-start {
-    @apply flex items-center justify-start;
-  }
-
-  /* Vertical stack */
-  .stack {
-    @apply flex flex-col;
-  }
-
-  /* Horizontal row */
-  .row {
-    @apply flex flex-row items-center;
-  }
-
-  /* ==========================================================================
-   * GAP UTILITIES
-   * Flex containers with consistent gap spacing
-   * ========================================================================== */
-
-  /* Row gaps */
-  .flex-row-gap-xs {
-    @apply flex items-center gap-1;
-  }
-
-  .flex-row-gap-sm {
-    @apply flex items-center gap-2;
-  }
-
-  .flex-row-gap-md {
-    @apply flex items-center gap-3;
-  }
-
-  .flex-row-gap-lg {
-    @apply flex items-center gap-4;
-  }
-
-  .flex-row-gap-xl {
-    @apply flex items-center gap-6;
-  }
-
-  /* Column gaps */
-  .flex-col-gap-xs {
-    @apply flex flex-col gap-1;
-  }
-
-  .flex-col-gap-sm {
-    @apply flex flex-col gap-2;
-  }
-
-  .flex-col-gap-md {
-    @apply flex flex-col gap-4;
-  }
-
-  .flex-col-gap-lg {
-    @apply flex flex-col gap-6;
-  }
-
-  .flex-col-gap-xl {
-    @apply flex flex-col gap-8;
-  }
-
-  /* Inline flex with gaps */
-  .inline-flex-gap-xs {
-    @apply inline-flex items-center gap-1;
-  }
-
-  .inline-flex-gap-sm {
-    @apply inline-flex items-center gap-2;
-  }
-
-  .inline-flex-gap-md {
-    @apply inline-flex items-center gap-3;
-  }
-
-  /* ==========================================================================
-   * TYPOGRAPHY UTILITIES
-   * Consistent text styling using standard Tailwind colors
-   * ========================================================================== */
-
-  /* Page title - largest heading */
-  .text-heading-xl {
-    @apply text-2xl font-bold text-gray-900 dark:text-white;
-  }
-
-  /* Section heading */
-  .text-heading-lg {
-    @apply text-xl font-semibold text-gray-900 dark:text-white;
-  }
-
-  /* Card/subsection heading */
-  .text-heading-md {
-    @apply text-lg font-semibold text-gray-900 dark:text-white;
-  }
-
-  /* Small heading */
-  .text-heading-sm {
-    @apply text-base font-semibold text-gray-900 dark:text-white;
-  }
-
-  /* Form labels, table headers */
-  .text-label {
-    @apply text-sm font-medium text-gray-700 dark:text-gray-300;
-  }
-
-  /* Helper text, timestamps, metadata */
-  .text-muted {
-    @apply text-sm text-gray-500 dark:text-gray-400;
-  }
-
-  /* Very small helper text */
-  .text-caption {
-    @apply text-xs text-gray-500 dark:text-gray-400;
-  }
-
-  /* ==========================================================================
-   * CARD UTILITIES
-   * Consistent card styling with dark mode support
-   * ========================================================================== */
-
-  /* Base card - white bg, border, rounded corners */
-  .card-base {
-    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg;
-  }
-
-  /* Standard card with padding */
-  .card {
-    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4;
-  }
-
-  /* Elevated card with shadow */
-  .card-elevated {
-    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow;
-  }
-
-  /* Compact card with less padding */
-  .card-compact {
-    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3;
-  }
-
-  /* ==========================================================================
-   * BORDER UTILITIES
-   * Consistent border colors for dividers and containers
-   * ========================================================================== */
-
-  /* Standard border color */
-  .border-default {
-    @apply border-gray-200 dark:border-gray-700;
-  }
-
-  /* Divider/separator line */
-  .border-separator {
-    @apply border-t border-gray-200 dark:border-gray-700;
-  }
-
-  /* ==========================================================================
-   * TABLE UTILITIES
-   * Consistent table row styling
-   * ========================================================================== */
-
-  /* Base table row */
-  .table-row-base {
-    @apply border-b border-gray-200 dark:border-gray-700;
-  }
-
-  /* Clickable table row with hover */
-  .table-row-clickable {
-    @apply border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors;
-  }
-
-  /* Selected table row */
-  .table-row-selected {
-    @apply bg-blue-50 dark:bg-blue-900/20 border-b border-gray-200 dark:border-gray-700;
-  }
-
-  /* ==========================================================================
-   * BADGE UTILITIES
-   * Status badges with consistent styling
-   * ========================================================================== */
-
-  /* Base badge styling */
-  .badge-base {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
-  }
-
-  /* Success/green badge */
-  .badge-success {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
-  }
-
-  /* Error/red badge */
-  .badge-error {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
-  }
-
-  /* Warning/yellow badge */
-  .badge-warning {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
-  }
-
-  /* Info/blue badge */
-  .badge-info {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400;
-  }
-
-  /* Neutral/gray badge */
-  .badge-neutral {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300;
-  }
-
-  /* ==========================================================================
-   * FORM ELEMENT UTILITIES
-   * Base styling for inputs and buttons
-   * ========================================================================== */
-
-  /* Base input styling */
-  .input-base {
-    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent;
-  }
-
-  /* Base button styling */
-  .btn-base {
-    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
-  }
-
-  /* Primary button */
-  .btn-primary {
-    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
-  }
-
-  /* Secondary/outline button */
-  .btn-secondary {
-    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-gray-500;
-  }
-
-  /* ==========================================================================
-   * DROPDOWN UTILITIES
-   * Consistent dropdown menu styling
-   * ========================================================================== */
-
-  /* Dropdown container */
-  .dropdown-base {
-    @apply absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg;
-  }
-
-  /* Dropdown item */
-  .dropdown-item {
-    @apply px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer;
-  }
-
-  /* Dropdown item active/selected */
-  .dropdown-item-active {
-    @apply px-4 py-2 text-sm bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300;
-  }
-
-  /* ==========================================================================
-   * INTERACTIVE UTILITIES
-   * Hover and press states for interactive elements
-   * ========================================================================== */
-
-  /* Hover effect for clickable items */
-  .interactive-hover {
-    @apply hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors;
-  }
-
-  /* Press/active effect */
-  .interactive-press {
-    @apply active:bg-gray-100 dark:active:bg-gray-700;
-  }
-
-  /* Combined interactive states */
-  .interactive {
-    @apply hover:bg-gray-50 dark:hover:bg-gray-800 active:bg-gray-100 dark:active:bg-gray-700 transition-colors cursor-pointer;
-  }
-
-  /* ==========================================================================
-   * SCROLL UTILITIES
-   * Hide scrollbars while keeping scroll functionality
-   * ========================================================================== */
-
-  .no-scrollbar {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* ==========================================================================
-   * RESPONSIVE UTILITIES
-   * Hide/show elements at different breakpoints
-   * ========================================================================== */
-
-  .mobile-only {
-    @apply block md:hidden;
-  }
-
-  .desktop-only {
-    @apply hidden md:block;
-  }
-
-  .mobile-flex {
-    @apply flex md:hidden;
-  }
-
-  .desktop-flex {
-    @apply hidden md:flex;
-  }
-}
+/**
+ * Shared Utility Classes
+ *
+ * Generic CSS utility classes that can be shared across all Micdrop apps.
+ * These utilities use only standard Tailwind classes - no app-specific CSS properties.
+ *
+ * Usage in app.css:
+ *   @import '@getmicdrop/svelte-components/tokens/utilities';
+ *
+ * Categories:
+ *   - Layout: flex-center, flex-between, flex-start, stack, row
+ *   - Gap utilities: flex-row-gap-*, flex-col-gap-*, inline-flex-*
+ *   - Typography: text-heading-*, text-label, text-muted, text-caption
+ *   - Cards: card-base, card, card-elevated, card-compact
+ *   - Borders: border-default, border-separator
+ *   - Tables: table-row-base, table-row-clickable, table-row-selected
+ *   - Badges: badge-base, badge-success, badge-error, badge-warning, badge-info
+ *   - Form elements: input-base, btn-base
+ *   - Dropdowns: dropdown-base, dropdown-item
+ *   - Interactive: interactive-hover, interactive-press
+ */
+
+@layer components {
+  /* ==========================================================================
+   * LAYOUT UTILITIES
+   * Common flex patterns for consistent layouts
+   * ========================================================================== */
+
+  /* Flex row with vertically centered items (base for flex-center-* variants) */
+  .flex-center {
+    @apply flex items-center;
+  }
+
+  /* Inline flex centered */
+  .inline-flex-center {
+    @apply inline-flex items-center justify-center;
+  }
+
+  /* Flex row with space between */
+  .flex-between {
+    @apply flex items-center justify-between;
+  }
+
+  /* Flex row with items at start */
+  .flex-start {
+    @apply flex items-center justify-start;
+  }
+
+  /* Vertical stack */
+  .stack {
+    @apply flex flex-col;
+  }
+
+  /* Horizontal row */
+  .row {
+    @apply flex flex-row items-center;
+  }
+
+  /* ==========================================================================
+   * GAP UTILITIES
+   * Flex containers with consistent gap spacing
+   * ========================================================================== */
+
+  /* Row gaps */
+  .flex-row-gap-xs {
+    @apply flex items-center gap-1;
+  }
+
+  .flex-row-gap-sm {
+    @apply flex items-center gap-2;
+  }
+
+  .flex-row-gap-md {
+    @apply flex items-center gap-3;
+  }
+
+  .flex-row-gap-lg {
+    @apply flex items-center gap-4;
+  }
+
+  .flex-row-gap-xl {
+    @apply flex items-center gap-6;
+  }
+
+  /* Column gaps */
+  .flex-col-gap-xs {
+    @apply flex flex-col gap-1;
+  }
+
+  .flex-col-gap-sm {
+    @apply flex flex-col gap-2;
+  }
+
+  .flex-col-gap-md {
+    @apply flex flex-col gap-4;
+  }
+
+  .flex-col-gap-lg {
+    @apply flex flex-col gap-6;
+  }
+
+  .flex-col-gap-xl {
+    @apply flex flex-col gap-8;
+  }
+
+  /* Inline flex with gaps */
+  .inline-flex-gap-xs {
+    @apply inline-flex items-center gap-1;
+  }
+
+  .inline-flex-gap-sm {
+    @apply inline-flex items-center gap-2;
+  }
+
+  .inline-flex-gap-md {
+    @apply inline-flex items-center gap-3;
+  }
+
+  /* ==========================================================================
+   * TYPOGRAPHY UTILITIES
+   * Consistent text styling using standard Tailwind colors
+   * ========================================================================== */
+
+  /* Page title - largest heading */
+  .text-heading-xl {
+    @apply text-2xl font-bold text-gray-900 dark:text-white;
+  }
+
+  /* Section heading */
+  .text-heading-lg {
+    @apply text-xl font-semibold text-gray-900 dark:text-white;
+  }
+
+  /* Card/subsection heading */
+  .text-heading-md {
+    @apply text-lg font-semibold text-gray-900 dark:text-white;
+  }
+
+  /* Small heading */
+  .text-heading-sm {
+    @apply text-base font-semibold text-gray-900 dark:text-white;
+  }
+
+  /* Form labels, table headers */
+  .text-label {
+    @apply text-sm font-medium text-gray-700 dark:text-gray-300;
+  }
+
+  /* Helper text, timestamps, metadata */
+  .text-muted {
+    @apply text-sm text-gray-500 dark:text-gray-400;
+  }
+
+  /* Very small helper text */
+  .text-caption {
+    @apply text-xs text-gray-500 dark:text-gray-400;
+  }
+
+  /* ==========================================================================
+   * CARD UTILITIES
+   * Consistent card styling with dark mode support
+   * ========================================================================== */
+
+  /* Base card - white bg, border, rounded corners */
+  .card-base {
+    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg;
+  }
+
+  /* Standard card with padding */
+  .card {
+    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4;
+  }
+
+  /* Elevated card with shadow */
+  .card-elevated {
+    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow;
+  }
+
+  /* Compact card with less padding */
+  .card-compact {
+    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3;
+  }
+
+  /* ==========================================================================
+   * BORDER UTILITIES
+   * Consistent border colors for dividers and containers
+   * ========================================================================== */
+
+  /* Standard border color */
+  .border-default {
+    @apply border-gray-200 dark:border-gray-700;
+  }
+
+  /* Divider/separator line */
+  .border-separator {
+    @apply border-t border-gray-200 dark:border-gray-700;
+  }
+
+  /* ==========================================================================
+   * TABLE UTILITIES
+   * Consistent table row styling
+   * ========================================================================== */
+
+  /* Base table row */
+  .table-row-base {
+    @apply border-b border-gray-200 dark:border-gray-700;
+  }
+
+  /* Clickable table row with hover */
+  .table-row-clickable {
+    @apply border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors;
+  }
+
+  /* Selected table row */
+  .table-row-selected {
+    @apply bg-blue-50 dark:bg-blue-900/20 border-b border-gray-200 dark:border-gray-700;
+  }
+
+  /* ==========================================================================
+   * BADGE UTILITIES
+   * Status badges with consistent styling
+   * ========================================================================== */
+
+  /* Base badge styling */
+  .badge-base {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+
+  /* Success/green badge */
+  .badge-success {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
+  }
+
+  /* Error/red badge */
+  .badge-error {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
+  }
+
+  /* Warning/yellow badge */
+  .badge-warning {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
+  }
+
+  /* Info/blue badge */
+  .badge-info {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400;
+  }
+
+  /* Neutral/gray badge */
+  .badge-neutral {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300;
+  }
+
+  /* ==========================================================================
+   * FORM ELEMENT UTILITIES
+   * Base styling for inputs and buttons
+   * ========================================================================== */
+
+  /* Base input styling */
+  .input-base {
+    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent;
+  }
+
+  /* Base button styling */
+  .btn-base {
+    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  /* Primary button */
+  .btn-primary {
+    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
+  }
+
+  /* Secondary/outline button */
+  .btn-secondary {
+    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-gray-500;
+  }
+
+  /* ==========================================================================
+   * DROPDOWN UTILITIES
+   * Consistent dropdown menu styling
+   * ========================================================================== */
+
+  /* Dropdown container */
+  .dropdown-base {
+    @apply absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg;
+  }
+
+  /* Dropdown item */
+  .dropdown-item {
+    @apply px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer;
+  }
+
+  /* Dropdown item active/selected */
+  .dropdown-item-active {
+    @apply px-4 py-2 text-sm bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300;
+  }
+
+  /* ==========================================================================
+   * INTERACTIVE UTILITIES
+   * Hover and press states for interactive elements
+   * ========================================================================== */
+
+  /* Hover effect for clickable items */
+  .interactive-hover {
+    @apply hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors;
+  }
+
+  /* Press/active effect */
+  .interactive-press {
+    @apply active:bg-gray-100 dark:active:bg-gray-700;
+  }
+
+  /* Combined interactive states */
+  .interactive {
+    @apply hover:bg-gray-50 dark:hover:bg-gray-800 active:bg-gray-100 dark:active:bg-gray-700 transition-colors cursor-pointer;
+  }
+
+  /* ==========================================================================
+   * SCROLL UTILITIES
+   * Hide scrollbars while keeping scroll functionality
+   * ========================================================================== */
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* ==========================================================================
+   * RESPONSIVE UTILITIES
+   * Hide/show elements at different breakpoints
+   * ========================================================================== */
+
+  .mobile-only {
+    @apply block md:hidden;
+  }
+
+  .desktop-only {
+    @apply hidden md:block;
+  }
+
+  .mobile-flex {
+    @apply flex md:hidden;
+  }
+
+  .desktop-flex {
+    @apply hidden md:flex;
+  }
+
+  /* ==========================================================================
+   * ANIMATION UTILITIES
+   * Shared animations used across multiple Micdrop apps
+   * ========================================================================== */
+
+  /* Shake animation - used in verify-phone and login flows */
+  .shake {
+    animation: shake 0.625s linear;
+  }
+
+  /* Skeleton loading - shimmer effect for loading placeholders */
+  .skeleton-loading {
+    animation: skeleton-shimmer 2.5s ease-in-out infinite;
+    background: linear-gradient(
+      90deg,
+      #e5e7eb 0%,
+      #e5e7eb 40%,
+      #f3f4f6 50%,
+      #e5e7eb 60%,
+      #e5e7eb 100%
+    );
+    background-size: 200% 100%;
+  }
+
+  .dark .skeleton-loading {
+    background: linear-gradient(
+      90deg,
+      #374151 0%,
+      #374151 40%,
+      #4b5563 50%,
+      #374151 60%,
+      #374151 100%
+    );
+    background-size: 200% 100%;
+  }
+}
+
+/* Animation keyframes - placed outside @layer for browser compatibility */
+@keyframes shake {
+  8%,
+  41% {
+    transform: translateX(-10px);
+  }
+  25%,
+  58% {
+    transform: translateX(10px);
+  }
+  75% {
+    transform: translateX(-5px);
+  }
+  92% {
+    transform: translateX(5px);
+  }
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}