@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.6 → 0.1.8

package/src/styles/components/base/input.css

@@ -0,0 +1,887 @@
+/* Input Component Styles */
+/* Using semantic CSS architecture with CSS variables and BEM methodology */
+
+/* Input Component CSS Variables */
+:root {
+  /* Input Base Variables */
+  --input-height-sm: calc(var(--cs-spacing-scale-2xl) + var(--cs-spacing-scale-sm));
+  --input-height-md: calc(var(--cs-spacing-scale-2xl) + var(--cs-spacing-scale-md));
+  --input-height-lg: calc(var(--cs-spacing-scale-2xl) + var(--cs-spacing-scale-lg));
+  --input-height-xl: calc(var(--cs-spacing-scale-2xl) + var(--cs-spacing-scale-xl));
+  
+  --input-padding-y-sm: var(--cs-spacing-scale-sm);
+  --input-padding-x-sm: var(--cs-spacing-scale-md);
+  --input-padding-y-md: var(--cs-spacing-scale-md);
+  --input-padding-x-md: var(--cs-spacing-scale-lg);
+  --input-padding-y-lg: var(--cs-spacing-scale-lg);
+  --input-padding-x-lg: var(--cs-spacing-scale-xl);
+  --input-padding-y-xl: var(--cs-spacing-scale-xl);
+  --input-padding-x-xl: var(--cs-spacing-scale-2xl);
+  
+  --input-font-size-sm: var(--cs-fonts-primary-sizes-sm);
+  --input-font-size-md: var(--cs-fonts-primary-sizes-base);
+  --input-font-size-lg: var(--cs-fonts-primary-sizes-lg);
+  --input-font-size-xl: var(--cs-fonts-primary-sizes-xl);
+  
+  --input-font-weight: var(--cs-fonts-primary-weights-normal);
+  --input-line-height: var(--cs-fonts-primary-line-heights-normal);
+  --input-border-radius: var(--cs-border-radius-md);
+  --input-transition: var(--cs-transitions-properties-colors);
+  --input-gap: var(--cs-spacing-scale-sm);
+  
+  /* Input Variant Variables */
+  --input-default-background: var(--cs-colors-surface-background);
+  --input-default-text: var(--cs-colors-text-primary);
+  --input-default-border: var(--cs-colors-border);
+  --input-default-placeholder: var(--cs-colors-text-muted);
+  --input-default-shadow: var(--cs-shadows-sm);
+  
+  --input-error-background: rgba(var(--cs-colors-semantic-error-rgb), 0.05);
+  --input-error-text: var(--cs-colors-text-primary);
+  --input-error-border: var(--cs-colors-semantic-error);
+  --input-error-placeholder: var(--cs-colors-text-muted);
+  --input-error-shadow: var(--cs-shadows-focus-error);
+  
+  --input-success-background: rgba(var(--cs-colors-semantic-success-rgb), 0.05);
+  --input-success-text: var(--cs-colors-text-primary);
+  --input-success-border: var(--cs-colors-semantic-success);
+  --input-success-placeholder: var(--cs-colors-text-muted);
+  --input-success-shadow: var(--cs-shadows-focus-success);
+  
+  --input-warning-background: rgba(var(--cs-colors-semantic-warning-rgb), 0.05);
+  --input-warning-text: var(--cs-colors-text-primary);
+  --input-warning-border: var(--cs-colors-semantic-warning);
+  --input-warning-placeholder: var(--cs-colors-text-muted);
+  --input-warning-shadow: var(--cs-shadows-focus-warning);
+  
+  --input-loading-background: var(--cs-colors-surface-background);
+  --input-loading-text: var(--cs-colors-text-muted);
+  --input-loading-border: var(--cs-colors-border);
+  --input-loading-placeholder: var(--cs-colors-text-muted);
+  --input-loading-shadow: var(--cs-shadows-sm);
+  
+  /* Input State Variables */
+  --input-normal-background: var(--input-default-background);
+  --input-normal-text: var(--input-default-text);
+  --input-normal-border: var(--input-default-border);
+  --input-normal-shadow: var(--input-default-shadow);
+  
+  --input-focused-background: var(--cs-colors-surface-background);
+  --input-focused-text: var(--cs-colors-text-primary);
+  --input-focused-border: var(--cs-colors-primary-500);
+  --input-focused-shadow: var(--cs-shadows-focus);
+  
+  --input-disabled-background: var(--cs-colors-interactive-disabled);
+  --input-disabled-text: var(--cs-colors-text-muted);
+  --input-disabled-border: var(--cs-colors-interactive-disabled);
+  --input-disabled-shadow: none;
+  --input-disabled-opacity: var(--cs-opacity-60);
+  --input-disabled-cursor: not-allowed;
+  
+  --input-readonly-background: var(--cs-colors-surface-surface);
+  --input-readonly-text: var(--cs-colors-text-primary);
+  --input-readonly-border: var(--cs-colors-border);
+  --input-readonly-shadow: var(--cs-shadows-sm);
+  --input-readonly-cursor: default;
+  
+  /* Input Interactive State Variables */
+  --input-hover-background: var(--cs-colors-surface-background);
+  --input-hover-border: var(--cs-colors-primary-400);
+  --input-hover-shadow: var(--cs-shadows-md);
+  
+  --input-active-background: var(--cs-colors-surface-background);
+  --input-active-border: var(--cs-colors-primary-600);
+  --input-active-shadow: var(--cs-shadows-sm);
+  
+  /* Input Focus Variables */
+  --input-focus-outline: var(--cs-border-width-focus) solid var(--cs-colors-interactive-focus);
+  --input-focus-offset: var(--cs-border-width-focus);
+  --input-focus-visible-outline: var(--cs-border-width-focus) solid var(--cs-colors-interactive-focus);
+  --input-focus-visible-offset: var(--cs-border-width-focus);
+  
+  /* Input File Variables */
+  --input-file-button-background: var(--cs-colors-primary-500);
+  --input-file-button-text: var(--cs-colors-text-on-primary);
+  --input-file-button-border: var(--cs-colors-primary-500);
+  --input-file-button-padding: var(--cs-spacing-scale-sm) var(--cs-spacing-scale-md);
+  --input-file-button-font-size: var(--cs-fonts-primary-sizes-sm);
+  --input-file-button-font-weight: var(--cs-fonts-primary-weights-medium);
+  --input-file-button-border-radius: var(--cs-border-radius-sm);
+  --input-file-button-transition: var(--cs-transitions-properties-colors);
+  
+  --input-file-button-hover-background: var(--cs-colors-primary-hover);
+  --input-file-button-hover-border: var(--cs-colors-primary-hover);
+  
+  /* Input Responsive Variables */
+  --input-mobile-breakpoint: var(--cs-breakpoints-mobile);
+  --input-tablet-breakpoint: var(--cs-breakpoints-tablet);
+  --input-desktop-breakpoint: var(--cs-breakpoints-desktop);
+  
+  /* Input Showcase Variables */
+  --input-showcase-gap: var(--cs-spacing-scale-md);
+  --input-variant-showcase-gap: var(--cs-spacing-scale-md);
+  --input-size-showcase-gap: var(--cs-spacing-scale-md);
+  --input-state-showcase-gap: var(--cs-spacing-scale-md);
+  --input-responsive-showcase-gap: var(--cs-spacing-scale-md);
+  
+  --input-showcase-title-size: var(--cs-fonts-primary-sizes-lg);
+  --input-showcase-title-weight: var(--cs-fonts-primary-weights-semibold);
+  --input-showcase-description-size: var(--cs-fonts-primary-sizes-sm);
+  --input-showcase-description-color: var(--cs-colors-text-muted);
+  
+  --input-showcase-grid-gap: var(--cs-spacing-scale-sm);
+  --input-responsive-grid-gap: var(--cs-spacing-scale-md);
+  --input-responsive-grid-max-width: var(--cs-spacing-scale-6xl);
+  
+  /* Input Touch Target Variables */
+  --input-touch-target-min: var(--cs-touch-target-min);
+  --input-touch-target-small: var(--cs-touch-target-small);
+  --input-touch-target-medium: var(--cs-touch-target-medium);
+  --input-touch-target-large: calc(var(--cs-spacing-scale-2xl) * 1.6);
+  --input-touch-target-extra-large: var(--cs-touch-target-extra-large);
+  
+  /* Input Transform Variables */
+  --input-hover-transform-y: calc(-1 * var(--cs-spacing-scale-xs));
+  --input-focus-transform-y: calc(-1 * var(--cs-spacing-scale-sm));
+  
+  /* Input Print Style Variables */
+  --input-print-border: var(--cs-colors-black);
+  --input-print-background: transparent;
+  --input-print-text: var(--cs-colors-black);
+  
+  /* Input Animation Variables */
+  --input-animation-duration-fast: var(--cs-transitions-durations-fast);
+  --input-animation-duration-normal: var(--cs-transitions-durations-slow);
+  
+  /* Input Border Width Variables */
+  --input-border-width-thin: var(--cs-border-width-thin);
+  --input-border-width-normal: var(--cs-border-width-normal);
+  --input-border-width-thick: var(--cs-border-width-focus);
+  --input-border-width-focus: var(--cs-border-width-thick);
+  
+  /* Input Line Height Variables */
+  --input-line-height-compact: var(--cs-fonts-primary-line-heights-normal);
+}
+
+/* Input Base Styles */
+.input {
+  position: relative;
+  display: block;
+  width: var(--cs-percentage-full);
+  min-height: var(--input-height-md);
+  padding: var(--input-padding-y-md) var(--input-padding-x-md);
+  font-family: var(--cs-fonts-primary-family);
+  font-size: var(--input-font-size-md);
+  font-weight: var(--input-font-weight);
+  line-height: var(--input-line-height);
+  color: var(--input-normal-text);
+  background-color: var(--input-normal-background);
+  border: var(--input-border-width-normal) solid var(--input-normal-border);
+  border-radius: var(--input-border-radius);
+  box-shadow: var(--input-normal-shadow);
+  transition: var(--input-transition);
+  outline: none;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+/* Input Focus States */
+.input:focus,
+.input:focus-visible {
+  background-color: var(--input-focused-background);
+  color: var(--input-focused-text);
+  border-color: var(--input-focused-border);
+  box-shadow: var(--input-focused-shadow);
+  outline: var(--input-focus-outline);
+  outline-offset: var(--input-focus-offset);
+}
+
+.input:focus-visible {
+  outline: var(--input-focus-visible-outline);
+  outline-offset: var(--input-focus-visible-offset);
+}
+
+/* Input Hover States */
+.input:hover:not(:disabled):not(:readonly) {
+  background-color: var(--input-hover-background);
+  border-color: var(--input-hover-border);
+  box-shadow: var(--input-hover-shadow);
+}
+
+/* Input Active States */
+.input:active:not(:disabled):not(:readonly) {
+  background-color: var(--input-active-background);
+  border-color: var(--input-active-border);
+  box-shadow: var(--input-active-shadow);
+}
+
+/* Input Disabled State */
+.input:disabled {
+  background-color: var(--input-disabled-background);
+  color: var(--input-disabled-text);
+  border-color: var(--input-disabled-border);
+  box-shadow: var(--input-disabled-shadow);
+  opacity: var(--input-disabled-opacity);
+  cursor: var(--input-disabled-cursor);
+  pointer-events: none;
+}
+
+/* Input Readonly State */
+.input[readonly] {
+  background-color: var(--input-readonly-background);
+  color: var(--input-readonly-text);
+  border-color: var(--input-readonly-border);
+  box-shadow: var(--input-readonly-shadow);
+  cursor: var(--input-readonly-cursor);
+}
+
+/* Input Placeholder */
+.input::placeholder {
+  color: var(--input-default-placeholder);
+  opacity: 1;
+}
+
+.input:focus::placeholder {
+  color: var(--input-focused-text);
+  opacity: var(--cs-opacity-70);
+}
+
+/* Input Variant Modifiers */
+.input--variant-default {
+  background-color: var(--input-default-background);
+  color: var(--input-default-text);
+  border-color: var(--input-default-border);
+  box-shadow: var(--input-default-shadow);
+}
+
+.input--variant-error {
+  background-color: var(--input-error-background);
+  color: var(--input-error-text);
+  border-color: var(--input-error-border);
+  box-shadow: var(--input-error-shadow);
+}
+
+.input--variant-error:focus {
+  border-color: var(--input-error-border);
+  box-shadow: var(--input-error-shadow);
+}
+
+.input--variant-success {
+  background-color: var(--input-success-background);
+  color: var(--input-success-text);
+  border-color: var(--input-success-border);
+  box-shadow: var(--input-success-shadow);
+}
+
+.input--variant-success:focus {
+  border-color: var(--input-success-border);
+  box-shadow: var(--input-success-shadow);
+}
+
+.input--variant-warning {
+  background-color: var(--input-warning-background);
+  color: var(--input-warning-text);
+  border-color: var(--input-warning-border);
+  box-shadow: var(--input-warning-shadow);
+}
+
+.input--variant-warning:focus {
+  border-color: var(--input-warning-border);
+  box-shadow: var(--input-warning-shadow);
+}
+
+.input--variant-loading {
+  background-color: var(--input-loading-background);
+  color: var(--input-loading-text);
+  border-color: var(--input-loading-border);
+  box-shadow: var(--input-loading-shadow);
+}
+
+/* Input Size Modifiers */
+.input--size-sm {
+  min-height: var(--input-height-sm);
+  padding: var(--input-padding-y-sm) var(--input-padding-x-sm);
+  font-size: var(--input-font-size-sm);
+}
+
+.input--size-md {
+  min-height: var(--input-height-md);
+  padding: var(--input-padding-y-md) var(--input-padding-x-md);
+  font-size: var(--input-font-size-md);
+}
+
+.input--size-lg {
+  min-height: var(--input-height-lg);
+  padding: var(--input-padding-y-lg) var(--input-padding-x-lg);
+  font-size: var(--input-font-size-lg);
+}
+
+.input--size-xl {
+  min-height: var(--input-height-xl);
+  padding: var(--input-padding-y-xl) var(--input-padding-x-xl);
+  font-size: var(--input-font-size-xl);
+}
+
+/* Input State Modifiers */
+.input--state-normal {
+  background-color: var(--input-normal-background);
+  color: var(--input-normal-text);
+  border-color: var(--input-normal-border);
+  box-shadow: var(--input-normal-shadow);
+}
+
+.input--state-focused {
+  background-color: var(--input-focused-background);
+  color: var(--input-focused-text);
+  border-color: var(--input-focused-border);
+  box-shadow: var(--input-focused-shadow);
+}
+
+.input--state-disabled {
+  background-color: var(--input-disabled-background);
+  color: var(--input-disabled-text);
+  border-color: var(--input-disabled-border);
+  box-shadow: var(--input-disabled-shadow);
+  opacity: var(--input-disabled-opacity);
+  cursor: var(--input-disabled-cursor);
+}
+
+.input--state-readonly {
+  background-color: var(--input-readonly-background);
+  color: var(--input-readonly-text);
+  border-color: var(--input-readonly-border);
+  box-shadow: var(--input-readonly-shadow);
+  cursor: var(--input-readonly-cursor);
+}
+
+/* Input Type Specific Styles */
+.input[type="file"] {
+  padding: var(--input-padding-y-md) var(--input-padding-x-md);
+  line-height: var(--input-line-height-compact);
+}
+
+.input[type="file"]::-webkit-file-upload-button {
+  background-color: var(--input-file-button-background);
+  color: var(--input-file-button-text);
+  border: var(--input-border-width-normal) solid var(--input-file-button-border);
+  padding: var(--input-file-button-padding);
+  font-size: var(--input-file-button-font-size);
+  font-weight: var(--input-file-button-font-weight);
+  border-radius: var(--input-file-button-border-radius);
+  transition: var(--input-file-button-transition);
+  cursor: pointer;
+  margin-right: var(--cs-spacing-scale-md);
+}
+
+.input[type="file"]::-webkit-file-upload-button:hover {
+  background-color: var(--input-file-button-hover-background);
+  border-color: var(--input-file-button-hover-border);
+}
+
+.input[type="file"]::-webkit-file-upload-button:active {
+  transform: scale(var(--cs-scale-98));
+}
+
+.input[type="search"] {
+  padding-left: calc(var(--input-padding-x-md) + var(--cs-spacing-scale-lg));
+}
+
+.input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  height: var(--cs-spacing-scale-lg);
+  width: var(--cs-spacing-scale-lg);
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
+  background-size: contain;
+  cursor: pointer;
+}
+
+/* Input Validation States */
+.input[aria-invalid="true"] {
+  border-color: var(--cs-colors-semantic-error);
+  background-color: var(--cs-colors-semantic-error-alpha-5);
+}
+
+.input[aria-invalid="true"]:focus {
+  border-color: var(--cs-colors-semantic-error);
+  box-shadow: var(--cs-shadows-focus-error);
+}
+
+.input[data-valid="true"] {
+  border-color: var(--cs-colors-semantic-success);
+  background-color: var(--cs-colors-semantic-success-alpha-5);
+}
+
+.input[data-valid="true"]:focus {
+  border-color: var(--cs-colors-semantic-success);
+  box-shadow: var(--cs-shadows-focus-success);
+}
+
+/* Input Loading State */
+.input[data-loading="true"] {
+  position: relative;
+  color: transparent;
+}
+
+.input[data-loading="true"]::after {
+  content: '';
+  position: absolute;
+  top: var(--cs-percentage-50);
+  left: var(--cs-percentage-50);
+  transform: translate(calc(-1 * var(--cs-percentage-50)), calc(-1 * var(--cs-percentage-50)));
+  width: var(--cs-spacing-scale-lg);
+  height: var(--cs-spacing-scale-lg);
+  border: var(--input-border-width-thick) solid var(--cs-colors-border);
+  border-top-color: var(--cs-colors-primary-500);
+  border-radius: var(--cs-border-radius-full);
+  animation: spin var(--input-animation-duration-normal) linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: translate(calc(-1 * var(--cs-percentage-50)), calc(-1 * var(--cs-percentage-50))) rotate(var(--cs-rotation-full));
+  }
+}
+
+/* Input Responsive Design */
+@media (max-width: 767px) {
+  .input {
+    min-height: var(--input-touch-target-min);
+    padding: var(--cs-spacing-scale-md) var(--cs-spacing-scale-lg);
+    font-size: var(--cs-fonts-primary-sizes-base);
+    border-radius: var(--cs-border-radius-lg);
+  }
+  
+  .input--size-sm {
+    min-height: var(--input-touch-target-small);
+    padding: var(--cs-spacing-scale-sm) var(--cs-spacing-scale-md);
+  }
+  
+  .input--size-lg {
+    min-height: var(--input-touch-target-large);
+    padding: var(--cs-spacing-scale-lg) var(--cs-spacing-scale-xl);
+  }
+  
+  .input--size-xl {
+    min-height: var(--input-touch-target-extra-large);
+    padding: var(--cs-spacing-scale-xl) var(--cs-spacing-scale-2xl);
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .input {
+    min-height: var(--input-touch-target-medium);
+    padding: var(--input-padding-y-md) var(--input-padding-x-md);
+    border-radius: var(--input-border-radius);
+  }
+}
+
+@media (min-width: 1024px) {
+  .input:hover:not(:disabled):not(:readonly) {
+    transform: translateY(var(--input-hover-transform-y));
+    box-shadow: var(--cs-shadows-md);
+  }
+  
+  .input:focus:not(:disabled):not(:readonly) {
+    transform: translateY(var(--input-focus-transform-y));
+    box-shadow: var(--cs-shadows-lg-primary);
+  }
+}
+
+/* Input Container Queries */
+@container (max-width: 400px) {
+  .input {
+    min-height: var(--input-touch-target-min);
+    padding: var(--cs-spacing-scale-md) var(--cs-spacing-scale-lg);
+  }
+}
+
+@container (min-width: 401px) and (max-width: 800px) {
+  .input {
+    min-height: var(--input-touch-target-medium);
+    padding: var(--input-padding-y-md) var(--input-padding-x-md);
+  }
+}
+
+@container (min-width: 801px) {
+  .input {
+    min-height: var(--input-height-md);
+    padding: var(--input-padding-y-md) var(--input-padding-x-md);
+  }
+}
+
+/* Input Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .input {
+    background-color: var(--cs-modes-dark-colors-surface-background);
+    border-color: var(--cs-modes-dark-colors-surface-border);
+    color: var(--cs-modes-dark-colors-text-primary);
+  }
+  
+  .input::placeholder {
+    color: var(--cs-modes-dark-colors-text-muted);
+  }
+  
+  .input:focus {
+    border-color: var(--cs-modes-dark-colors-primary-500);
+    box-shadow: var(--cs-shadows-focus-dark);
+  }
+}
+
+/* Input High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .input {
+    border-width: var(--input-border-width-thick);
+  }
+  
+  .input:focus {
+    outline-width: var(--input-border-width-focus);
+    outline-offset: var(--input-border-width-normal);
+  }
+}
+
+/* Input Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .input {
+    transition: none;
+  }
+  
+  .input:hover,
+  .input:focus,
+  .input:active {
+    transform: none;
+  }
+}
+
+/* Input Print Styles */
+@media print {
+  .input {
+    border: var(--input-border-width-normal) solid var(--input-print-border);
+    background: var(--input-print-background);
+    color: var(--input-print-text);
+    box-shadow: none;
+  }
+  
+  .input:focus {
+    outline: var(--input-border-width-thick) solid var(--input-print-border);
+    outline-offset: var(--input-border-width-thick);
+  }
+}
+
+/* Input Showcase Styles for Storybook */
+.input-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--input-showcase-gap);
+  max-width: 100%;
+}
+
+.input-variant-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--input-variant-showcase-gap);
+}
+
+.input-variant-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-md);
+}
+
+.input-variant-title {
+  font-size: var(--input-showcase-title-size);
+  font-weight: var(--input-showcase-title-weight);
+  color: var(--cs-colors-text-primary);
+  margin: 0;
+}
+
+.input-variant-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--cs-spacing-scale-50), 1fr));
+  gap: var(--input-showcase-grid-gap);
+}
+
+.input-variant-description {
+  font-size: var(--input-showcase-description-size);
+  color: var(--input-showcase-description-color);
+  margin: 0;
+  line-height: var(--cs-fonts-primary-line-heights-relaxed);
+}
+
+.input-size-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--input-size-showcase-gap);
+}
+
+.input-size-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-md);
+}
+
+.input-size-title {
+  font-size: var(--input-showcase-title-size);
+  font-weight: var(--input-showcase-title-weight);
+  color: var(--cs-colors-text-primary);
+  margin: 0;
+}
+
+.input-size-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--cs-spacing-scale-37-5), 1fr));
+  gap: var(--input-showcase-grid-gap);
+}
+
+.input-size-description {
+  font-size: var(--input-showcase-description-size);
+  color: var(--input-showcase-description-color);
+  margin: 0;
+  line-height: var(--cs-fonts-primary-line-heights-relaxed);
+}
+
+.input-state-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--input-state-showcase-gap);
+}
+
+.input-state-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-md);
+}
+
+.input-state-title {
+  font-size: var(--input-showcase-title-size);
+  font-weight: var(--input-showcase-title-weight);
+  color: var(--cs-colors-text-primary);
+  margin: 0;
+}
+
+.input-state-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--cs-spacing-scale-50), 1fr));
+  gap: var(--input-showcase-grid-gap);
+}
+
+.input-state-description {
+  font-size: var(--input-showcase-description-size);
+  color: var(--input-showcase-description-color);
+  margin: 0;
+  line-height: var(--cs-fonts-primary-line-heights-relaxed);
+}
+
+.input-responsive-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--input-responsive-showcase-gap);
+}
+
+.input-responsive-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-md);
+}
+
+.input-responsive-title {
+  font-size: var(--input-showcase-title-size);
+  font-weight: var(--input-showcase-title-weight);
+  color: var(--cs-colors-text-primary);
+  margin: 0;
+}
+
+.input-responsive-description {
+  font-size: var(--input-showcase-description-size);
+  color: var(--input-showcase-description-color);
+  margin: 0;
+  line-height: var(--cs-fonts-primary-line-heights-relaxed);
+}
+
+.input-responsive-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--input-responsive-grid-gap);
+  max-width: var(--input-responsive-grid-max-width);
+}
+
+@media (min-width: 768px) {
+  .input-responsive-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 1024px) {
+  .input-responsive-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* Input Form Layout Styles */
+.input-form-layout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-lg);
+  max-width: var(--cs-spacing-scale-100);
+}
+
+.input-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-sm);
+}
+
+.input-form-label {
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  font-weight: var(--cs-fonts-primary-weights-medium);
+  color: var(--cs-colors-text-primary);
+}
+
+.input-form-helper {
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  color: var(--cs-colors-text-muted);
+}
+
+.input-form-error {
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  color: var(--cs-colors-semantic-error);
+}
+
+/* Input Icon Styles */
+.input-with-icon {
+  position: relative;
+}
+
+.input-with-icon .input {
+  padding-left: calc(var(--input-padding-x-md) + var(--cs-spacing-scale-xl));
+}
+
+.input-icon {
+  position: absolute;
+  left: var(--input-padding-x-md);
+  top: var(--cs-percentage-50);
+  transform: translateY(calc(-1 * var(--cs-percentage-50)));
+  width: var(--cs-spacing-scale-lg);
+  height: var(--cs-spacing-scale-lg);
+  color: var(--cs-colors-text-muted);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.input:focus + .input-icon {
+  color: var(--cs-colors-primary-500);
+}
+
+/* Input Group Styles */
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-md);
+}
+
+.input-group-row {
+  display: flex;
+  gap: var(--cs-spacing-scale-md);
+}
+
+.input-group-row .input {
+  flex: 1;
+}
+
+@media (max-width: 767px) {
+  .input-group-row {
+    flex-direction: column;
+    gap: var(--cs-spacing-scale-sm);
+  }
+  
+  .input-group-row .input {
+    width: var(--cs-percentage-full);
+  }
+}
+
+/* Input Animation Keyframes */
+@keyframes inputFocus {
+  0% {
+    transform: scale(1);
+    box-shadow: var(--cs-shadows-focus-start);
+  }
+  50% {
+    transform: scale(var(--cs-scale-102));
+    box-shadow: var(--cs-shadows-focus-mid);
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: var(--cs-shadows-focus-end);
+  }
+}
+
+@keyframes inputError {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(calc(-1 * var(--cs-spacing-scale-1)));
+  }
+  75% {
+    transform: translateX(var(--cs-spacing-scale-1));
+  }
+}
+
+/* Input Error Animation */
+.input--variant-error:focus {
+  animation: inputError var(--input-animation-duration-fast) ease-in-out;
+}
+
+/* Input Success Animation */
+.input--variant-success:focus {
+  animation: inputFocus var(--input-animation-duration-fast) ease-in-out;
+}
+
+/* Input Loading Animation */
+.input--variant-loading::after {
+  animation: spin var(--input-animation-duration-normal) linear infinite;
+}
+
+/* Input Accessibility Enhancements */
+.input:focus-visible {
+  outline: var(--input-focus-visible-outline);
+  outline-offset: var(--input-focus-visible-offset);
+}
+
+.input[aria-describedby] {
+  border-color: var(--cs-colors-primary-500);
+}
+
+.input[aria-invalid="true"] {
+  border-color: var(--cs-colors-semantic-error);
+}
+
+.input[aria-required="true"] {
+  border-left: var(--input-border-width-focus) solid var(--cs-colors-primary-500);
+}
+
+/* Input Touch Target Optimization */
+@media (pointer: coarse) {
+  .input {
+    min-height: var(--input-touch-target-min);
+    min-width: var(--input-touch-target-min);
+  }
+  
+  .input[type="file"]::-webkit-file-upload-button {
+    min-height: var(--input-touch-target-min);
+    min-width: var(--input-touch-target-min);
+  }
+}
+
+/* Input High DPI Display Support */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .input {
+    border-width: var(--input-border-width-thin);
+  }
+  
+  .input:focus {
+    border-width: var(--input-border-width-normal);
+  }
+}