/* CSS Validator - Tap Macro v1.3.0 */
/* Validation rules and conflict prevention */

/* ===== VALIDATION RULES ===== */

/* Prevent duplicate CSS custom properties */
:root {
  /* This should be the ONLY :root declaration in the entire application */
  /* All other CSS files should use [data-theme='theme'] selectors */
}

/* ===== CONFLICT PREVENTION ===== */

/* Ensure theme selectors are consistent */
[data-theme] {
  /* All theme-specific styles must use this selector pattern */
}

/* Prevent conflicting button styles */
.btn {
  /* Base button styles - should not be overridden without !important */
  position: relative;
  z-index: 1;
}

/* Prevent conflicting form styles */
input,
select,
textarea {
  /* Base form styles - should not be overridden without !important */
  position: relative;
  z-index: 1;
}

/* ===== ACCESSIBILITY VALIDATION ===== */

/* Ensure focus states are visible */
*:focus {
  /* Focus states must be visible for accessibility */
  outline: 2px solid var(--accent-color) !important;
  outline-offset: 2px !important;
}

/* Ensure color contrast meets WCAG standards */
[data-theme='light'] {
  /* Light theme must have sufficient contrast */
  --text-primary: #2d3748; /* Dark enough for light backgrounds */
  --text-secondary: #4a5568; /* Sufficient contrast */
}

[data-theme='dark'] {
  /* Dark theme must have sufficient contrast */
  --text-primary: #f8fafc; /* Light enough for dark backgrounds */
  --text-secondary: #cbd5e1; /* Sufficient contrast */
}

/* ===== PERFORMANCE VALIDATION ===== */

/* Prevent expensive CSS properties */
* {
  /* Avoid expensive properties in animations */
  /* will-change: auto; */
  /* transform: translateZ(0); */
}

/* ===== RESPONSIVE VALIDATION ===== */

/* Ensure mobile-first approach */
@media (max-width: 768px) {
  /* Mobile styles should be defined here */
}

@media (min-width: 769px) {
  /* Desktop styles should be defined here */
}

/* ===== THEME SWITCHING VALIDATION ===== */

/* Ensure smooth theme transitions */
body {
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* ===== CSS ARCHITECTURE VALIDATION ===== */

/* Prevent deep nesting (max 3 levels) */
.calculator-mode .input-section .form-group {
  /* Maximum nesting level reached */
}

/* Prevent overly specific selectors */
#modeContainer
  .calculator-mode
  .input-section
  .form-group
  input[type='number'] {
  /* Too specific - use classes instead */
}

/* ===== IMPORT ORDER VALIDATION ===== */
/* 
  CSS import order should be:
  1. themes.css (CSS custom properties)
  2. css/base/ (reset, typography, base)
  3. css/components/ (component styles)
  4. css/utilities/ (utility classes)
  5. Main styles.css (overrides and specific styles)
*/

/* ===== DEBUGGING HELPERS ===== */

/* Uncomment to debug CSS conflicts */
/*
.debug-css * {
  outline: 1px solid red !important;
}

.debug-css [data-theme] {
  outline: 2px solid blue !important;
}

.debug-css .btn {
  outline: 2px solid green !important;
}
*/

/* ===== CSS LINTING RULES ===== */

/* 
  CSS Linting Rules:
  1. Use kebab-case for class names
  2. Use semantic class names
  3. Avoid !important unless necessary
  4. Use CSS custom properties for values
  5. Keep selectors shallow (max 3 levels)
  6. Use consistent spacing and formatting
  7. Group related properties together
  8. Use meaningful comments
  9. Avoid vendor prefixes (use autoprefixer)
  10. Test across all themes
*/