/**
 * DS-12: Inline Style Replacements
 * 
 * CSS rules to replace common inline style patterns with utility classes
 * This allows us to remove inline styles from HTML/JS without breaking functionality
 */

/* Common inline style patterns that can be replaced with utility classes */

/* Margin bottom patterns */
[style*="margin-bottom: var(--space-md)"] {
  margin-bottom: var(--space-md) !important;
}

[style*="margin-bottom: var(--space-lg)"] {
  margin-bottom: var(--space-lg) !important;
}

[style*="margin-bottom: var(--space-sm)"] {
  margin-bottom: var(--space-sm) !important;
}

[style*="margin-bottom: var(--space-xs)"] {
  margin-bottom: var(--space-xs) !important;
}

[style*="margin-top: var(--space-lg)"] {
  margin-top: var(--space-lg) !important;
}

[style*="margin-top: var(--space-md)"] {
  margin-top: var(--space-md) !important;
}

[style*="margin-top: var(--space-sm)"] {
  margin-top: var(--space-sm) !important;
}

[style*="margin-top: var(--space-xs)"] {
  margin-top: var(--space-xs) !important;
}

/* Padding patterns */
[style*="padding: var(--space-md)"] {
  padding: var(--space-md) !important;
}

[style*="padding: var(--space-lg)"] {
  padding: var(--space-lg) !important;
}

[style*="padding: var(--space-xl)"] {
  padding: var(--space-xl) !important;
}

[style*="padding-top: var(--space-lg)"] {
  padding-top: var(--space-lg) !important;
}

[style*="padding-top: var(--space-md)"] {
  padding-top: var(--space-md) !important;
}

[style*="padding-top: var(--space-sm)"] {
  padding-top: var(--space-sm) !important;
}

/* Border patterns */
[style*="border-top: 1px solid var(--border)"] {
  border-top: 1px solid var(--border) !important;
}

/* Display patterns */
[style*="display: none"] {
  display: none !important;
}

[style*="display: block"] {
  display: block !important;
}

[style*="display: flex"] {
  display: flex !important;
}

[style*="text-align: center"] {
  text-align: center !important;
}

/* Font size patterns */
[style*="font-size: var(--type-body-size)"] {
  font-size: var(--type-body-size) !important;
}

[style*="font-size: var(--type-micro-size)"] {
  font-size: var(--type-micro-size) !important;
}

[style*="font-weight: 600"] {
  font-weight: 600 !important;
}

[style*="font-weight: 500"] {
  font-weight: 500 !important;
}

/* Width patterns */
[style*="width: 100%"] {
  width: 100% !important;
}

/* Note: This file provides CSS overrides for common inline styles.
 * The goal is to eventually remove inline styles from HTML/JS,
 * but this provides a safety net during migration.
 */