/* WrittenExpressions - Utility Classes
 * Utility-first classes for rapid development
 */

/* =============================================================================
   LAYOUT UTILITIES
   ============================================================================= */

/* Flexbox Utilities */
.aa-flex { display: flex; }
.aa-flex-inline { display: inline-flex; }
.aa-flex-col { flex-direction: column; }
.aa-flex-row { flex-direction: row; }
.aa-flex-wrap { flex-wrap: wrap; }
.aa-flex-nowrap { flex-wrap: nowrap; }

/* Flex Alignment */
.aa-items-start { align-items: flex-start; }
.aa-items-center { align-items: center; }
.aa-items-end { align-items: flex-end; }
.aa-items-stretch { align-items: stretch; }

.aa-justify-start { justify-content: flex-start; }
.aa-justify-center { justify-content: center; }
.aa-justify-end { justify-content: flex-end; }
.aa-justify-between { justify-content: space-between; }
.aa-justify-around { justify-content: space-around; }
.aa-justify-evenly { justify-content: space-evenly; }

/* Common Flex Combinations */
.aa-flex-center { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.aa-flex-between { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
}
.aa-flex-start { 
  display: flex; 
  align-items: center; 
  justify-content: flex-start; 
}
.aa-flex-end { 
  display: flex; 
  align-items: center; 
  justify-content: flex-end; 
}

/* Grid Utilities */
.aa-grid { display: grid; }
.aa-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.aa-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aa-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aa-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aa-grid-auto { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: var(--aa-spacing-4); 
}
.aa-grid-auto-sm { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  gap: var(--aa-spacing-3); 
}
.aa-grid-auto-lg { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: var(--aa-spacing-6); 
}

/* Gap Utilities */
.aa-gap-0 { gap: var(--aa-spacing-0); }
.aa-gap-1 { gap: var(--aa-spacing-1); }
.aa-gap-2 { gap: var(--aa-spacing-2); }
.aa-gap-3 { gap: var(--aa-spacing-3); }
.aa-gap-4 { gap: var(--aa-spacing-4); }
.aa-gap-5 { gap: var(--aa-spacing-5); }
.aa-gap-6 { gap: var(--aa-spacing-6); }
.aa-gap-8 { gap: var(--aa-spacing-8); }

/* =============================================================================
   SPACING UTILITIES
   ============================================================================= */

/* Margin Utilities */
.aa-m-0 { margin: var(--aa-spacing-0); }
.aa-m-1 { margin: var(--aa-spacing-1); }
.aa-m-2 { margin: var(--aa-spacing-2); }
.aa-m-3 { margin: var(--aa-spacing-3); }
.aa-m-4 { margin: var(--aa-spacing-4); }
.aa-m-5 { margin: var(--aa-spacing-5); }
.aa-m-6 { margin: var(--aa-spacing-6); }
.aa-m-8 { margin: var(--aa-spacing-8); }
.aa-m-auto { margin: auto; }

/* Margin Top */
.aa-mt-0 { margin-top: var(--aa-spacing-0); }
.aa-mt-1 { margin-top: var(--aa-spacing-1); }
.aa-mt-2 { margin-top: var(--aa-spacing-2); }
.aa-mt-3 { margin-top: var(--aa-spacing-3); }
.aa-mt-4 { margin-top: var(--aa-spacing-4); }
.aa-mt-5 { margin-top: var(--aa-spacing-5); }
.aa-mt-6 { margin-top: var(--aa-spacing-6); }
.aa-mt-8 { margin-top: var(--aa-spacing-8); }
.aa-mt-auto { margin-top: auto; }

/* Margin Bottom */
.aa-mb-0 { margin-bottom: var(--aa-spacing-0); }
.aa-mb-1 { margin-bottom: var(--aa-spacing-1); }
.aa-mb-2 { margin-bottom: var(--aa-spacing-2); }
.aa-mb-3 { margin-bottom: var(--aa-spacing-3); }
.aa-mb-4 { margin-bottom: var(--aa-spacing-4); }
.aa-mb-5 { margin-bottom: var(--aa-spacing-5); }
.aa-mb-6 { margin-bottom: var(--aa-spacing-6); }
.aa-mb-8 { margin-bottom: var(--aa-spacing-8); }
.aa-mb-auto { margin-bottom: auto; }

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

/* Padding X (horizontal) */
.aa-px-0 { padding-left: var(--aa-spacing-0); padding-right: var(--aa-spacing-0); }
.aa-px-1 { padding-left: var(--aa-spacing-1); padding-right: var(--aa-spacing-1); }
.aa-px-2 { padding-left: var(--aa-spacing-2); padding-right: var(--aa-spacing-2); }
.aa-px-3 { padding-left: var(--aa-spacing-3); padding-right: var(--aa-spacing-3); }
.aa-px-4 { padding-left: var(--aa-spacing-4); padding-right: var(--aa-spacing-4); }
.aa-px-5 { padding-left: var(--aa-spacing-5); padding-right: var(--aa-spacing-5); }
.aa-px-6 { padding-left: var(--aa-spacing-6); padding-right: var(--aa-spacing-6); }
.aa-px-8 { padding-left: var(--aa-spacing-8); padding-right: var(--aa-spacing-8); }

/* Padding Y (vertical) */
.aa-py-0 { padding-top: var(--aa-spacing-0); padding-bottom: var(--aa-spacing-0); }
.aa-py-1 { padding-top: var(--aa-spacing-1); padding-bottom: var(--aa-spacing-1); }
.aa-py-2 { padding-top: var(--aa-spacing-2); padding-bottom: var(--aa-spacing-2); }
.aa-py-3 { padding-top: var(--aa-spacing-3); padding-bottom: var(--aa-spacing-3); }
.aa-py-4 { padding-top: var(--aa-spacing-4); padding-bottom: var(--aa-spacing-4); }
.aa-py-5 { padding-top: var(--aa-spacing-5); padding-bottom: var(--aa-spacing-5); }
.aa-py-6 { padding-top: var(--aa-spacing-6); padding-bottom: var(--aa-spacing-6); }
.aa-py-8 { padding-top: var(--aa-spacing-8); padding-bottom: var(--aa-spacing-8); }

/* =============================================================================
   TYPOGRAPHY UTILITIES
   ============================================================================= */

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

/* Font Weights */
.aa-font-light { font-weight: var(--aa-font-weight-light); }
.aa-font-normal { font-weight: var(--aa-font-weight-normal); }
.aa-font-medium { font-weight: var(--aa-font-weight-medium); }
.aa-font-semibold { font-weight: var(--aa-font-weight-semibold); }
.aa-font-bold { font-weight: var(--aa-font-weight-bold); }
.aa-font-extrabold { font-weight: var(--aa-font-weight-extrabold); }

/* Font Sizes */
.aa-text-xs { font-size: var(--aa-font-size-xs); }
.aa-text-sm { font-size: var(--aa-font-size-sm); }
.aa-text-base { font-size: var(--aa-font-size-base); }
.aa-text-lg { font-size: var(--aa-font-size-lg); }
.aa-text-xl { font-size: var(--aa-font-size-xl); }
.aa-text-2xl { font-size: var(--aa-font-size-2xl); }
.aa-text-3xl { font-size: var(--aa-font-size-3xl); }
.aa-text-4xl { font-size: var(--aa-font-size-4xl); }
.aa-text-5xl { font-size: var(--aa-font-size-5xl); }

/* Text Colors */
.aa-text-primary { color: var(--aa-primary); }
.aa-text-primary-light { color: var(--aa-primary-light); }
.aa-text-secondary { color: var(--aa-secondary); }
.aa-text-accent { color: var(--aa-accent); }
.aa-text-success { color: var(--aa-success); }
.aa-text-danger { color: var(--aa-danger); }
.aa-text-warning { color: var(--aa-warning); }
.aa-text-info { color: var(--aa-info); }
.aa-text-white { color: var(--aa-white); }
.aa-text-light { color: var(--aa-light); }
.aa-text-gray { color: var(--aa-dark-gray); }
.aa-text-muted { color: var(--aa-secondary); }
.aa-text-dark { color: var(--aa-dark); }
.aa-text-black { color: var(--aa-black); }

/* Line Heights */
.aa-leading-tight { line-height: var(--aa-line-height-tight); }
.aa-leading-base { line-height: var(--aa-line-height-base); }
.aa-leading-relaxed { line-height: var(--aa-line-height-relaxed); }

/* =============================================================================
   SIZING UTILITIES
   ============================================================================= */

/* Width */
.aa-w-full { width: 100%; }
.aa-w-auto { width: auto; }
.aa-w-fit { width: fit-content; }
.aa-w-1-2 { width: 50%; }
.aa-w-1-3 { width: 33.333333%; }
.aa-w-2-3 { width: 66.666667%; }
.aa-w-1-4 { width: 25%; }
.aa-w-3-4 { width: 75%; }

/* Height */
.aa-h-full { height: 100%; }
.aa-h-auto { height: auto; }
.aa-h-fit { height: fit-content; }
.aa-h-screen { height: 100vh; }

/* Min Height */
.aa-min-h-screen { min-height: 100vh; }
.aa-min-h-full { min-height: 100%; }

/* Max Width */
.aa-max-w-none { max-width: none; }
.aa-max-w-sm { max-width: var(--aa-container-sm); }
.aa-max-w-md { max-width: var(--aa-container-md); }
.aa-max-w-lg { max-width: var(--aa-container-lg); }
.aa-max-w-xl { max-width: var(--aa-container-xl); }
.aa-max-w-2xl { max-width: var(--aa-container-2xl); }
.aa-max-w-full { max-width: 100%; }

/* =============================================================================
   DISPLAY UTILITIES
   ============================================================================= */

.aa-block { display: block; }
.aa-inline { display: inline; }
.aa-inline-block { display: inline-block; }
.aa-hidden { display: none; }

/* =============================================================================
   POSITION UTILITIES
   ============================================================================= */

.aa-relative { position: relative; }
.aa-absolute { position: absolute; }
.aa-fixed { position: fixed; }
.aa-sticky { position: sticky; }

/* =============================================================================
   BACKGROUND UTILITIES
   ============================================================================= */

.aa-bg-primary { background-color: var(--aa-primary); }
.aa-bg-primary-light { background-color: var(--aa-primary-light); }
.aa-bg-secondary { background-color: var(--aa-secondary); }
.aa-bg-accent { background-color: var(--aa-accent); }
.aa-bg-accent-light { background-color: var(--aa-accent-light); }
.aa-bg-success { background-color: var(--aa-success); }
.aa-bg-danger { background-color: var(--aa-danger); }
.aa-bg-warning { background-color: var(--aa-warning); }
.aa-bg-info { background-color: var(--aa-info); }
.aa-bg-white { background-color: var(--aa-bg-card); }
.aa-bg-light { background-color: var(--aa-bg-primary); }
.aa-bg-light-gray { background-color: var(--aa-light-gray); }
.aa-bg-transparent { background-color: transparent; }

/* =============================================================================
   BORDER UTILITIES
   ============================================================================= */

.aa-border { border: 1px solid var(--aa-medium-gray); }
.aa-border-0 { border: none; }
.aa-border-t { border-top: 1px solid var(--aa-medium-gray); }
.aa-border-b { border-bottom: 1px solid var(--aa-medium-gray); }
.aa-border-l { border-left: 1px solid var(--aa-medium-gray); }
.aa-border-r { border-right: 1px solid var(--aa-medium-gray); }

/* Border Colors */
.aa-border-primary { border-color: var(--aa-primary); }
.aa-border-secondary { border-color: var(--aa-secondary); }
.aa-border-accent { border-color: var(--aa-accent); }
.aa-border-gray { border-color: var(--aa-medium-gray); }

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

/* =============================================================================
   SHADOW UTILITIES
   ============================================================================= */

.aa-shadow-none { box-shadow: none; }
.aa-shadow-sm { box-shadow: var(--aa-shadow-sm); }
.aa-shadow { box-shadow: var(--aa-shadow-md); }
.aa-shadow-lg { box-shadow: var(--aa-shadow-lg); }
.aa-shadow-xl { box-shadow: var(--aa-shadow-xl); }

/* =============================================================================
   TRANSITION UTILITIES
   ============================================================================= */

.aa-transition { transition: var(--aa-transition-base); }
.aa-transition-fast { transition: var(--aa-transition-fast); }
.aa-transition-slow { transition: var(--aa-transition-slow); }
.aa-transition-none { transition: none; }