@mytechtoday/augment-extensions 0.7.0 → 1.2.1

package/augment-extensions/coding-standards/css/examples/css-examples.css

@@ -1,550 +1,550 @@
-/* ========================================
-   CSS CUSTOM PROPERTIES (VARIABLES)
-   ======================================== */
-
-:root {
-  /* Colors */
-  --primary-color: #007bff;
-  --secondary-color: #6c757d;
-  --success-color: #28a745;
-  --danger-color: #dc3545;
-  --warning-color: #ffc107;
-  --text-color: #212529;
-  --bg-color: #ffffff;
-  
-  /* Spacing */
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 16px;
-  --spacing-lg: 24px;
-  --spacing-xl: 32px;
-  
-  /* Typography */
-  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --font-family-mono: "Courier New", monospace;
-  --font-size-base: 16px;
-  --font-size-sm: 14px;
-  --font-size-lg: 18px;
-  --font-size-xl: 24px;
-  --line-height-base: 1.5;
-  
-  /* Borders */
-  --border-radius: 4px;
-  --border-width: 1px;
-  --border-color: #dee2e6;
-  
-  /* Shadows */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
-  
-  /* Transitions */
-  --transition-fast: 150ms ease-in-out;
-  --transition-base: 300ms ease-in-out;
-  --transition-slow: 500ms ease-in-out;
-}
-
-/* ========================================
-   BEM NAMING CONVENTION EXAMPLES
-   ======================================== */
-
-/* Block: Card component */
-.card {
-  --card-padding: var(--spacing-md);
-  --card-bg: var(--bg-color);
-  
-  background-color: var(--card-bg);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius);
-  padding: var(--card-padding);
-  box-shadow: var(--shadow-sm);
-  transition: box-shadow var(--transition-base);
-}
-
-/* Element: Card header */
-.card__header {
-  border-bottom: var(--border-width) solid var(--border-color);
-  padding-bottom: var(--spacing-sm);
-  margin-bottom: var(--spacing-md);
-}
-
-/* Element: Card title */
-.card__title {
-  margin: 0;
-  font-size: var(--font-size-lg);
-  color: var(--text-color);
-}
-
-/* Element: Card body */
-.card__body {
-  color: var(--text-color);
-  line-height: var(--line-height-base);
-}
-
-/* Element: Card footer */
-.card__footer {
-  border-top: var(--border-width) solid var(--border-color);
-  padding-top: var(--spacing-sm);
-  margin-top: var(--spacing-md);
-}
-
-/* Modifier: Featured card */
-.card--featured {
-  border-color: var(--primary-color);
-  box-shadow: var(--shadow-md);
-}
-
-/* Modifier: Large card header */
-.card__header--large {
-  padding-bottom: var(--spacing-md);
-}
-
-/* Modifier: Danger card */
-.card--danger {
-  border-color: var(--danger-color);
-}
-
-/* ========================================
-   BUTTON COMPONENT WITH VARIATIONS
-   ======================================== */
-
-.btn {
-  display: inline-block;
-  padding: var(--spacing-sm) var(--spacing-md);
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-base);
-  text-align: center;
-  text-decoration: none;
-  border: var(--border-width) solid transparent;
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.btn--primary {
-  background-color: var(--primary-color);
-  color: white;
-  border-color: var(--primary-color);
-}
-
-.btn--primary:hover {
-  background-color: #0056b3;
-  border-color: #0056b3;
-}
-
-.btn--secondary {
-  background-color: var(--secondary-color);
-  color: white;
-  border-color: var(--secondary-color);
-}
-
-.btn--outline {
-  background-color: transparent;
-  color: var(--primary-color);
-  border-color: var(--primary-color);
-}
-
-.btn--outline:hover {
-  background-color: var(--primary-color);
-  color: white;
-}
-
-.btn--large {
-  padding: var(--spacing-md) var(--spacing-lg);
-  font-size: var(--font-size-lg);
-}
-
-.btn--small {
-  padding: var(--spacing-xs) var(--spacing-sm);
-  font-size: var(--font-size-sm);
-}
-
-/* ========================================
-   CSS GRID LAYOUT
-   ======================================== */
-
-/* Grid container for page layout */
-.page-layout {
-  display: grid;
-  grid-template-columns: 250px 1fr;
-  grid-template-rows: auto 1fr auto;
-  grid-template-areas:
-    "header header"
-    "sidebar main"
-    "footer footer";
-  min-height: 100vh;
-  gap: var(--spacing-md);
-}
-
-.page-layout__header {
-  grid-area: header;
-  background-color: var(--primary-color);
-  color: white;
-  padding: var(--spacing-md);
-}
-
-.page-layout__sidebar {
-  grid-area: sidebar;
-  background-color: #f8f9fa;
-  padding: var(--spacing-md);
-}
-
-.page-layout__main {
-  grid-area: main;
-  padding: var(--spacing-md);
-}
-
-.page-layout__footer {
-  grid-area: footer;
-  background-color: var(--secondary-color);
-  color: white;
-  padding: var(--spacing-md);
-  text-align: center;
-}
-
-/* Grid for card gallery */
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: var(--spacing-lg);
-  padding: var(--spacing-md);
-}
-
-/* ========================================
-   FLEXBOX LAYOUTS
-   ======================================== */
-
-/* Horizontal navigation with Flexbox */
-.nav {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  padding: var(--spacing-sm) var(--spacing-md);
-  background-color: var(--bg-color);
-  border-bottom: var(--border-width) solid var(--border-color);
-}
-
-.nav__logo {
-  margin-right: auto;
-  font-size: var(--font-size-lg);
-  font-weight: bold;
-}
-
-.nav__menu {
-  display: flex;
-  gap: var(--spacing-md);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.nav__item {
-  /* Individual nav items */
-}
-
-.nav__link {
-  color: var(--text-color);
-  text-decoration: none;
-  padding: var(--spacing-xs) var(--spacing-sm);
-  transition: color var(--transition-fast);
-}
-
-.nav__link:hover {
-  color: var(--primary-color);
-}
-
-/* Flexbox for centering content */
-.flex-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-}
-
-/* Flexbox for space-between layout */
-.flex-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-/* Flexbox column layout */
-.flex-column {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-}
-
-/* ========================================
-   RESPONSIVE DESIGN WITH MEDIA QUERIES
-   ======================================== */
-
-/* Mobile-first approach: Base styles for mobile */
-.container {
-  width: 100%;
-  padding: var(--spacing-md);
-  margin: 0 auto;
-}
-
-/* Tablet and up */
-@media (min-width: 768px) {
-  .container {
-    max-width: 720px;
-  }
-
-  .card-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .nav__menu {
-    flex-direction: row;
-  }
-}
-
-/* Desktop and up */
-@media (min-width: 1024px) {
-  .container {
-    max-width: 960px;
-  }
-
-  .card-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-/* Large desktop */
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1200px;
-  }
-
-  .card-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-/* Mobile-specific: Stack navigation vertically */
-@media (max-width: 767px) {
-  .page-layout {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "header"
-      "main"
-      "sidebar"
-      "footer";
-  }
-
-  .nav {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .nav__menu {
-    flex-direction: column;
-    width: 100%;
-  }
-}
-
-/* ========================================
-   SELECTOR SPECIFICITY EXAMPLES
-   ======================================== */
-
-/* ✅ GOOD: Low specificity, easy to override */
-.alert {
-  padding: var(--spacing-md);
-  border-radius: var(--border-radius);
-}
-
-.alert--success {
-  background-color: var(--success-color);
-  color: white;
-}
-
-.alert--danger {
-  background-color: var(--danger-color);
-  color: white;
-}
-
-/* ❌ BAD: High specificity, hard to override */
-/* div.alert.alert--success { } */
-
-/* ✅ GOOD: Avoid deep nesting (max 3 levels) */
-.article__content p {
-  margin-bottom: var(--spacing-md);
-}
-
-/* ❌ BAD: Too deeply nested */
-/* .article .article__content .text-wrapper p { } */
-
-/* ========================================
-   UTILITY CLASSES
-   ======================================== */
-
-/* Spacing utilities */
-.mt-sm { margin-top: var(--spacing-sm); }
-.mt-md { margin-top: var(--spacing-md); }
-.mt-lg { margin-top: var(--spacing-lg); }
-
-.mb-sm { margin-bottom: var(--spacing-sm); }
-.mb-md { margin-bottom: var(--spacing-md); }
-.mb-lg { margin-bottom: var(--spacing-lg); }
-
-.p-sm { padding: var(--spacing-sm); }
-.p-md { padding: var(--spacing-md); }
-.p-lg { padding: var(--spacing-lg); }
-
-/* Text utilities */
-.text-center { text-align: center; }
-.text-left { text-align: left; }
-.text-right { text-align: right; }
-
-.text-primary { color: var(--primary-color); }
-.text-secondary { color: var(--secondary-color); }
-.text-danger { color: var(--danger-color); }
-
-.text-sm { font-size: var(--font-size-sm); }
-.text-lg { font-size: var(--font-size-lg); }
-.text-xl { font-size: var(--font-size-xl); }
-
-/* Display utilities */
-.d-none { display: none; }
-.d-block { display: block; }
-.d-inline { display: inline; }
-.d-inline-block { display: inline-block; }
-.d-flex { display: flex; }
-.d-grid { display: grid; }
-
-/* ========================================
-   FORM STYLING
-   ======================================== */
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  margin-bottom: var(--spacing-md);
-}
-
-.form-label {
-  font-weight: 600;
-  color: var(--text-color);
-  font-size: var(--font-size-sm);
-}
-
-.form-input,
-.form-textarea,
-.form-select {
-  padding: var(--spacing-sm);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius);
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-base);
-  transition: border-color var(--transition-fast);
-}
-
-.form-input:focus,
-.form-textarea:focus,
-.form-select:focus {
-  outline: none;
-  border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
-}
-
-.form-input--error {
-  border-color: var(--danger-color);
-}
-
-.form-help-text {
-  font-size: var(--font-size-sm);
-  color: var(--secondary-color);
-}
-
-.form-error-text {
-  font-size: var(--font-size-sm);
-  color: var(--danger-color);
-}
-
-/* ========================================
-   ANIMATIONS AND TRANSITIONS
-   ======================================== */
-
-/* Fade in animation */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.fade-in {
-  animation: fadeIn var(--transition-base);
-}
-
-/* Slide in from left */
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.slide-in-left {
-  animation: slideInLeft var(--transition-base);
-}
-
-/* Hover effects */
-.hover-lift {
-  transition: transform var(--transition-fast);
-}
-
-.hover-lift:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-lg);
-}
-
-/* ========================================
-   ACCESSIBILITY HELPERS
-   ======================================== */
-
-/* Screen reader only content */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* Focus visible for keyboard navigation */
-.focus-visible:focus {
-  outline: 2px solid var(--primary-color);
-  outline-offset: 2px;
-}
-
-/* Skip to main content link */
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--primary-color);
-  color: white;
-  padding: var(--spacing-sm);
-  text-decoration: none;
-  z-index: 100;
-}
-
-.skip-link:focus {
-  top: 0;
-}
-
+/* ========================================
+   CSS CUSTOM PROPERTIES (VARIABLES)
+   ======================================== */
+
+:root {
+  /* Colors */
+  --primary-color: #007bff;
+  --secondary-color: #6c757d;
+  --success-color: #28a745;
+  --danger-color: #dc3545;
+  --warning-color: #ffc107;
+  --text-color: #212529;
+  --bg-color: #ffffff;
+  
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  
+  /* Typography */
+  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-family-mono: "Courier New", monospace;
+  --font-size-base: 16px;
+  --font-size-sm: 14px;
+  --font-size-lg: 18px;
+  --font-size-xl: 24px;
+  --line-height-base: 1.5;
+  
+  /* Borders */
+  --border-radius: 4px;
+  --border-width: 1px;
+  --border-color: #dee2e6;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
+  
+  /* Transitions */
+  --transition-fast: 150ms ease-in-out;
+  --transition-base: 300ms ease-in-out;
+  --transition-slow: 500ms ease-in-out;
+}
+
+/* ========================================
+   BEM NAMING CONVENTION EXAMPLES
+   ======================================== */
+
+/* Block: Card component */
+.card {
+  --card-padding: var(--spacing-md);
+  --card-bg: var(--bg-color);
+  
+  background-color: var(--card-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: var(--card-padding);
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow var(--transition-base);
+}
+
+/* Element: Card header */
+.card__header {
+  border-bottom: var(--border-width) solid var(--border-color);
+  padding-bottom: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
+}
+
+/* Element: Card title */
+.card__title {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  color: var(--text-color);
+}
+
+/* Element: Card body */
+.card__body {
+  color: var(--text-color);
+  line-height: var(--line-height-base);
+}
+
+/* Element: Card footer */
+.card__footer {
+  border-top: var(--border-width) solid var(--border-color);
+  padding-top: var(--spacing-sm);
+  margin-top: var(--spacing-md);
+}
+
+/* Modifier: Featured card */
+.card--featured {
+  border-color: var(--primary-color);
+  box-shadow: var(--shadow-md);
+}
+
+/* Modifier: Large card header */
+.card__header--large {
+  padding-bottom: var(--spacing-md);
+}
+
+/* Modifier: Danger card */
+.card--danger {
+  border-color: var(--danger-color);
+}
+
+/* ========================================
+   BUTTON COMPONENT WITH VARIATIONS
+   ======================================== */
+
+.btn {
+  display: inline-block;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  text-align: center;
+  text-decoration: none;
+  border: var(--border-width) solid transparent;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.btn--primary {
+  background-color: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+}
+
+.btn--primary:hover {
+  background-color: #0056b3;
+  border-color: #0056b3;
+}
+
+.btn--secondary {
+  background-color: var(--secondary-color);
+  color: white;
+  border-color: var(--secondary-color);
+}
+
+.btn--outline {
+  background-color: transparent;
+  color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+.btn--outline:hover {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.btn--large {
+  padding: var(--spacing-md) var(--spacing-lg);
+  font-size: var(--font-size-lg);
+}
+
+.btn--small {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--font-size-sm);
+}
+
+/* ========================================
+   CSS GRID LAYOUT
+   ======================================== */
+
+/* Grid container for page layout */
+.page-layout {
+  display: grid;
+  grid-template-columns: 250px 1fr;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    "header header"
+    "sidebar main"
+    "footer footer";
+  min-height: 100vh;
+  gap: var(--spacing-md);
+}
+
+.page-layout__header {
+  grid-area: header;
+  background-color: var(--primary-color);
+  color: white;
+  padding: var(--spacing-md);
+}
+
+.page-layout__sidebar {
+  grid-area: sidebar;
+  background-color: #f8f9fa;
+  padding: var(--spacing-md);
+}
+
+.page-layout__main {
+  grid-area: main;
+  padding: var(--spacing-md);
+}
+
+.page-layout__footer {
+  grid-area: footer;
+  background-color: var(--secondary-color);
+  color: white;
+  padding: var(--spacing-md);
+  text-align: center;
+}
+
+/* Grid for card gallery */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--spacing-lg);
+  padding: var(--spacing-md);
+}
+
+/* ========================================
+   FLEXBOX LAYOUTS
+   ======================================== */
+
+/* Horizontal navigation with Flexbox */
+.nav {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background-color: var(--bg-color);
+  border-bottom: var(--border-width) solid var(--border-color);
+}
+
+.nav__logo {
+  margin-right: auto;
+  font-size: var(--font-size-lg);
+  font-weight: bold;
+}
+
+.nav__menu {
+  display: flex;
+  gap: var(--spacing-md);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav__item {
+  /* Individual nav items */
+}
+
+.nav__link {
+  color: var(--text-color);
+  text-decoration: none;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  transition: color var(--transition-fast);
+}
+
+.nav__link:hover {
+  color: var(--primary-color);
+}
+
+/* Flexbox for centering content */
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+
+/* Flexbox for space-between layout */
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Flexbox column layout */
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+/* ========================================
+   RESPONSIVE DESIGN WITH MEDIA QUERIES
+   ======================================== */
+
+/* Mobile-first approach: Base styles for mobile */
+.container {
+  width: 100%;
+  padding: var(--spacing-md);
+  margin: 0 auto;
+}
+
+/* Tablet and up */
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .nav__menu {
+    flex-direction: row;
+  }
+}
+
+/* Desktop and up */
+@media (min-width: 1024px) {
+  .container {
+    max-width: 960px;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* Large desktop */
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1200px;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* Mobile-specific: Stack navigation vertically */
+@media (max-width: 767px) {
+  .page-layout {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "header"
+      "main"
+      "sidebar"
+      "footer";
+  }
+
+  .nav {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .nav__menu {
+    flex-direction: column;
+    width: 100%;
+  }
+}
+
+/* ========================================
+   SELECTOR SPECIFICITY EXAMPLES
+   ======================================== */
+
+/* ✅ GOOD: Low specificity, easy to override */
+.alert {
+  padding: var(--spacing-md);
+  border-radius: var(--border-radius);
+}
+
+.alert--success {
+  background-color: var(--success-color);
+  color: white;
+}
+
+.alert--danger {
+  background-color: var(--danger-color);
+  color: white;
+}
+
+/* ❌ BAD: High specificity, hard to override */
+/* div.alert.alert--success { } */
+
+/* ✅ GOOD: Avoid deep nesting (max 3 levels) */
+.article__content p {
+  margin-bottom: var(--spacing-md);
+}
+
+/* ❌ BAD: Too deeply nested */
+/* .article .article__content .text-wrapper p { } */
+
+/* ========================================
+   UTILITY CLASSES
+   ======================================== */
+
+/* Spacing utilities */
+.mt-sm { margin-top: var(--spacing-sm); }
+.mt-md { margin-top: var(--spacing-md); }
+.mt-lg { margin-top: var(--spacing-lg); }
+
+.mb-sm { margin-bottom: var(--spacing-sm); }
+.mb-md { margin-bottom: var(--spacing-md); }
+.mb-lg { margin-bottom: var(--spacing-lg); }
+
+.p-sm { padding: var(--spacing-sm); }
+.p-md { padding: var(--spacing-md); }
+.p-lg { padding: var(--spacing-lg); }
+
+/* Text utilities */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.text-primary { color: var(--primary-color); }
+.text-secondary { color: var(--secondary-color); }
+.text-danger { color: var(--danger-color); }
+
+.text-sm { font-size: var(--font-size-sm); }
+.text-lg { font-size: var(--font-size-lg); }
+.text-xl { font-size: var(--font-size-xl); }
+
+/* Display utilities */
+.d-none { display: none; }
+.d-block { display: block; }
+.d-inline { display: inline; }
+.d-inline-block { display: inline-block; }
+.d-flex { display: flex; }
+.d-grid { display: grid; }
+
+/* ========================================
+   FORM STYLING
+   ======================================== */
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  margin-bottom: var(--spacing-md);
+}
+
+.form-label {
+  font-weight: 600;
+  color: var(--text-color);
+  font-size: var(--font-size-sm);
+}
+
+.form-input,
+.form-textarea,
+.form-select {
+  padding: var(--spacing-sm);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  transition: border-color var(--transition-fast);
+}
+
+.form-input:focus,
+.form-textarea:focus,
+.form-select:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+}
+
+.form-input--error {
+  border-color: var(--danger-color);
+}
+
+.form-help-text {
+  font-size: var(--font-size-sm);
+  color: var(--secondary-color);
+}
+
+.form-error-text {
+  font-size: var(--font-size-sm);
+  color: var(--danger-color);
+}
+
+/* ========================================
+   ANIMATIONS AND TRANSITIONS
+   ======================================== */
+
+/* Fade in animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  animation: fadeIn var(--transition-base);
+}
+
+/* Slide in from left */
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.slide-in-left {
+  animation: slideInLeft var(--transition-base);
+}
+
+/* Hover effects */
+.hover-lift {
+  transition: transform var(--transition-fast);
+}
+
+.hover-lift:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+
+/* ========================================
+   ACCESSIBILITY HELPERS
+   ======================================== */
+
+/* Screen reader only content */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Focus visible for keyboard navigation */
+.focus-visible:focus {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+}
+
+/* Skip to main content link */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--primary-color);
+  color: white;
+  padding: var(--spacing-sm);
+  text-decoration: none;
+  z-index: 100;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+