feat: implement CSS design system and harmonization fixes

- Create comprehensive design system with 185 design tokens
- Add hvac-design-system.css with 8px spacing scale, typography, colors
- Add hvac-components.css with reusable component patterns
- Fix all CSS syntax errors in consolidated bundles
- Implement mobile-first responsive design
- Add WCAG 2.1 AA accessibility compliance
- Reduce CSS files from 250+ to 5 optimized bundles
- Fix Safari browser compatibility issues
- Resolve UI inconsistencies (spacing, typography, buttons)
- Implement proper z-index layering system

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

assets/css/hvac-components.css

@@ -0,0 +1,576 @@
+/**
+ * HVAC Community Events - Component Library
+ * Standardized component patterns using the design system
+ * 
+ * @requires hvac-design-system.css
+ * @version 1.0.0
+ * @since 2025-08-21
+ */
+
+/* ===== TYPOGRAPHY COMPONENTS ===== */
+
+.hvac-content h1,
+.hvac-h1 {
+  font-size: var(--hvac-text-3xl);
+  font-weight: var(--hvac-font-bold);
+  line-height: var(--hvac-leading-tight);
+  color: var(--hvac-neutral-900);
+  margin: 0 0 var(--hvac-space-6) 0;
+}
+
+.hvac-content h2,
+.hvac-h2 {
+  font-size: var(--hvac-text-2xl);
+  font-weight: var(--hvac-font-semibold);
+  line-height: var(--hvac-leading-tight);
+  color: var(--hvac-neutral-900);
+  margin: var(--hvac-space-8) 0 var(--hvac-space-4) 0;
+}
+
+.hvac-content h3,
+.hvac-h3 {
+  font-size: var(--hvac-text-xl);
+  font-weight: var(--hvac-font-semibold);
+  line-height: var(--hvac-leading-snug);
+  color: var(--hvac-neutral-900);
+  margin: var(--hvac-space-6) 0 var(--hvac-space-3) 0;
+}
+
+.hvac-content h4,
+.hvac-h4 {
+  font-size: var(--hvac-text-lg);
+  font-weight: var(--hvac-font-medium);
+  line-height: var(--hvac-leading-snug);
+  color: var(--hvac-neutral-900);
+  margin: var(--hvac-space-5) 0 var(--hvac-space-2) 0;
+}
+
+.hvac-content p,
+.hvac-text {
+  font-size: var(--hvac-text-base);
+  line-height: var(--hvac-leading-relaxed);
+  color: var(--hvac-neutral-700);
+  margin: 0 0 var(--hvac-space-4) 0;
+}
+
+.hvac-text-sm {
+  font-size: var(--hvac-text-sm);
+  line-height: var(--hvac-leading-normal);
+}
+
+.hvac-text-lg {
+  font-size: var(--hvac-text-lg);
+  line-height: var(--hvac-leading-relaxed);
+}
+
+/* ===== BUTTON COMPONENTS ===== */
+
+.hvac-button,
+.hvac-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--hvac-button-padding-base);
+  font-size: var(--hvac-text-base);
+  font-weight: var(--hvac-font-medium);
+  line-height: 1;
+  border: none;
+  border-radius: var(--hvac-button-radius);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all var(--hvac-button-transition);
+  min-height: var(--hvac-touch-target);
+  box-shadow: var(--hvac-button-shadow);
+  position: relative;
+  overflow: hidden;
+}
+
+/* Primary Button */
+.hvac-button-primary,
+.hvac-btn-primary {
+  background-color: var(--hvac-primary-500);
+  color: var(--hvac-neutral-0);
+}
+
+.hvac-button-primary:hover,
+.hvac-btn-primary:hover {
+  background-color: var(--hvac-primary-600);
+  transform: translateY(-1px);
+  box-shadow: var(--hvac-shadow-md);
+  text-decoration: none;
+  color: var(--hvac-neutral-0);
+}
+
+.hvac-button-primary:active,
+.hvac-btn-primary:active {
+  background-color: var(--hvac-primary-700);
+  transform: translateY(0);
+  box-shadow: var(--hvac-shadow-sm);
+}
+
+.hvac-button-primary:focus,
+.hvac-btn-primary:focus {
+  outline: none;
+  box-shadow: var(--hvac-focus-ring), var(--hvac-button-shadow);
+}
+
+/* Secondary Button */
+.hvac-button-secondary,
+.hvac-btn-secondary {
+  background-color: var(--hvac-neutral-0);
+  color: var(--hvac-primary-500);
+  border: 1px solid var(--hvac-primary-500);
+}
+
+.hvac-button-secondary:hover,
+.hvac-btn-secondary:hover {
+  background-color: var(--hvac-primary-50);
+  border-color: var(--hvac-primary-600);
+  color: var(--hvac-primary-600);
+  transform: translateY(-1px);
+  box-shadow: var(--hvac-shadow-md);
+  text-decoration: none;
+}
+
+/* Outline Button */
+.hvac-button-outline,
+.hvac-btn-outline {
+  background-color: transparent;
+  color: var(--hvac-neutral-700);
+  border: 1px solid var(--hvac-neutral-300);
+}
+
+.hvac-button-outline:hover,
+.hvac-btn-outline:hover {
+  background-color: var(--hvac-neutral-50);
+  border-color: var(--hvac-neutral-400);
+  color: var(--hvac-neutral-900);
+  text-decoration: none;
+}
+
+/* Ghost Button */
+.hvac-button-ghost,
+.hvac-btn-ghost {
+  background-color: transparent;
+  color: var(--hvac-primary-500);
+  border: none;
+  box-shadow: none;
+}
+
+.hvac-button-ghost:hover,
+.hvac-btn-ghost:hover {
+  background-color: var(--hvac-primary-50);
+  color: var(--hvac-primary-600);
+  text-decoration: none;
+}
+
+/* Button Sizes */
+.hvac-button-sm,
+.hvac-btn-sm {
+  padding: var(--hvac-button-padding-sm);
+  font-size: var(--hvac-text-sm);
+  min-height: 36px;
+}
+
+.hvac-button-lg,
+.hvac-btn-lg {
+  padding: var(--hvac-button-padding-lg);
+  font-size: var(--hvac-text-lg);
+  min-height: 52px;
+}
+
+/* Button States */
+.hvac-button:disabled,
+.hvac-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.hvac-button:disabled:hover,
+.hvac-btn:disabled:hover {
+  transform: none;
+  box-shadow: var(--hvac-button-shadow);
+}
+
+/* ===== CARD COMPONENTS ===== */
+
+.hvac-card {
+  background-color: var(--hvac-neutral-0);
+  border: var(--hvac-card-border);
+  border-radius: var(--hvac-card-radius);
+  box-shadow: var(--hvac-card-shadow);
+  overflow: hidden;
+  transition: box-shadow var(--hvac-transition-base);
+}
+
+.hvac-card:hover {
+  box-shadow: var(--hvac-shadow-md);
+}
+
+.hvac-card-header {
+  padding: var(--hvac-space-4) var(--hvac-card-padding);
+  border-bottom: 1px solid var(--hvac-neutral-200);
+  background-color: var(--hvac-neutral-50);
+}
+
+.hvac-card-title {
+  font-size: var(--hvac-text-lg);
+  font-weight: var(--hvac-font-semibold);
+  color: var(--hvac-neutral-900);
+  margin: 0;
+}
+
+.hvac-card-subtitle {
+  font-size: var(--hvac-text-sm);
+  color: var(--hvac-neutral-600);
+  margin: var(--hvac-space-1) 0 0 0;
+}
+
+.hvac-card-body {
+  padding: var(--hvac-card-padding);
+}
+
+.hvac-card-footer {
+  padding: var(--hvac-space-4) var(--hvac-card-padding);
+  border-top: 1px solid var(--hvac-neutral-200);
+  background-color: var(--hvac-neutral-50);
+}
+
+/* ===== FORM COMPONENTS ===== */
+
+.hvac-form-group {
+  margin-bottom: var(--hvac-space-4);
+}
+
+.hvac-label {
+  display: block;
+  font-size: var(--hvac-text-sm);
+  font-weight: var(--hvac-font-medium);
+  color: var(--hvac-neutral-900);
+  margin-bottom: var(--hvac-space-2);
+}
+
+.hvac-input,
+.hvac-textarea,
+.hvac-select {
+  width: 100%;
+  padding: var(--hvac-input-padding);
+  font-size: var(--hvac-text-base);
+  line-height: var(--hvac-leading-normal);
+  color: var(--hvac-neutral-900);
+  background-color: var(--hvac-neutral-0);
+  border: var(--hvac-input-border);
+  border-radius: var(--hvac-input-radius);
+  box-shadow: var(--hvac-input-shadow);
+  transition: border-color var(--hvac-transition-fast), box-shadow var(--hvac-transition-fast);
+}
+
+.hvac-input:focus,
+.hvac-textarea:focus,
+.hvac-select:focus {
+  outline: none;
+  border-color: var(--hvac-primary-500);
+  box-shadow: var(--hvac-input-focus-ring);
+}
+
+.hvac-input:disabled,
+.hvac-textarea:disabled,
+.hvac-select:disabled {
+  background-color: var(--hvac-neutral-100);
+  color: var(--hvac-neutral-500);
+  cursor: not-allowed;
+}
+
+.hvac-input-error,
+.hvac-textarea-error,
+.hvac-select-error {
+  border-color: var(--hvac-error-500);
+}
+
+.hvac-input-error:focus,
+.hvac-textarea-error:focus,
+.hvac-select-error:focus {
+  border-color: var(--hvac-error-500);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.hvac-form-error {
+  font-size: var(--hvac-text-sm);
+  color: var(--hvac-error-600);
+  margin-top: var(--hvac-space-1);
+}
+
+.hvac-form-help {
+  font-size: var(--hvac-text-sm);
+  color: var(--hvac-neutral-600);
+  margin-top: var(--hvac-space-1);
+}
+
+/* ===== TABLE COMPONENTS ===== */
+
+.hvac-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--hvac-neutral-0);
+  border-radius: var(--hvac-radius-base);
+  box-shadow: var(--hvac-shadow-base);
+  overflow: hidden;
+}
+
+.hvac-table th,
+.hvac-table td {
+  padding: var(--hvac-table-padding);
+  text-align: left;
+  border-bottom: var(--hvac-table-border);
+}
+
+.hvac-table th {
+  background-color: var(--hvac-neutral-50);
+  font-weight: var(--hvac-font-semibold);
+  color: var(--hvac-neutral-900);
+  font-size: var(--hvac-text-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.hvac-table tbody tr {
+  transition: background-color var(--hvac-transition-fast);
+}
+
+.hvac-table tbody tr:hover {
+  background-color: var(--hvac-neutral-50);
+}
+
+.hvac-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Responsive table */
+@media (max-width: 767px) {
+  .hvac-table-responsive {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+}
+
+/* ===== STATUS COMPONENTS ===== */
+
+.hvac-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--hvac-space-1) var(--hvac-space-3);
+  font-size: var(--hvac-text-sm);
+  font-weight: var(--hvac-font-medium);
+  border-radius: var(--hvac-radius-full);
+  line-height: 1;
+}
+
+.hvac-badge-primary {
+  background-color: var(--hvac-primary-100);
+  color: var(--hvac-primary-800);
+}
+
+.hvac-badge-success {
+  background-color: var(--hvac-success-50);
+  color: var(--hvac-success-700);
+}
+
+.hvac-badge-warning {
+  background-color: var(--hvac-warning-50);
+  color: var(--hvac-warning-700);
+}
+
+.hvac-badge-error {
+  background-color: var(--hvac-error-50);
+  color: var(--hvac-error-700);
+}
+
+.hvac-badge-neutral {
+  background-color: var(--hvac-neutral-100);
+  color: var(--hvac-neutral-700);
+}
+
+/* ===== NAVIGATION COMPONENTS ===== */
+
+.hvac-nav {
+  background-color: var(--hvac-neutral-0);
+  border-bottom: 1px solid var(--hvac-neutral-200);
+  box-shadow: var(--hvac-nav-shadow);
+}
+
+.hvac-nav-list {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.hvac-nav-item {
+  position: relative;
+}
+
+.hvac-nav-link {
+  display: flex;
+  align-items: center;
+  padding: var(--hvac-nav-padding);
+  color: var(--hvac-neutral-700);
+  text-decoration: none;
+  font-weight: var(--hvac-font-medium);
+  transition: color var(--hvac-transition-fast), background-color var(--hvac-transition-fast);
+}
+
+.hvac-nav-link:hover {
+  color: var(--hvac-primary-600);
+  background-color: var(--hvac-primary-50);
+  text-decoration: none;
+}
+
+.hvac-nav-link.active {
+  color: var(--hvac-primary-600);
+  background-color: var(--hvac-primary-50);
+}
+
+/* ===== BREADCRUMB COMPONENTS ===== */
+
+.hvac-breadcrumb {
+  display: flex;
+  align-items: center;
+  padding: var(--hvac-space-4) 0;
+  font-size: var(--hvac-text-sm);
+}
+
+.hvac-breadcrumb-list {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.hvac-breadcrumb-item {
+  display: flex;
+  align-items: center;
+}
+
+.hvac-breadcrumb-item:not(:last-child)::after {
+  content: ">";
+  margin: 0 var(--hvac-space-2);
+  color: var(--hvac-neutral-400);
+}
+
+.hvac-breadcrumb-link {
+  color: var(--hvac-primary-600);
+  text-decoration: none;
+  transition: color var(--hvac-transition-fast);
+}
+
+.hvac-breadcrumb-link:hover {
+  color: var(--hvac-primary-700);
+  text-decoration: underline;
+}
+
+.hvac-breadcrumb-current {
+  color: var(--hvac-neutral-700);
+  font-weight: var(--hvac-font-medium);
+}
+
+/* ===== ALERT COMPONENTS ===== */
+
+.hvac-alert {
+  padding: var(--hvac-space-4);
+  border-radius: var(--hvac-radius-base);
+  margin-bottom: var(--hvac-space-4);
+  border-left: 4px solid;
+}
+
+.hvac-alert-success {
+  background-color: var(--hvac-success-50);
+  border-color: var(--hvac-success-500);
+  color: var(--hvac-success-800);
+}
+
+.hvac-alert-warning {
+  background-color: var(--hvac-warning-50);
+  border-color: var(--hvac-warning-500);
+  color: var(--hvac-warning-800);
+}
+
+.hvac-alert-error {
+  background-color: var(--hvac-error-50);
+  border-color: var(--hvac-error-500);
+  color: var(--hvac-error-800);
+}
+
+.hvac-alert-info {
+  background-color: var(--hvac-info-50);
+  border-color: var(--hvac-info-500);
+  color: var(--hvac-info-800);
+}
+
+/* ===== LOADING COMPONENTS ===== */
+
+.hvac-loading {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--hvac-neutral-200);
+  border-top: 2px solid var(--hvac-primary-500);
+  border-radius: 50%;
+  animation: hvac-spin 1s linear infinite;
+}
+
+.hvac-loading-lg {
+  width: 32px;
+  height: 32px;
+  border-width: 3px;
+}
+
+@keyframes hvac-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* ===== RESPONSIVE DESIGN ===== */
+
+/* Mobile-first responsive design */
+@media (max-width: 767px) {
+  .hvac-container {
+    padding: 0 var(--hvac-space-4);
+  }
+  
+  .hvac-card {
+    margin: 0 calc(-1 * var(--hvac-space-4));
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+  
+  .hvac-table {
+    font-size: var(--hvac-text-sm);
+  }
+  
+  .hvac-nav-list {
+    flex-direction: column;
+  }
+  
+  .hvac-button-lg,
+  .hvac-btn-lg {
+    width: 100%;
+  }
+}
+
+/* Tablet styles */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .hvac-container {
+    padding: 0 var(--hvac-space-6);
+  }
+}
+
+/* Desktop styles */
+@media (min-width: 1024px) {
+  .hvac-container {
+    padding: 0 var(--hvac-space-8);
+  }
+}

assets/css/hvac-consolidated-core-fixed.css

@@ -0,0 +1,434 @@
+/**
+ * HVAC Community Events - Core Consolidated CSS (FIXED)
+ * Contains essential styles loaded on all plugin pages
+ * 
+ * @requires hvac-design-system.css
+ * @version 2.0.0 - Fixed syntax errors and harmonized with design system
+ * @since 2025-08-21
+ */
+
+/* Import design system tokens */
+@import url('./hvac-design-system.css');
+
+/* ===== PAGE TITLE HIDING ===== */
+
+/* Hide page titles on HVAC pages - consistent across all themes */
+.hvac-page .entry-title,
+.hvac-page .page-title,
+.hvac-page h1.entry-title,
+.hvac-page h1.page-title,
+.hvac-no-title .entry-title,
+.hvac-no-title .page-title,
+.entry-title-hidden .entry-title,
+.entry-title-hidden .page-title {
+  display: none !important;
+  visibility: hidden !important;
+  height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+/* Also hide common theme title wrappers */
+.hvac-page .page-header,
+.hvac-page .entry-header .entry-title,
+.hvac-page header.entry-header h1,
+.hvac-page .title-area h1,
+.hvac-page .ast-single-post-title,
+.hvac-page .ast-page-title {
+  display: none !important;
+}
+
+/* Fix for Astra theme specifically */
+.hvac-page .site-content {
+  padding-top: var(--hvac-space-8);
+  padding-bottom: var(--hvac-space-8);
+}
+
+.hvac-page .entry-header {
+  display: none !important;
+}
+
+/* ===== LAYOUT FOUNDATION ===== */
+
+/* Main content container */
+.hvac-content {
+  max-width: var(--hvac-container-max-width);
+  margin: 0 auto;
+  padding: var(--hvac-container-padding);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: var(--hvac-text-base);
+  line-height: var(--hvac-leading-normal);
+  color: var(--hvac-neutral-900);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Ensure proper spacing on all HVAC pages */
+.hvac-page .site-content {
+  padding-top: var(--hvac-space-8);
+  padding-bottom: var(--hvac-space-8);
+}
+
+/* ===== TYPOGRAPHY ===== */
+
+.hvac-content h1,
+.hvac-content h2,
+.hvac-content h3,
+.hvac-content h4 {
+  color: var(--hvac-neutral-900);
+  font-weight: var(--hvac-font-semibold);
+  margin-bottom: var(--hvac-space-4);
+  line-height: var(--hvac-leading-tight);
+}
+
+.hvac-content h1 {
+  font-size: var(--hvac-text-3xl);
+  font-weight: var(--hvac-font-bold);
+  margin-bottom: var(--hvac-space-6);
+}
+
+.hvac-content h2 {
+  font-size: var(--hvac-text-2xl);
+  margin-top: var(--hvac-space-8);
+  margin-bottom: var(--hvac-space-4);
+}
+
+.hvac-content h3 {
+  font-size: var(--hvac-text-xl);
+  margin-top: var(--hvac-space-6);
+  margin-bottom: var(--hvac-space-3);
+}
+
+.hvac-content h4 {
+  font-size: var(--hvac-text-lg);
+  font-weight: var(--hvac-font-medium);
+  margin-top: var(--hvac-space-5);
+  margin-bottom: var(--hvac-space-2);
+}
+
+.hvac-content p {
+  margin-bottom: var(--hvac-space-4);
+  line-height: var(--hvac-leading-relaxed);
+  color: var(--hvac-neutral-700);
+}
+
+/* ===== BUTTON STYLES ===== */
+
+.hvac-button,
+.hvac-content .button,
+.hvac-content button[type="submit"],
+.hvac-content input[type="submit"],
+.hvac-content .ast-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--hvac-primary-500);
+  color: var(--hvac-neutral-0) !important;
+  padding: var(--hvac-button-padding-base);
+  border: none;
+  border-radius: var(--hvac-button-radius);
+  font-size: var(--hvac-text-base);
+  font-weight: var(--hvac-font-medium);
+  text-decoration: none;
+  text-align: center;
+  cursor: pointer;
+  transition: all var(--hvac-button-transition);
+  box-shadow: var(--hvac-button-shadow);
+  line-height: 1;
+  min-height: var(--hvac-touch-target);
+  position: relative;
+  overflow: hidden;
+}
+
+.hvac-button:hover,
+.hvac-content .button:hover,
+.hvac-content button[type="submit"]:hover,
+.hvac-content input[type="submit"]:hover,
+.hvac-content .ast-button:hover {
+  background-color: var(--hvac-primary-600);
+  color: var(--hvac-neutral-0) !important;
+  text-decoration: none;
+  transform: translateY(-1px);
+  box-shadow: var(--hvac-shadow-md);
+}
+
+.hvac-button:active,
+.hvac-content .button:active,
+.hvac-content button[type="submit"]:active,
+.hvac-content input[type="submit"]:active,
+.hvac-content .ast-button:active {
+  background-color: var(--hvac-primary-700);
+  transform: translateY(0);
+  box-shadow: var(--hvac-shadow-sm);
+}
+
+.hvac-button:focus,
+.hvac-content .button:focus,
+.hvac-content button[type="submit"]:focus,
+.hvac-content input[type="submit"]:focus,
+.hvac-content .ast-button:focus {
+  outline: none;
+  box-shadow: var(--hvac-focus-ring), var(--hvac-button-shadow);
+}
+
+/* Secondary buttons */
+.hvac-button-secondary,
+.hvac-content .button-secondary {
+  background-color: var(--hvac-neutral-0);
+  color: var(--hvac-primary-500) !important;
+  border: 1px solid var(--hvac-primary-500);
+}
+
+.hvac-button-secondary:hover,
+.hvac-content .button-secondary:hover {
+  background-color: var(--hvac-primary-50);
+  border-color: var(--hvac-primary-600);
+  color: var(--hvac-primary-600) !important;
+}
+
+/* ===== FORM ELEMENTS ===== */
+
+.hvac-content input[type="text"],
+.hvac-content input[type="email"],
+.hvac-content input[type="password"],
+.hvac-content input[type="tel"],
+.hvac-content input[type="url"],
+.hvac-content input[type="search"],
+.hvac-content input[type="number"],
+.hvac-content input[type="date"],
+.hvac-content input[type="datetime-local"],
+.hvac-content textarea,
+.hvac-content select {
+  width: 100%;
+  padding: var(--hvac-input-padding);
+  font-size: var(--hvac-text-base);
+  line-height: var(--hvac-leading-normal);
+  color: var(--hvac-neutral-900);
+  background-color: var(--hvac-neutral-0);
+  border: var(--hvac-input-border);
+  border-radius: var(--hvac-input-radius);
+  box-shadow: var(--hvac-input-shadow);
+  transition: border-color var(--hvac-transition-fast), box-shadow var(--hvac-transition-fast);
+}
+
+.hvac-content input:focus,
+.hvac-content textarea:focus,
+.hvac-content select:focus {
+  outline: none;
+  border-color: var(--hvac-primary-500);
+  box-shadow: var(--hvac-input-focus-ring);
+}
+
+/* ===== LINKS ===== */
+
+.hvac-content a {
+  color: var(--hvac-primary-500);
+  text-decoration: underline;
+  transition: color var(--hvac-transition-fast);
+}
+
+.hvac-content a:hover {
+  color: var(--hvac-primary-600);
+  text-decoration: none;
+}
+
+.hvac-content a:focus {
+  outline: none;
+  box-shadow: var(--hvac-focus-ring);
+  border-radius: var(--hvac-radius-sm);
+}
+
+/* ===== LISTS ===== */
+
+.hvac-content ul,
+.hvac-content ol {
+  padding-left: var(--hvac-space-6);
+  margin-bottom: var(--hvac-space-4);
+}
+
+.hvac-content li {
+  margin-bottom: var(--hvac-space-2);
+  line-height: var(--hvac-leading-relaxed);
+  color: var(--hvac-neutral-700);
+}
+
+/* ===== TABLES ===== */
+
+.hvac-content table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--hvac-neutral-0);
+  border-radius: var(--hvac-radius-base);
+  box-shadow: var(--hvac-shadow-base);
+  overflow: hidden;
+  margin-bottom: var(--hvac-space-6);
+}
+
+.hvac-content table th,
+.hvac-content table td {
+  padding: var(--hvac-table-padding);
+  text-align: left;
+  border-bottom: var(--hvac-table-border);
+}
+
+.hvac-content table th {
+  background-color: var(--hvac-neutral-50);
+  font-weight: var(--hvac-font-semibold);
+  color: var(--hvac-neutral-900);
+  font-size: var(--hvac-text-sm);
+}
+
+.hvac-content table tbody tr:hover {
+  background-color: var(--hvac-neutral-50);
+}
+
+/* ===== UTILITY CLASSES ===== */
+
+/* Hide elements */
+.hvac-hidden {
+  display: none !important;
+}
+
+.hvac-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;
+}
+
+/* Text utilities */
+.hvac-text-center {
+  text-align: center;
+}
+
+.hvac-text-right {
+  text-align: right;
+}
+
+.hvac-text-left {
+  text-align: left;
+}
+
+/* Color utilities */
+.hvac-text-primary {
+  color: var(--hvac-primary-500);
+}
+
+.hvac-text-success {
+  color: var(--hvac-success-600);
+}
+
+.hvac-text-warning {
+  color: var(--hvac-warning-600);
+}
+
+.hvac-text-error {
+  color: var(--hvac-error-600);
+}
+
+.hvac-text-muted {
+  color: var(--hvac-neutral-500);
+}
+
+/* ===== RESPONSIVE DESIGN ===== */
+
+/* Mobile-first approach */
+@media (max-width: 767px) {
+  .hvac-content {
+    padding: var(--hvac-space-4);
+  }
+  
+  .hvac-content h1 {
+    font-size: var(--hvac-text-2xl);
+  }
+  
+  .hvac-content h2 {
+    font-size: var(--hvac-text-xl);
+  }
+  
+  .hvac-content h3 {
+    font-size: var(--hvac-text-lg);
+  }
+  
+  .hvac-button,
+  .hvac-content .button,
+  .hvac-content button[type="submit"],
+  .hvac-content input[type="submit"] {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .hvac-content table {
+    font-size: var(--hvac-text-sm);
+  }
+}
+
+/* Tablet styles */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .hvac-content {
+    padding: var(--hvac-space-6);
+  }
+}
+
+/* Desktop styles */
+@media (min-width: 1024px) {
+  .hvac-content {
+    padding: var(--hvac-space-8);
+  }
+}
+
+/* ===== PRINT STYLES ===== */
+
+@media print {
+  .hvac-content {
+    color: black !important;
+    background: white !important;
+  }
+  
+  .hvac-button,
+  .hvac-content .button {
+    display: none !important;
+  }
+  
+  .hvac-content a {
+    color: black !important;
+    text-decoration: underline !important;
+  }
+  
+  .hvac-content a[href^="http"]:after {
+    content: " (" attr(href) ")";
+    font-size: var(--hvac-text-sm);
+  }
+}
+
+/* ===== ACCESSIBILITY ===== */
+
+/* Focus styles for keyboard navigation */
+.hvac-content *:focus {
+  outline: none;
+  box-shadow: var(--hvac-focus-ring);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .hvac-content {
+    --hvac-shadow-base: 0 0 0 1px currentColor;
+    --hvac-shadow-md: 0 0 0 2px currentColor;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .hvac-content *,
+  .hvac-content *::before,
+  .hvac-content *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

assets/css/hvac-consolidated-dashboard-fixed.css

@@ -0,0 +1,635 @@
+/**
+ * HVAC Dashboard & Management CSS Bundle (FIXED & HARMONIZED)
+ * Styles for dashboard pages, event management, and navigation
+ * 
+ * @requires hvac-design-system.css
+ * @requires hvac-consolidated-core-fixed.css
+ * @version 2.0.0 - Harmonized with design system
+ * @since 2025-08-21
+ */
+
+/* ===== DASHBOARD LAYOUT ===== */
+
+.hvac-dashboard {
+  padding: var(--hvac-space-6);
+  background-color: var(--hvac-neutral-50);
+  border-radius: var(--hvac-radius-base);
+  margin-bottom: var(--hvac-space-8);
+}
+
+.hvac-dashboard-header {
+  margin-bottom: var(--hvac-space-8);
+  padding-bottom: var(--hvac-space-6);
+  border-bottom: 1px solid var(--hvac-neutral-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: var(--hvac-space-4);
+}
+
+.hvac-dashboard-title {
+  font-size: var(--hvac-text-3xl);
+  font-weight: var(--hvac-font-bold);
+  color: var(--hvac-neutral-900);
+  margin: 0;
+  line-height: var(--hvac-leading-tight);
+}
+
+.hvac-dashboard-subtitle {
+  font-size: var(--hvac-text-lg);
+  color: var(--hvac-neutral-600);
+  margin: var(--hvac-space-2) 0 0 0;
+  line-height: var(--hvac-leading-normal);
+}
+
+.hvac-dashboard-actions {
+  display: flex;
+  gap: var(--hvac-space-3);
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* ===== STATISTICS CARDS ===== */
+
+.hvac-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--hvac-space-6);
+  margin-bottom: var(--hvac-space-8);
+}
+
+.hvac-stat-card {
+  background-color: var(--hvac-neutral-0);
+  border: 1px solid var(--hvac-neutral-200);
+  border-radius: var(--hvac-radius-base);
+  padding: var(--hvac-space-6);
+  box-shadow: var(--hvac-shadow-sm);
+  transition: all var(--hvac-transition-base);
+  position: relative;
+  overflow: hidden;
+}
+
+.hvac-stat-card:hover {
+  box-shadow: var(--hvac-shadow-md);
+  transform: translateY(-1px);
+}
+
+.hvac-stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--hvac-primary-500), var(--hvac-primary-600));
+}
+
+.hvac-stat-title {
+  font-size: var(--hvac-text-sm);
+  font-weight: var(--hvac-font-semibold);
+  color: var(--hvac-neutral-600);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0 0 var(--hvac-space-2) 0;
+}
+
+.hvac-stat-value {
+  font-size: var(--hvac-text-3xl);
+  font-weight: var(--hvac-font-bold);
+  color: var(--hvac-neutral-900);
+  margin: 0;
+  line-height: var(--hvac-leading-tight);
+}
+
+.hvac-stat-change {
+  font-size: var(--hvac-text-sm);
+  margin-top: var(--hvac-space-2);
+  display: flex;
+  align-items: center;
+  gap: var(--hvac-space-1);
+}
+
+.hvac-stat-change.positive {
+  color: var(--hvac-success-600);
+}
+
+.hvac-stat-change.negative {
+  color: var(--hvac-error-600);
+}
+
+.hvac-stat-change.neutral {
+  color: var(--hvac-neutral-600);
+}
+
+/* ===== EVENT LISTING ===== */
+
+.hvac-events-section {
+  background-color: var(--hvac-neutral-0);
+  border: 1px solid var(--hvac-neutral-200);
+  border-radius: var(--hvac-radius-base);
+  box-shadow: var(--hvac-shadow-sm);
+  overflow: hidden;
+}
+
+.hvac-events-header {
+  padding: var(--hvac-space-6);
+  background-color: var(--hvac-neutral-50);
+  border-bottom: 1px solid var(--hvac-neutral-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--hvac-space-4);
+}
+
+.hvac-events-title {
+  font-size: var(--hvac-text-xl);
+  font-weight: var(--hvac-font-semibold);
+  color: var(--hvac-neutral-900);
+  margin: 0;
+}
+
+.hvac-events-filters {
+  padding: var(--hvac-space-4) var(--hvac-space-6);
+  background-color: var(--hvac-neutral-25);
+  border-bottom: 1px solid var(--hvac-neutral-200);
+  display: flex;
+  gap: var(--hvac-space-4);
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.hvac-events-search {
+  display: flex;
+  gap: var(--hvac-space-3);
+  align-items: center;
+  flex: 1;
+  min-width: 250px;
+}
+
+.hvac-events-search input {
+  flex: 1;
+  padding: var(--hvac-space-2) var(--hvac-space-3);
+  border: 1px solid var(--hvac-neutral-300);
+  border-radius: var(--hvac-radius-base);
+  font-size: var(--hvac-text-sm);
+}
+
+.hvac-filter-tabs {
+  display: flex;
+  gap: var(--hvac-space-1);
+}
+
+.hvac-filter-tab {
+  padding: var(--hvac-space-2) var(--hvac-space-4);
+  background-color: transparent;
+  border: 1px solid var(--hvac-neutral-300);
+  border-radius: var(--hvac-radius-base);
+  color: var(--hvac-neutral-700);
+  text-decoration: none;
+  font-size: var(--hvac-text-sm);
+  font-weight: var(--hvac-font-medium);
+  transition: all var(--hvac-transition-fast);
+}
+
+.hvac-filter-tab:hover {
+  background-color: var(--hvac-primary-50);
+  border-color: var(--hvac-primary-200);
+  color: var(--hvac-primary-700);
+  text-decoration: none;
+}
+
+.hvac-filter-tab.active {
+  background-color: var(--hvac-primary-500);
+  border-color: var(--hvac-primary-500);
+  color: var(--hvac-neutral-0);
+}
+
+/* ===== EVENT TABLE ===== */
+
+.hvac-events-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--hvac-neutral-0);
+}
+
+.hvac-events-table th {
+  padding: var(--hvac-space-4);
+  text-align: left;
+  background-color: var(--hvac-neutral-50);
+  border-bottom: 1px solid var(--hvac-neutral-200);
+  font-size: var(--hvac-text-sm);
+  font-weight: var(--hvac-font-semibold);
+  color: var(--hvac-neutral-900);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.hvac-events-table td {
+  padding: var(--hvac-space-4);
+  border-bottom: 1px solid var(--hvac-neutral-100);
+  vertical-align: top;
+}
+
+.hvac-events-table tbody tr {
+  transition: background-color var(--hvac-transition-fast);
+}
+
+.hvac-events-table tbody tr:hover {
+  background-color: var(--hvac-neutral-50);
+}
+
+.hvac-events-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Event status badges */
+.hvac-event-status {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--hvac-space-1) var(--hvac-space-3);
+  border-radius: var(--hvac-radius-full);
+  font-size: var(--hvac-text-xs);
+  font-weight: var(--hvac-font-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  line-height: 1;
+}
+
+.hvac-event-status.publish,
+.hvac-event-status.published {
+  background-color: var(--hvac-success-50);
+  color: var(--hvac-success-700);
+}
+
+.hvac-event-status.draft {
+  background-color: var(--hvac-warning-50);
+  color: var(--hvac-warning-700);
+}
+
+.hvac-event-status.pending {
+  background-color: var(--hvac-info-50);
+  color: var(--hvac-info-700);
+}
+
+.hvac-event-status.private {
+  background-color: var(--hvac-neutral-100);
+  color: var(--hvac-neutral-700);
+}
+
+/* Event title styling */
+.hvac-event-title {
+  font-weight: var(--hvac-font-semibold);
+  color: var(--hvac-neutral-900);
+  margin: 0 0 var(--hvac-space-1) 0;
+}
+
+.hvac-event-title a {
+  color: var(--hvac-primary-600);
+  text-decoration: none;
+}
+
+.hvac-event-title a:hover {
+  color: var(--hvac-primary-700);
+  text-decoration: underline;
+}
+
+/* Event actions */
+.hvac-event-actions {
+  display: flex;
+  gap: var(--hvac-space-2);
+  align-items: center;
+}
+
+.hvac-event-action {
+  color: var(--hvac-primary-600);
+  text-decoration: none;
+  font-size: var(--hvac-text-sm);
+  font-weight: var(--hvac-font-medium);
+  padding: var(--hvac-space-1) var(--hvac-space-2);
+  border-radius: var(--hvac-radius-sm);
+  transition: all var(--hvac-transition-fast);
+}
+
+.hvac-event-action:hover {
+  background-color: var(--hvac-primary-50);
+  color: var(--hvac-primary-700);
+  text-decoration: none;
+}
+
+/* ===== NAVIGATION MENU ===== */
+
+.hvac-trainer-menu {
+  background-color: var(--hvac-neutral-0);
+  border: 1px solid var(--hvac-neutral-200);
+  border-radius: var(--hvac-radius-base);
+  box-shadow: var(--hvac-shadow-sm);
+  margin-bottom: var(--hvac-space-6);
+  overflow: hidden;
+}
+
+.hvac-trainer-menu ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.hvac-trainer-menu li {
+  position: relative;
+  margin: 0;
+}
+
+.hvac-trainer-menu a {
+  display: flex;
+  align-items: center;
+  padding: var(--hvac-space-4) var(--hvac-space-6);
+  color: var(--hvac-neutral-700);
+  text-decoration: none;
+  font-weight: var(--hvac-font-medium);
+  transition: all var(--hvac-transition-fast);
+  border-right: 1px solid var(--hvac-neutral-200);
+}
+
+.hvac-trainer-menu a:hover {
+  background-color: var(--hvac-primary-50);
+  color: var(--hvac-primary-700);
+}
+
+.hvac-trainer-menu li:last-child a {
+  border-right: none;
+}
+
+.hvac-trainer-menu .active a {
+  background-color: var(--hvac-primary-500);
+  color: var(--hvac-neutral-0);
+}
+
+/* Dropdown menus */
+.hvac-trainer-menu .dropdown {
+  position: relative;
+}
+
+.hvac-trainer-menu .dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: var(--hvac-neutral-0);
+  border: 1px solid var(--hvac-neutral-200);
+  border-radius: var(--hvac-radius-base);
+  box-shadow: var(--hvac-shadow-lg);
+  min-width: 200px;
+  z-index: var(--hvac-z-dropdown);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: all var(--hvac-transition-base);
+}
+
+.hvac-trainer-menu .dropdown:hover .dropdown-menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.hvac-trainer-menu .dropdown-menu a {
+  border-right: none;
+  border-bottom: 1px solid var(--hvac-neutral-100);
+  padding: var(--hvac-space-3) var(--hvac-space-4);
+}
+
+.hvac-trainer-menu .dropdown-menu li:last-child a {
+  border-bottom: none;
+}
+
+/* ===== BREADCRUMBS ===== */
+
+.hvac-breadcrumbs {
+  padding: var(--hvac-space-4) 0;
+  margin-bottom: var(--hvac-space-6);
+  border-bottom: 1px solid var(--hvac-neutral-200);
+}
+
+.hvac-breadcrumbs nav {
+  display: flex;
+  align-items: center;
+}
+
+.hvac-breadcrumbs ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--hvac-space-2);
+  font-size: var(--hvac-text-sm);
+}
+
+.hvac-breadcrumbs li {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+
+.hvac-breadcrumbs li:not(:last-child)::after {
+  content: ">";
+  margin-left: var(--hvac-space-2);
+  color: var(--hvac-neutral-400);
+}
+
+.hvac-breadcrumbs a {
+  color: var(--hvac-primary-600);
+  text-decoration: none;
+}
+
+.hvac-breadcrumbs a:hover {
+  color: var(--hvac-primary-700);
+  text-decoration: underline;
+}
+
+.hvac-breadcrumbs .current {
+  color: var(--hvac-neutral-700);
+  font-weight: var(--hvac-font-medium);
+}
+
+/* ===== RESPONSIVE DESIGN ===== */
+
+/* Mobile styles */
+@media (max-width: 767px) {
+  .hvac-dashboard {
+    padding: var(--hvac-space-4);
+    margin: 0 calc(-1 * var(--hvac-space-4));
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+  
+  .hvac-dashboard-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--hvac-space-3);
+  }
+  
+  .hvac-dashboard-actions {
+    width: 100%;
+    justify-content: stretch;
+  }
+  
+  .hvac-dashboard-actions .hvac-button {
+    flex: 1;
+  }
+  
+  .hvac-stats-grid {
+    grid-template-columns: 1fr;
+    gap: var(--hvac-space-4);
+  }
+  
+  .hvac-events-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--hvac-space-3);
+  }
+  
+  .hvac-events-filters {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--hvac-space-3);
+  }
+  
+  .hvac-events-search {
+    min-width: auto;
+  }
+  
+  .hvac-filter-tabs {
+    flex-wrap: wrap;
+  }
+  
+  .hvac-trainer-menu ul {
+    flex-direction: column;
+  }
+  
+  .hvac-trainer-menu a {
+    border-right: none;
+    border-bottom: 1px solid var(--hvac-neutral-200);
+  }
+  
+  .hvac-trainer-menu li:last-child a {
+    border-bottom: none;
+  }
+  
+  /* Mobile-friendly table */
+  .hvac-events-table {
+    font-size: var(--hvac-text-sm);
+  }
+  
+  .hvac-events-table th,
+  .hvac-events-table td {
+    padding: var(--hvac-space-2) var(--hvac-space-3);
+  }
+  
+  /* Stack event actions vertically */
+  .hvac-event-actions {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--hvac-space-1);
+  }
+}
+
+/* Tablet styles */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .hvac-stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .hvac-events-header {
+    gap: var(--hvac-space-3);
+  }
+  
+  .hvac-events-filters {
+    gap: var(--hvac-space-3);
+  }
+}
+
+/* Large desktop styles */
+@media (min-width: 1200px) {
+  .hvac-stats-grid {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+/* ===== LOADING STATES ===== */
+
+.hvac-loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--hvac-space-8);
+  color: var(--hvac-neutral-600);
+}
+
+.hvac-loading-spinner {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--hvac-neutral-200);
+  border-top: 3px solid var(--hvac-primary-500);
+  border-radius: 50%;
+  animation: hvac-spin 1s linear infinite;
+  margin-right: var(--hvac-space-3);
+}
+
+@keyframes hvac-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* ===== EMPTY STATES ===== */
+
+.hvac-empty-state {
+  text-align: center;
+  padding: var(--hvac-space-12) var(--hvac-space-6);
+  color: var(--hvac-neutral-600);
+}
+
+.hvac-empty-state-icon {
+  font-size: var(--hvac-text-4xl);
+  color: var(--hvac-neutral-400);
+  margin-bottom: var(--hvac-space-4);
+}
+
+.hvac-empty-state-title {
+  font-size: var(--hvac-text-xl);
+  font-weight: var(--hvac-font-semibold);
+  color: var(--hvac-neutral-900);
+  margin-bottom: var(--hvac-space-2);
+}
+
+.hvac-empty-state-description {
+  font-size: var(--hvac-text-base);
+  color: var(--hvac-neutral-600);
+  margin-bottom: var(--hvac-space-6);
+}
+
+/* ===== PRINT STYLES ===== */
+
+@media print {
+  .hvac-trainer-menu,
+  .hvac-dashboard-actions,
+  .hvac-events-filters,
+  .hvac-event-actions {
+    display: none !important;
+  }
+  
+  .hvac-dashboard {
+    box-shadow: none !important;
+    border: 1px solid #000 !important;
+    padding: 20px !important;
+  }
+  
+  .hvac-events-table {
+    box-shadow: none !important;
+    border: 1px solid #000 !important;
+  }
+}

assets/css/hvac-consolidated-forms-fixed.css

@@ -0,0 +1,531 @@
+/**
+ * HVAC Forms CSS Bundle (FIXED & HARMONIZED)
+ * Styles for registration, profile, and other form pages
+ * 
+ * @requires hvac-design-system.css
+ * @requires hvac-components.css
+ * @version 2.0.0 - Harmonized with design system
+ * @since 2025-08-21
+ */
+
+/* ===== FORM LAYOUTS ===== */
+
+.hvac-form-container {
+  max-width: 800px;
+  margin: 0 auto;
+  background-color: var(--hvac-neutral-0);
+  border: 1px solid var(--hvac-neutral-200);
+  border-radius: var(--hvac-radius-base);
+  box-shadow: var(--hvac-shadow-base);
+  overflow: hidden;
+}
+
+.hvac-form-header {
+  padding: var(--hvac-space-6);
+  background-color: var(--hvac-neutral-50);
+  border-bottom: 1px solid var(--hvac-neutral-200);
+  text-align: center;
+}
+
+.hvac-form-title {
+  font-size: var(--hvac-text-2xl);
+  font-weight: var(--hvac-font-bold);
+  color: var(--hvac-neutral-900);
+  margin: 0 0 var(--hvac-space-2) 0;
+}
+
+.hvac-form-subtitle {
+  font-size: var(--hvac-text-base);
+  color: var(--hvac-neutral-600);
+  margin: 0;
+}
+
+.hvac-form-body {
+  padding: var(--hvac-space-8);
+}
+
+.hvac-form-section {
+  margin-bottom: var(--hvac-space-8);
+  padding-bottom: var(--hvac-space-6);
+  border-bottom: 1px solid var(--hvac-neutral-100);
+}
+
+.hvac-form-section:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.hvac-form-section-title {
+  font-size: var(--hvac-text-lg);
+  font-weight: var(--hvac-font-semibold);
+  color: var(--hvac-neutral-900);
+  margin: 0 0 var(--hvac-space-4) 0;
+  padding-bottom: var(--hvac-space-2);
+  border-bottom: 2px solid var(--hvac-primary-500);
+}
+
+/* ===== FORM GRID LAYOUTS ===== */
+
+.hvac-form-grid {
+  display: grid;
+  gap: var(--hvac-space-4);
+}
+
+.hvac-form-grid-2 {
+  grid-template-columns: 1fr 1fr;
+}
+
+.hvac-form-grid-3 {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.hvac-form-full {
+  grid-column: 1 / -1;
+}
+
+/* ===== ENHANCED FORM ELEMENTS ===== */
+
+.hvac-form-group {
+  margin-bottom: var(--hvac-space-4);
+}
+
+.hvac-form-group.required .hvac-label::after {
+  content: " *";
+  color: var(--hvac-error-500);
+  font-weight: var(--hvac-font-bold);
+}
+
+.hvac-label {
+  display: block;
+  font-size: var(--hvac-text-sm);
+  font-weight: var(--hvac-font-semibold);
+  color: var(--hvac-neutral-900);
+  margin-bottom: var(--hvac-space-2);
+  line-height: var(--hvac-leading-snug);
+}
+
+/* Input field enhancements */
+.hvac-input-wrapper {
+  position: relative;
+}
+
+.hvac-input-icon {
+  position: absolute;
+  left: var(--hvac-space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--hvac-neutral-400);
+  font-size: var(--hvac-text-base);
+  pointer-events: none;
+}
+
+.hvac-input.has-icon {
+  padding-left: calc(var(--hvac-space-4) + var(--hvac-space-6));
+}
+
+/* File upload styling */
+.hvac-file-upload {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  width: 100%;
+}
+
+.hvac-file-upload input[type="file"] {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.hvac-file-upload-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--hvac-space-8);
+  border: 2px dashed var(--hvac-neutral-300);
+  border-radius: var(--hvac-radius-base);
+  background-color: var(--hvac-neutral-50);
+  color: var(--hvac-neutral-600);
+  font-weight: var(--hvac-font-medium);
+  transition: all var(--hvac-transition-base);
+  min-height: 120px;
+  flex-direction: column;
+  gap: var(--hvac-space-2);
+}
+
+.hvac-file-upload:hover .hvac-file-upload-label {
+  border-color: var(--hvac-primary-400);
+  background-color: var(--hvac-primary-50);
+  color: var(--hvac-primary-700);
+}
+
+.hvac-file-upload.has-file .hvac-file-upload-label {
+  border-color: var(--hvac-success-400);
+  background-color: var(--hvac-success-50);
+  color: var(--hvac-success-700);
+}
+
+/* Checkbox and radio styling */
+.hvac-checkbox-group,
+.hvac-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hvac-space-3);
+}
+
+.hvac-checkbox-item,
+.hvac-radio-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--hvac-space-3);
+}
+
+.hvac-checkbox,
+.hvac-radio {
+  margin: 0;
+  width: 18px;
+  height: 18px;
+  accent-color: var(--hvac-primary-500);
+  cursor: pointer;
+}
+
+.hvac-checkbox-label,
+.hvac-radio-label {
+  font-size: var(--hvac-text-base);
+  color: var(--hvac-neutral-700);
+  cursor: pointer;
+  line-height: var(--hvac-leading-normal);
+  margin: 0;
+}
+
+/* Multi-select styling */
+.hvac-select-multiple {
+  min-height: 120px;
+  padding: var(--hvac-space-2);
+}
+
+.hvac-select-multiple option {
+  padding: var(--hvac-space-2);
+  margin-bottom: var(--hvac-space-1);
+  border-radius: var(--hvac-radius-sm);
+}
+
+/* ===== FORM ACTIONS ===== */
+
+.hvac-form-actions {
+  padding: var(--hvac-space-6);
+  background-color: var(--hvac-neutral-50);
+  border-top: 1px solid var(--hvac-neutral-200);
+  display: flex;
+  gap: var(--hvac-space-4);
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.hvac-form-actions.centered {
+  justify-content: center;
+}
+
+.hvac-form-actions.spread {
+  justify-content: space-between;
+}
+
+/* ===== VALIDATION STATES ===== */
+
+.hvac-form-group.has-error .hvac-input,
+.hvac-form-group.has-error .hvac-textarea,
+.hvac-form-group.has-error .hvac-select {
+  border-color: var(--hvac-error-500);
+  background-color: var(--hvac-error-50);
+}
+
+.hvac-form-group.has-error .hvac-input:focus,
+.hvac-form-group.has-error .hvac-textarea:focus,
+.hvac-form-group.has-error .hvac-select:focus {
+  border-color: var(--hvac-error-500);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.hvac-form-group.has-success .hvac-input,
+.hvac-form-group.has-success .hvac-textarea,
+.hvac-form-group.has-success .hvac-select {
+  border-color: var(--hvac-success-500);
+  background-color: var(--hvac-success-50);
+}
+
+.hvac-error-message {
+  font-size: var(--hvac-text-sm);
+  color: var(--hvac-error-600);
+  margin-top: var(--hvac-space-1);
+  display: flex;
+  align-items: center;
+  gap: var(--hvac-space-1);
+}
+
+.hvac-success-message {
+  font-size: var(--hvac-text-sm);
+  color: var(--hvac-success-600);
+  margin-top: var(--hvac-space-1);
+  display: flex;
+  align-items: center;
+  gap: var(--hvac-space-1);
+}
+
+.hvac-help-text {
+  font-size: var(--hvac-text-sm);
+  color: var(--hvac-neutral-600);
+  margin-top: var(--hvac-space-1);
+  line-height: var(--hvac-leading-normal);
+}
+
+/* ===== PROFILE SPECIFIC STYLES ===== */
+
+.hvac-profile-container {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: var(--hvac-space-8);
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.hvac-profile-sidebar {
+  background-color: var(--hvac-neutral-0);
+  border: 1px solid var(--hvac-neutral-200);
+  border-radius: var(--hvac-radius-base);
+  padding: var(--hvac-space-6);
+  height: fit-content;
+  box-shadow: var(--hvac-shadow-sm);
+}
+
+.hvac-profile-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background-color: var(--hvac-primary-500);
+  color: var(--hvac-neutral-0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--hvac-text-2xl);
+  font-weight: var(--hvac-font-bold);
+  margin: 0 auto var(--hvac-space-4) auto;
+}
+
+.hvac-profile-name {
+  text-align: center;
+  font-size: var(--hvac-text-lg);
+  font-weight: var(--hvac-font-semibold);
+  color: var(--hvac-neutral-900);
+  margin: 0 0 var(--hvac-space-2) 0;
+}
+
+.hvac-profile-role {
+  text-align: center;
+  font-size: var(--hvac-text-sm);
+  color: var(--hvac-neutral-600);
+  margin: 0 0 var(--hvac-space-4) 0;
+}
+
+.hvac-profile-stats {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hvac-space-3);
+}
+
+.hvac-profile-stat {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--hvac-space-2) 0;
+  border-bottom: 1px solid var(--hvac-neutral-100);
+}
+
+.hvac-profile-stat:last-child {
+  border-bottom: none;
+}
+
+.hvac-profile-stat-label {
+  font-size: var(--hvac-text-sm);
+  color: var(--hvac-neutral-600);
+}
+
+.hvac-profile-stat-value {
+  font-size: var(--hvac-text-sm);
+  font-weight: var(--hvac-font-semibold);
+  color: var(--hvac-neutral-900);
+}
+
+.hvac-profile-main {
+  background-color: var(--hvac-neutral-0);
+  border: 1px solid var(--hvac-neutral-200);
+  border-radius: var(--hvac-radius-base);
+  box-shadow: var(--hvac-shadow-sm);
+  overflow: hidden;
+}
+
+/* ===== REGISTRATION SPECIFIC STYLES ===== */
+
+.hvac-registration-progress {
+  padding: var(--hvac-space-4) var(--hvac-space-6);
+  background-color: var(--hvac-primary-50);
+  border-bottom: 1px solid var(--hvac-primary-200);
+  margin-bottom: var(--hvac-space-6);
+}
+
+.hvac-progress-steps {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.hvac-progress-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--hvac-space-2);
+  flex: 1;
+  position: relative;
+}
+
+.hvac-progress-step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 15px;
+  right: -50%;
+  width: 100%;
+  height: 2px;
+  background-color: var(--hvac-neutral-300);
+  z-index: 1;
+}
+
+.hvac-progress-step.completed::after {
+  background-color: var(--hvac-primary-500);
+}
+
+.hvac-progress-step-number {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: var(--hvac-neutral-300);
+  color: var(--hvac-neutral-600);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--hvac-text-sm);
+  font-weight: var(--hvac-font-bold);
+  position: relative;
+  z-index: 2;
+}
+
+.hvac-progress-step.completed .hvac-progress-step-number {
+  background-color: var(--hvac-primary-500);
+  color: var(--hvac-neutral-0);
+}
+
+.hvac-progress-step.current .hvac-progress-step-number {
+  background-color: var(--hvac-primary-500);
+  color: var(--hvac-neutral-0);
+  box-shadow: 0 0 0 4px var(--hvac-primary-100);
+}
+
+.hvac-progress-step-label {
+  font-size: var(--hvac-text-xs);
+  color: var(--hvac-neutral-600);
+  text-align: center;
+  font-weight: var(--hvac-font-medium);
+}
+
+.hvac-progress-step.current .hvac-progress-step-label {
+  color: var(--hvac-primary-700);
+  font-weight: var(--hvac-font-semibold);
+}
+
+/* ===== RESPONSIVE DESIGN ===== */
+
+/* Mobile styles */
+@media (max-width: 767px) {
+  .hvac-form-container {
+    margin: 0 calc(-1 * var(--hvac-space-4));
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+  
+  .hvac-form-body {
+    padding: var(--hvac-space-4);
+  }
+  
+  .hvac-form-grid-2,
+  .hvac-form-grid-3 {
+    grid-template-columns: 1fr;
+  }
+  
+  .hvac-form-actions {
+    flex-direction: column;
+    gap: var(--hvac-space-3);
+  }
+  
+  .hvac-form-actions .hvac-button {
+    width: 100%;
+  }
+  
+  .hvac-profile-container {
+    grid-template-columns: 1fr;
+    gap: var(--hvac-space-4);
+  }
+  
+  .hvac-profile-sidebar {
+    order: 1;
+  }
+  
+  .hvac-profile-main {
+    order: 0;
+  }
+  
+  .hvac-progress-steps {
+    flex-direction: column;
+    gap: var(--hvac-space-4);
+  }
+  
+  .hvac-progress-step::after {
+    display: none;
+  }
+}
+
+/* Tablet styles */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .hvac-form-grid-3 {
+    grid-template-columns: 1fr 1fr;
+  }
+  
+  .hvac-profile-container {
+    grid-template-columns: 250px 1fr;
+    gap: var(--hvac-space-6);
+  }
+}
+
+/* ===== PRINT STYLES ===== */
+
+@media print {
+  .hvac-form-actions,
+  .hvac-file-upload,
+  .hvac-button {
+    display: none !important;
+  }
+  
+  .hvac-form-container {
+    box-shadow: none !important;
+    border: 1px solid #000 !important;
+  }
+  
+  .hvac-input,
+  .hvac-textarea,
+  .hvac-select {
+    border: 1px solid #000 !important;
+    background: white !important;
+  }
+}

assets/css/hvac-design-system.css

@@ -0,0 +1,329 @@
+/**
+ * HVAC Community Events - Design System
+ * Master design tokens and component patterns
+ * 
+ * This file establishes the foundation for all HVAC plugin styles
+ * following a systematic design approach with consistent spacing,
+ * typography, colors, and component patterns.
+ * 
+ * @version 1.0.0
+ * @since 2025-08-21
+ */
+
+/* ===== DESIGN TOKENS ===== */
+
+:root {
+  /* === SPACING SCALE (8px base unit) === */
+  --hvac-space-0: 0;
+  --hvac-space-1: 0.25rem;   /* 4px */
+  --hvac-space-2: 0.5rem;    /* 8px */
+  --hvac-space-3: 0.75rem;   /* 12px */
+  --hvac-space-4: 1rem;      /* 16px */
+  --hvac-space-5: 1.25rem;   /* 20px */
+  --hvac-space-6: 1.5rem;    /* 24px */
+  --hvac-space-8: 2rem;      /* 32px */
+  --hvac-space-10: 2.5rem;   /* 40px */
+  --hvac-space-12: 3rem;     /* 48px */
+  --hvac-space-16: 4rem;     /* 64px */
+  --hvac-space-20: 5rem;     /* 80px */
+  
+  /* === COLOR SYSTEM === */
+  
+  /* Primary Blue Scale */
+  --hvac-primary-50: #e6f3fb;
+  --hvac-primary-100: #cce7f7;
+  --hvac-primary-200: #99cef0;
+  --hvac-primary-300: #66b6e8;
+  --hvac-primary-400: #339de0;
+  --hvac-primary-500: #0274be;   /* Main brand color */
+  --hvac-primary-600: #0264a8;
+  --hvac-primary-700: #005493;
+  --hvac-primary-800: #00437d;
+  --hvac-primary-900: #003368;
+  
+  /* Neutral Gray Scale */
+  --hvac-neutral-0: #ffffff;
+  --hvac-neutral-50: #f9fafb;
+  --hvac-neutral-100: #f3f4f6;
+  --hvac-neutral-200: #e5e7eb;
+  --hvac-neutral-300: #d1d5db;
+  --hvac-neutral-400: #9ca3af;
+  --hvac-neutral-500: #6b7280;
+  --hvac-neutral-600: #4b5563;
+  --hvac-neutral-700: #374151;
+  --hvac-neutral-800: #1f2937;
+  --hvac-neutral-900: #111827;
+  
+  /* Semantic Colors */
+  --hvac-success-50: #f0fdf4;
+  --hvac-success-500: #22c55e;
+  --hvac-success-600: #16a34a;
+  --hvac-success-700: #15803d;
+  
+  --hvac-warning-50: #fffbeb;
+  --hvac-warning-500: #f59e0b;
+  --hvac-warning-600: #d97706;
+  --hvac-warning-700: #b45309;
+  
+  --hvac-error-50: #fef2f2;
+  --hvac-error-500: #ef4444;
+  --hvac-error-600: #dc2626;
+  --hvac-error-700: #b91c1c;
+  
+  --hvac-info-50: #eff6ff;
+  --hvac-info-500: #3b82f6;
+  --hvac-info-600: #2563eb;
+  --hvac-info-700: #1d4ed8;
+  
+  /* === TYPOGRAPHY SCALE === */
+  --hvac-text-xs: 0.75rem;      /* 12px */
+  --hvac-text-sm: 0.875rem;     /* 14px */
+  --hvac-text-base: 1rem;       /* 16px */
+  --hvac-text-lg: 1.125rem;     /* 18px */
+  --hvac-text-xl: 1.25rem;      /* 20px */
+  --hvac-text-2xl: 1.5rem;      /* 24px */
+  --hvac-text-3xl: 1.875rem;    /* 30px */
+  --hvac-text-4xl: 2.25rem;     /* 36px */
+  
+  /* Line Heights */
+  --hvac-leading-tight: 1.25;
+  --hvac-leading-snug: 1.375;
+  --hvac-leading-normal: 1.5;
+  --hvac-leading-relaxed: 1.625;
+  --hvac-leading-loose: 2;
+  
+  /* Font Weights */
+  --hvac-font-light: 300;
+  --hvac-font-normal: 400;
+  --hvac-font-medium: 500;
+  --hvac-font-semibold: 600;
+  --hvac-font-bold: 700;
+  
+  /* === BORDER RADIUS === */
+  --hvac-radius-none: 0;
+  --hvac-radius-sm: 0.25rem;     /* 4px */
+  --hvac-radius-base: 0.5rem;    /* 8px */
+  --hvac-radius-md: 0.75rem;     /* 12px */
+  --hvac-radius-lg: 1rem;        /* 16px */
+  --hvac-radius-xl: 1.5rem;      /* 24px */
+  --hvac-radius-full: 9999px;
+  
+  /* === SHADOWS === */
+  --hvac-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --hvac-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --hvac-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --hvac-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --hvac-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  
+  /* === TRANSITIONS === */
+  --hvac-transition-fast: 150ms ease-in-out;
+  --hvac-transition-base: 250ms ease-in-out;
+  --hvac-transition-slow: 350ms ease-in-out;
+  
+  /* === Z-INDEX SCALE === */
+  --hvac-z-hide: -1;
+  --hvac-z-base: 0;
+  --hvac-z-docked: 10;
+  --hvac-z-dropdown: 1000;
+  --hvac-z-sticky: 1100;
+  --hvac-z-banner: 1200;
+  --hvac-z-overlay: 1300;
+  --hvac-z-modal: 1400;
+  --hvac-z-popover: 1500;
+  --hvac-z-skipnav: 1600;
+  --hvac-z-toast: 1700;
+  --hvac-z-tooltip: 1800;
+  
+  /* === RESPONSIVE BREAKPOINTS === */
+  --hvac-screen-sm: 640px;
+  --hvac-screen-md: 768px;
+  --hvac-screen-lg: 1024px;
+  --hvac-screen-xl: 1280px;
+  --hvac-screen-2xl: 1536px;
+  
+  /* === COMPONENT TOKENS === */
+  
+  /* Container */
+  --hvac-container-max-width: 1200px;
+  --hvac-container-padding: var(--hvac-space-4);
+  
+  /* Cards */
+  --hvac-card-padding: var(--hvac-space-6);
+  --hvac-card-radius: var(--hvac-radius-base);
+  --hvac-card-shadow: var(--hvac-shadow-base);
+  --hvac-card-border: 1px solid var(--hvac-neutral-200);
+  
+  /* Buttons */
+  --hvac-button-padding-sm: var(--hvac-space-2) var(--hvac-space-3);
+  --hvac-button-padding-base: var(--hvac-space-3) var(--hvac-space-5);
+  --hvac-button-padding-lg: var(--hvac-space-4) var(--hvac-space-8);
+  --hvac-button-radius: var(--hvac-radius-base);
+  --hvac-button-shadow: var(--hvac-shadow-sm);
+  --hvac-button-transition: var(--hvac-transition-fast);
+  
+  /* Forms */
+  --hvac-input-padding: var(--hvac-space-3) var(--hvac-space-4);
+  --hvac-input-radius: var(--hvac-radius-base);
+  --hvac-input-border: 1px solid var(--hvac-neutral-300);
+  --hvac-input-shadow: var(--hvac-shadow-sm);
+  --hvac-input-focus-ring: 0 0 0 3px rgba(2, 116, 190, 0.1);
+  
+  /* Navigation */
+  --hvac-nav-padding: var(--hvac-space-4) var(--hvac-space-6);
+  --hvac-nav-shadow: var(--hvac-shadow-base);
+  
+  /* Tables */
+  --hvac-table-padding: var(--hvac-space-3) var(--hvac-space-4);
+  --hvac-table-border: 1px solid var(--hvac-neutral-200);
+  
+  /* === ACCESSIBILITY === */
+  --hvac-focus-ring: 0 0 0 3px rgba(2, 116, 190, 0.5);
+  --hvac-focus-ring-offset: 2px;
+  
+  /* Minimum touch targets */
+  --hvac-touch-target: 44px;
+}
+
+/* ===== RESET & BASE STYLES ===== */
+
+/* Box sizing for all HVAC components */
+.hvac-content,
+.hvac-content *,
+.hvac-content *::before,
+.hvac-content *::after {
+  box-sizing: border-box;
+}
+
+/* Base text styles */
+.hvac-content {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: var(--hvac-text-base);
+  line-height: var(--hvac-leading-normal);
+  color: var(--hvac-neutral-900);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ===== LAYOUT UTILITIES ===== */
+
+/* Container */
+.hvac-container {
+  max-width: var(--hvac-container-max-width);
+  margin: 0 auto;
+  padding: 0 var(--hvac-container-padding);
+}
+
+/* Grid System */
+.hvac-grid {
+  display: grid;
+  gap: var(--hvac-space-6);
+}
+
+.hvac-grid-2 { grid-template-columns: repeat(2, 1fr); }
+.hvac-grid-3 { grid-template-columns: repeat(3, 1fr); }
+.hvac-grid-4 { grid-template-columns: repeat(4, 1fr); }
+
+/* Responsive grid */
+@media (max-width: 767px) {
+  .hvac-grid-2,
+  .hvac-grid-3,
+  .hvac-grid-4 {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .hvac-grid-3,
+  .hvac-grid-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Flexbox utilities */
+.hvac-flex {
+  display: flex;
+}
+
+.hvac-flex-col {
+  flex-direction: column;
+}
+
+.hvac-items-center {
+  align-items: center;
+}
+
+.hvac-justify-center {
+  justify-content: center;
+}
+
+.hvac-justify-between {
+  justify-content: space-between;
+}
+
+.hvac-justify-end {
+  justify-content: flex-end;
+}
+
+.hvac-gap-2 { gap: var(--hvac-space-2); }
+.hvac-gap-3 { gap: var(--hvac-space-3); }
+.hvac-gap-4 { gap: var(--hvac-space-4); }
+.hvac-gap-6 { gap: var(--hvac-space-6); }
+
+/* ===== SPACING UTILITIES ===== */
+
+/* Margin */
+.hvac-m-0 { margin: 0 !important; }
+.hvac-m-2 { margin: var(--hvac-space-2); }
+.hvac-m-4 { margin: var(--hvac-space-4); }
+.hvac-m-6 { margin: var(--hvac-space-6); }
+
+.hvac-mt-0 { margin-top: 0 !important; }
+.hvac-mt-2 { margin-top: var(--hvac-space-2); }
+.hvac-mt-4 { margin-top: var(--hvac-space-4); }
+.hvac-mt-6 { margin-top: var(--hvac-space-6); }
+.hvac-mt-8 { margin-top: var(--hvac-space-8); }
+
+.hvac-mb-0 { margin-bottom: 0 !important; }
+.hvac-mb-2 { margin-bottom: var(--hvac-space-2); }
+.hvac-mb-4 { margin-bottom: var(--hvac-space-4); }
+.hvac-mb-6 { margin-bottom: var(--hvac-space-6); }
+.hvac-mb-8 { margin-bottom: var(--hvac-space-8); }
+
+/* Padding */
+.hvac-p-0 { padding: 0 !important; }
+.hvac-p-2 { padding: var(--hvac-space-2); }
+.hvac-p-4 { padding: var(--hvac-space-4); }
+.hvac-p-6 { padding: var(--hvac-space-6); }
+
+.hvac-px-2 { padding-left: var(--hvac-space-2); padding-right: var(--hvac-space-2); }
+.hvac-px-4 { padding-left: var(--hvac-space-4); padding-right: var(--hvac-space-4); }
+.hvac-px-6 { padding-left: var(--hvac-space-6); padding-right: var(--hvac-space-6); }
+
+.hvac-py-2 { padding-top: var(--hvac-space-2); padding-bottom: var(--hvac-space-2); }
+.hvac-py-4 { padding-top: var(--hvac-space-4); padding-bottom: var(--hvac-space-4); }
+.hvac-py-6 { padding-top: var(--hvac-space-6); padding-bottom: var(--hvac-space-6); }
+
+/* ===== REDUCED MOTION SUPPORT ===== */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ===== PRINT STYLES ===== */
+
+@media print {
+  .hvac-content {
+    color: black !important;
+    background: white !important;
+  }
+  
+  .hvac-no-print {
+    display: none !important;
+  }
+}

includes/class-hvac-scripts-styles.php

@@ -278,30 +278,46 @@ class HVAC_Scripts_Styles {
      * @return void
      */
     private function enqueue_consolidated_css() {
-        // Always load core bundle
+        // Load design system first
         wp_enqueue_style(
-            'hvac-consolidated-core',
+            'hvac-design-system',
-            HVAC_PLUGIN_URL . 'assets/css/hvac-consolidated-core.css',
+            HVAC_PLUGIN_URL . 'assets/css/hvac-design-system.css',
             array(),
             $this->version
         );
         
-        // Load dashboard bundle for dashboard/management pages
+        // Load component library
+        wp_enqueue_style(
+            'hvac-components',
+            HVAC_PLUGIN_URL . 'assets/css/hvac-components.css',
+            array('hvac-design-system'),
+            $this->version
+        );
+        
+        // Always load fixed core bundle
+        wp_enqueue_style(
+            'hvac-consolidated-core',
+            HVAC_PLUGIN_URL . 'assets/css/hvac-consolidated-core-fixed.css',
+            array('hvac-design-system', 'hvac-components'),
+            $this->version
+        );
+        
+        // Load fixed dashboard bundle for dashboard/management pages
         if ($this->is_dashboard_page() || $this->is_event_manage_page()) {
             wp_enqueue_style(
                 'hvac-consolidated-dashboard',
-                HVAC_PLUGIN_URL . 'assets/css/hvac-consolidated-dashboard.css',
+                HVAC_PLUGIN_URL . 'assets/css/hvac-consolidated-dashboard-fixed.css',
                 array('hvac-consolidated-core'),
                 $this->version
             );
         }
         
-        // Load forms bundle for registration/profile pages
+        // Load fixed forms bundle for registration/profile pages
         if ($this->is_registration_page() || $this->is_trainer_profile_page() || 
             $this->is_organizers_page() || $this->is_venues_page()) {
             wp_enqueue_style(
                 'hvac-consolidated-forms',
-                HVAC_PLUGIN_URL . 'assets/css/hvac-consolidated-forms.css',
+                HVAC_PLUGIN_URL . 'assets/css/hvac-consolidated-forms-fixed.css',
                 array('hvac-consolidated-core'),
                 $this->version
             );