/* Minimal CSS Framework for Online Bank IFSC */


/* Reset and Base Styles */
*,
::before,
::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-sans);
  line-height: var(--line-height-normal);
  color: var(--color-secondary-800);
  background-color: var(--color-secondary-50);
}

/* Minimal Utility Classes */
/* Margin */
.m-0 { margin: var(--spacing-0); }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-5 { margin: var(--spacing-5); }
.m-6 { margin: var(--spacing-6); }

.mx-0 { margin-left: var(--spacing-0); margin-right: var(--spacing-0); }
.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }
.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
.mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }
.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
.mx-5 { margin-left: var(--spacing-5); margin-right: var(--spacing-5); }
.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }

.my-0 { margin-top: var(--spacing-0); margin-bottom: var(--spacing-0); }
.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.my-5 { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); }
.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }

.mt-0 { margin-top: var(--spacing-0); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }

.mb-0 { margin-bottom: var(--spacing-0); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }

/* Padding */
.p-0 { padding: var(--spacing-0); }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }
.p-6 { padding: var(--spacing-6); }

.px-0 { padding-left: var(--spacing-0); padding-right: var(--spacing-0); }
.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }

.py-0 { padding-top: var(--spacing-0); padding-bottom: var(--spacing-0); }
.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }

.pt-0 { padding-top: var(--spacing-0); }
.pt-1 { padding-top: var(--spacing-1); }
.pt-2 { padding-top: var(--spacing-2); }
.pt-3 { padding-top: var(--spacing-3); }
.pt-4 { padding-top: var(--spacing-4); }
.pt-5 { padding-top: var(--spacing-5); }
.pt-6 { padding-top: var(--spacing-6); }

.pb-0 { padding-bottom: var(--spacing-0); }
.pb-1 { padding-bottom: var(--spacing-1); }
.pb-2 { padding-bottom: var(--spacing-2); }
.pb-3 { padding-bottom: var(--spacing-3); }
.pb-4 { padding-bottom: var(--spacing-4); }
.pb-5 { padding-bottom: var(--spacing-5); }
.pb-6 { padding-bottom: var(--spacing-6); }

/* Width */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* Display */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }

/* Flexbox */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Font Weight */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Font Size */
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }

/* Text Color */
.text-primary-500 { color: var(--color-primary-500); }
.text-secondary-500 { color: var(--color-secondary-500); }
.text-secondary-800 { color: var(--color-secondary-800); }

/* Background Color */
.bg-primary-50 { background-color: var(--color-primary-50); }
.bg-secondary-50 { background-color: var(--color-secondary-50); }
.bg-surface { background-color: var(--surface); }

/* Border Radius */
.rounded-none { border-radius: var(--border-radius-none); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded { border-radius: var(--border-radius); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-2xl { border-radius: var(--border-radius-2xl); }
.rounded-full { border-radius: var(--border-radius-full); }

/* Shadow */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }

/* Transition */
.transition-all { transition: var(--transition-all); }

/* Responsive utilities for mobile */
@media (max-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:w-full { width: 100%; }
}

@media (max-width: 576px) {
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:flex { display: flex; }
  .sm\:w-full { width: 100%; }
  .sm\:p-1 { padding: var(--spacing-1); }
  .sm\:p-2 { padding: var(--spacing-2); }
  .sm\:p-3 { padding: var(--spacing-3); }
  .sm\:m-1 { margin: var(--spacing-1); }
  .sm\:m-2 { margin: var(--spacing-2); }
  .sm\:m-3 { margin: var(--spacing-3); }
}
.text-accent-800 { color: var(--color-accent-800); }
.text-accent-900 { color: var(--color-accent-900); }

.text-success-50 { color: var(--color-success-50); }
.text-success-100 { color: var(--color-success-100); }
.text-success-200 { color: var(--color-success-200); }
.text-success-300 { color: var(--color-success-300); }
.text-success-400 { color: var(--color-success-400); }
.text-success-500 { color: var(--color-success-500); }
.text-success-600 { color: var(--color-success-600); }
.text-success-700 { color: var(--color-success-700); }
.text-success-800 { color: var(--color-success-800); }
.text-success-900 { color: var(--color-success-900); }

.text-warning-50 { color: var(--color-warning-50); }
.text-warning-100 { color: var(--color-warning-100); }
.text-warning-200 { color: var(--color-warning-200); }
.text-warning-300 { color: var(--color-warning-300); }
.text-warning-400 { color: var(--color-warning-400); }
.text-warning-500 { color: var(--color-warning-500); }
.text-warning-600 { color: var(--color-warning-600); }
.text-warning-700 { color: var(--color-warning-700); }
.text-warning-800 { color: var(--color-warning-800); }
.text-warning-900 { color: var(--color-warning-900); }

.text-error-50 { color: var(--color-error-50); }
.text-error-100 { color: var(--color-error-100); }
.text-error-200 { color: var(--color-error-200); }
.text-error-300 { color: var(--color-error-300); }
.text-error-400 { color: var(--color-error-400); }
.text-error-500 { color: var(--color-error-500); }
.text-error-600 { color: var(--color-error-600); }
.text-error-700 { color: var(--color-error-700); }
.text-error-800 { color: var(--color-error-800); }
.text-error-900 { color: var(--color-error-900); }

.text-neutral-50 { color: var(--color-neutral-50); }
.text-neutral-100 { color: var(--color-neutral-100); }
.text-neutral-200 { color: var(--color-neutral-200); }
.text-neutral-300 { color: var(--color-neutral-300); }
.text-neutral-400 { color: var(--color-neutral-400); }
.text-neutral-500 { color: var(--color-neutral-500); }
.text-neutral-600 { color: var(--color-neutral-600); }
.text-neutral-700 { color: var(--color-neutral-700); }
.text-neutral-800 { color: var(--color-neutral-800); }
.text-neutral-900 { color: var(--color-neutral-900); }

/* Background Color */
.bg-primary-50 { background-color: var(--color-primary-50); }
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-primary-200 { background-color: var(--color-primary-200); }
.bg-primary-300 { background-color: var(--color-primary-300); }
.bg-primary-400 { background-color: var(--color-primary-400); }
.bg-primary-500 { background-color: var(--color-primary-500); }
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-primary-700 { background-color: var(--color-primary-700); }
.bg-primary-800 { background-color: var(--color-primary-800); }
.bg-primary-900 { background-color: var(--color-primary-900); }

.bg-secondary-50 { background-color: var(--color-secondary-50); }
.bg-secondary-100 { background-color: var(--color-secondary-100); }
.bg-secondary-200 { background-color: var(--color-secondary-200); }
.bg-secondary-300 { background-color: var(--color-secondary-300); }
.bg-secondary-400 { background-color: var(--color-secondary-400); }
.bg-secondary-500 { background-color: var(--color-secondary-500); }
.bg-secondary-600 { background-color: var(--color-secondary-600); }
.bg-secondary-700 { background-color: var(--color-secondary-700); }
.bg-secondary-800 { background-color: var(--color-secondary-800); }
.bg-secondary-900 { background-color: var(--color-secondary-900); }

.bg-accent-50 { background-color: var(--color-accent-50); }
.bg-accent-100 { background-color: var(--color-accent-100); }
.bg-accent-200 { background-color: var(--color-accent-200); }
.bg-accent-300 { background-color: var(--color-accent-300); }
.bg-accent-400 { background-color: var(--color-accent-400); }
.bg-accent-500 { background-color: var(--color-accent-500); }
.bg-accent-600 { background-color: var(--color-accent-600); }
.bg-accent-700 { background-color: var(--color-accent-700); }
.bg-accent-800 { background-color: var(--color-accent-800); }
.bg-accent-900 { background-color: var(--color-accent-900); }

.bg-success-50 { background-color: var(--color-success-50); }
.bg-success-100 { background-color: var(--color-success-100); }
.bg-success-200 { background-color: var(--color-success-200); }
.bg-success-300 { background-color: var(--color-success-300); }
.bg-success-400 { background-color: var(--color-success-400); }
.bg-success-500 { background-color: var(--color-success-500); }
.bg-success-600 { background-color: var(--color-success-600); }
.bg-success-700 { background-color: var(--color-success-700); }
.bg-success-800 { background-color: var(--color-success-800); }
.bg-success-900 { background-color: var(--color-success-900); }

.bg-warning-50 { background-color: var(--color-warning-50); }
.bg-warning-100 { background-color: var(--color-warning-100); }
.bg-warning-200 { background-color: var(--color-warning-200); }
.bg-warning-300 { background-color: var(--color-warning-300); }
.bg-warning-400 { background-color: var(--color-warning-400); }
.bg-warning-500 { background-color: var(--color-warning-500); }
.bg-warning-600 { background-color: var(--color-warning-600); }
.bg-warning-700 { background-color: var(--color-warning-700); }
.bg-warning-800 { background-color: var(--color-warning-800); }
.bg-warning-900 { background-color: var(--color-warning-900); }

.bg-error-50 { background-color: var(--color-error-50); }
.bg-error-100 { background-color: var(--color-error-100); }
.bg-error-200 { background-color: var(--color-error-200); }
.bg-error-300 { background-color: var(--color-error-300); }
.bg-error-400 { background-color: var(--color-error-400); }
.bg-error-500 { background-color: var(--color-error-500); }
.bg-error-600 { background-color: var(--color-error-600); }
.bg-error-700 { background-color: var(--color-error-700); }
.bg-error-800 { background-color: var(--color-error-800); }
.bg-error-900 { background-color: var(--color-error-900); }

.bg-neutral-50 { background-color: var(--color-neutral-50); }
.bg-neutral-100 { background-color: var(--color-neutral-100); }
.bg-neutral-200 { background-color: var(--color-neutral-200); }
.bg-neutral-300 { background-color: var(--color-neutral-300); }
.bg-neutral-400 { background-color: var(--color-neutral-400); }
.bg-neutral-500 { background-color: var(--color-neutral-500); }
.bg-neutral-600 { background-color: var(--color-neutral-600); }
.bg-neutral-700 { background-color: var(--color-neutral-700); }
.bg-neutral-800 { background-color: var(--color-neutral-800); }
.bg-neutral-900 { background-color: var(--color-neutral-900); }

/* Border Radius */
.rounded-none { border-radius: var(--border-radius-none); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded { border-radius: var(--border-radius); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-2xl { border-radius: var(--border-radius-2xl); }
.rounded-3xl { border-radius: var(--border-radius-3xl); }
.rounded-full { border-radius: var(--border-radius-full); }

/* Shadow */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }
.shadow-none { box-shadow: none; }

/* Transition */
.transition-all { transition: var(--transition-all); }
.transition-colors { transition: var(--transition-colors); }
.transition-bg { transition: var(--transition-bg); }
.transition-border { transition: var(--transition-border); }
.transition-opacity { transition: var(--transition-opacity); }
.transition-shadow { transition: var(--transition-shadow); }
.transition-transform { transition: var(--transition-transform); }

/* Transform */
.transform { transform: translate(0, 0); }
.scale-0 { transform: scale(0); }
.scale-50 { transform: scale(0.5); }
.scale-75 { transform: scale(0.75); }
.scale-90 { transform: scale(0.9); }
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }
.scale-125 { transform: scale(1.25); }
.scale-150 { transform: scale(1.5); }

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:inline-block { display: inline-block; }
  .sm\:inline { display: inline; }
  .sm\:flex { display: flex; }
  .sm\:inline-flex { display: inline-flex; }
  .sm\:grid { display: grid; }
  .sm\:inline-grid { display: inline-grid; }
  .sm\:hidden { display: none; }
  
  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-col { flex-direction: column; }
  .sm\:items-start { align-items: flex-start; }
  .sm\:items-end { align-items: flex-end; }
  .sm\:items-center { align-items: center; }
  .sm\:justify-start { justify-content: flex-start; }
  .sm\:justify-end { justify-content: flex-end; }
  .sm\:justify-center { justify-content: center; }
  .sm\:justify-between { justify-content: space-between; }
  
  .sm\:text-left { text-align: left; }
  .sm\:text-center { text-align: center; }
  .sm\:text-right { text-align: right; }
  
  .sm\:w-full { width: 100%; }
  .sm\:w-auto { width: auto; }
  
  .sm\:p-0 { padding: var(--spacing-0); }
  .sm\:p-1 { padding: var(--spacing-1); }
  .sm\:p-2 { padding: var(--spacing-2); }
  .sm\:p-3 { padding: var(--spacing-3); }
  .sm\:p-4 { padding: var(--spacing-4); }
  .sm\:p-5 { padding: var(--spacing-5); }
  .sm\:p-6 { padding: var(--spacing-6); }
  
  .sm\:m-0 { margin: var(--spacing-0); }
  .sm\:m-1 { margin: var(--spacing-1); }
  .sm\:m-2 { margin: var(--spacing-2); }
  .sm\:m-3 { margin: var(--spacing-3); }
  .sm\:m-4 { margin: var(--spacing-4); }
  .sm\:m-5 { margin: var(--spacing-5); }
  .sm\:m-6 { margin: var(--spacing-6); }
}

@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:inline-block { display: inline-block; }
  .md\:inline { display: inline; }
  .md\:flex { display: flex; }
  .md\:inline-flex { display: inline-flex; }
  .md\:grid { display: grid; }
  .md\:inline-grid { display: inline-grid; }
  .md\:hidden { display: none; }
  
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  .md\:items-start { align-items: flex-start; }
  .md\:items-end { align-items: flex-end; }
  .md\:items-center { align-items: center; }
  .md\:justify-start { justify-content: flex-start; }
  .md\:justify-end { justify-content: flex-end; }
  .md\:justify-center { justify-content: center; }
  .md\:justify-between { justify-content: space-between; }
  
  .md\:text-left { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right { text-align: right; }
  
  .md\:w-full { width: 100%; }
  .md\:w-auto { width: auto; }
  
  .md\:p-0 { padding: var(--spacing-0); }
  .md\:p-1 { padding: var(--spacing-1); }
  .md\:p-2 { padding: var(--spacing-2); }
  .md\:p-3 { padding: var(--spacing-3); }
  .md\:p-4 { padding: var(--spacing-4); }
  .md\:p-5 { padding: var(--spacing-5); }
  .md\:p-6 { padding: var(--spacing-6); }
  
  .md\:m-0 { margin: var(--spacing-0); }
  .md\:m-1 { margin: var(--spacing-1); }
  .md\:m-2 { margin: var(--spacing-2); }
  .md\:m-3 { margin: var(--spacing-3); }
  .md\:m-4 { margin: var(--spacing-4); }
  .md\:m-5 { margin: var(--spacing-5); }
  .md\:m-6 { margin: var(--spacing-6); }
}

@media (min-width: 1024px) {
  .lg\:block { display: block; }
  .lg\:inline-block { display: inline-block; }
  .lg\:inline { display: inline; }
  .lg\:flex { display: flex; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:grid { display: grid; }
  .lg\:inline-grid { display: inline-grid; }
  .lg\:hidden { display: none; }
  
  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-col { flex-direction: column; }
  .lg\:items-start { align-items: flex-start; }
  .lg\:items-end { align-items: flex-end; }
  .lg\:items-center { align-items: center; }
  .lg\:justify-start { justify-content: flex-start; }
  .lg\:justify-end { justify-content: flex-end; }
  .lg\:justify-center { justify-content: center; }
  .lg\:justify-between { justify-content: space-between; }
  
  .lg\:text-left { text-align: left; }
  .lg\:text-center { text-align: center; }
  .lg\:text-right { text-align: right; }
  
  .lg\:w-full { width: 100%; }
  .lg\:w-auto { width: auto; }
  
  .lg\:p-0 { padding: var(--spacing-0); }
  .lg\:p-1 { padding: var(--spacing-1); }
  .lg\:p-2 { padding: var(--spacing-2); }
  .lg\:p-3 { padding: var(--spacing-3); }
  .lg\:p-4 { padding: var(--spacing-4); }
  .lg\:p-5 { padding: var(--spacing-5); }
  .lg\:p-6 { padding: var(--spacing-6); }
  
  .lg\:m-0 { margin: var(--spacing-0); }
  .lg\:m-1 { margin: var(--spacing-1); }
  .lg\:m-2 { margin: var(--spacing-2); }
  .lg\:m-3 { margin: var(--spacing-3); }
  .lg\:m-4 { margin: var(--spacing-4); }
  .lg\:m-5 { margin: var(--spacing-5); }
  .lg\:m-6 { margin: var(--spacing-6); }
}

@media (min-width: 1280px) {
  .xl\:block { display: block; }
  .xl\:inline-block { display: inline-block; }
  .xl\:inline { display: inline; }
  .xl\:flex { display: flex; }
  .xl\:inline-flex { display: inline-flex; }
  .xl\:grid { display: grid; }
  .xl\:inline-grid { display: inline-grid; }
  .xl\:hidden { display: none; }
  
  .xl\:flex-row { flex-direction: row; }
  .xl\:flex-col { flex-direction: column; }
  .xl\:items-start { align-items: flex-start; }
  .xl\:items-end { align-items: flex-end; }
  .xl\:items-center { align-items: center; }
  .xl\:justify-start { justify-content: flex-start; }
  .xl\:justify-end { justify-content: flex-end; }
  .xl\:justify-center { justify-content: center; }
  .xl\:justify-between { justify-content: space-between; }
  
  .xl\:text-left { text-align: left; }
  .xl\:text-center { text-align: center; }
  .xl\:text-right { text-align: right; }
  
  .xl\:w-full { width: 100%; }
  .xl\:w-auto { width: auto; }
  
  .xl\:p-0 { padding: var(--spacing-0); }
  .xl\:p-1 { padding: var(--spacing-1); }
  .xl\:p-2 { padding: var(--spacing-2); }
  .xl\:p-3 { padding: var(--spacing-3); }
  .xl\:p-4 { padding: var(--spacing-4); }
  .xl\:p-5 { padding: var(--spacing-5); }
  .xl\:p-6 { padding: var(--spacing-6); }
  
  .xl\:m-0 { margin: var(--spacing-0); }
  .xl\:m-1 { margin: var(--spacing-1); }
  .xl\:m-2 { margin: var(--spacing-2); }
  .xl\:m-3 { margin: var(--spacing-3); }
  .xl\:m-4 { margin: var(--spacing-4); }
  .xl\:m-5 { margin: var(--spacing-5); }
  .xl\:m-6 { margin: var(--spacing-6); }
}