/**
 * ==========================================================================
 * VERIMUS DESIGN SYSTEM - TYPOGRAPHY UTILITIES
 * ==========================================================================
 * 
 * Utility classes for typography styling.
 * Use these classes for quick, consistent text formatting.
 * 
 * Naming Convention:
 * - .text-{property} for text-specific styles
 * - .font-{property} for font-specific styles
 * 
 * Depends on: _variables.css
 * ==========================================================================
 */

/* ==========================================================================
   FONT SIZE UTILITIES
   ========================================================================== */

.text-2xs { font-size: var(--font-size-2xs) !important; }  /* 10px */
.text-xs  { font-size: var(--font-size-xs) !important; }   /* 12px */
.text-sm  { font-size: var(--font-size-sm) !important; }   /* 14px */
.text-base { font-size: var(--font-size-base) !important; } /* 16px */
.text-lg  { font-size: var(--font-size-lg) !important; }   /* 18px */
.text-xl  { font-size: var(--font-size-xl) !important; }   /* 20px */
.text-2xl { font-size: var(--font-size-2xl) !important; }  /* 24px */
.text-3xl { font-size: var(--font-size-3xl) !important; }  /* 30px */
.text-4xl { font-size: var(--font-size-4xl) !important; }  /* 36px */
.text-5xl { font-size: var(--font-size-5xl) !important; }  /* 48px */

/* ==========================================================================
   FONT WEIGHT UTILITIES
   ========================================================================== */

.font-light     { font-weight: var(--font-weight-light) !important; }     /* 300 */
.font-normal    { font-weight: var(--font-weight-normal) !important; }    /* 400 */
.font-medium    { font-weight: var(--font-weight-medium) !important; }    /* 500 */
.font-semibold  { font-weight: var(--font-weight-semibold) !important; }  /* 600 */
.font-bold      { font-weight: var(--font-weight-bold) !important; }      /* 700 */
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; } /* 800 */

/* ==========================================================================
   LINE HEIGHT UTILITIES
   ========================================================================== */

.leading-none    { line-height: var(--line-height-none) !important; }    /* 1 */
.leading-tight   { line-height: var(--line-height-tight) !important; }   /* 1.25 */
.leading-snug    { line-height: var(--line-height-snug) !important; }    /* 1.375 */
.leading-normal  { line-height: var(--line-height-normal) !important; }  /* 1.5 */
.leading-relaxed { line-height: var(--line-height-relaxed) !important; } /* 1.625 */
.leading-loose   { line-height: var(--line-height-loose) !important; }   /* 2 */

/* ==========================================================================
   TEXT COLOR UTILITIES
   ========================================================================== */

/* Semantic colors */
.text-primary   { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted) !important; }
.text-disabled  { color: var(--text-disabled) !important; }
.text-inverse   { color: var(--text-inverse) !important; }

/* Brand colors */
.text-brand     { color: var(--color-primary) !important; }
.text-charcoal  { color: var(--color-secondary) !important; }

/* Status colors */
.text-success   { color: var(--color-success) !important; }
.text-error     { color: var(--color-error) !important; }
.text-danger    { color: var(--color-error) !important; } /* Alias */
.text-warning   { color: var(--color-warning) !important; }
.text-info      { color: var(--color-info) !important; }

/* Grayscale */
.text-black     { color: var(--gray-950) !important; }
.text-gray-900  { color: var(--gray-900) !important; }
.text-gray-800  { color: var(--gray-800) !important; }
.text-gray-700  { color: var(--gray-700) !important; }
.text-gray-600  { color: var(--gray-600) !important; }
.text-gray-500  { color: var(--gray-500) !important; }
.text-gray-400  { color: var(--gray-400) !important; }
.text-gray-300  { color: var(--gray-300) !important; }
.text-white     { color: var(--white) !important; }

/* Link color */
.text-link      { color: var(--text-link) !important; }
.text-link:hover { color: var(--text-link-hover) !important; }

/* ==========================================================================
   TEXT ALIGNMENT UTILITIES
   ========================================================================== */

.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Responsive text alignment */
@media (min-width: 768px) {
  .md\:text-left   { text-align: left !important; }
  .md\:text-center { text-align: center !important; }
  .md\:text-right  { text-align: right !important; }
}

@media (min-width: 1024px) {
  .lg\:text-left   { text-align: left !important; }
  .lg\:text-center { text-align: center !important; }
  .lg\:text-right  { text-align: right !important; }
}

/* ==========================================================================
   TEXT DECORATION UTILITIES
   ========================================================================== */

.underline       { text-decoration: underline !important; }
.overline        { text-decoration: overline !important; }
.line-through    { text-decoration: line-through !important; }
.no-underline    { text-decoration: none !important; }

/* Underline offset and color */
.underline-offset-1 { text-underline-offset: 1px !important; }
.underline-offset-2 { text-underline-offset: 2px !important; }
.underline-offset-4 { text-underline-offset: 4px !important; }

/* ==========================================================================
   TEXT TRANSFORM UTILITIES
   ========================================================================== */

.uppercase   { text-transform: uppercase !important; }
.lowercase   { text-transform: lowercase !important; }
.capitalize  { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

/* ==========================================================================
   TEXT OVERFLOW UTILITIES
   ========================================================================== */

.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.text-ellipsis { text-overflow: ellipsis !important; }
.text-clip     { text-overflow: clip !important; }

/* Multi-line truncation */
.line-clamp-1 {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.line-clamp-3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ==========================================================================
   WHITESPACE UTILITIES
   ========================================================================== */

.whitespace-normal  { white-space: normal !important; }
.whitespace-nowrap  { white-space: nowrap !important; }
.whitespace-pre     { white-space: pre !important; }
.whitespace-pre-line { white-space: pre-line !important; }
.whitespace-pre-wrap { white-space: pre-wrap !important; }

/* ==========================================================================
   WORD BREAK UTILITIES
   ========================================================================== */

.break-normal { 
  overflow-wrap: normal !important; 
  word-break: normal !important; 
}
.break-words  { overflow-wrap: break-word !important; }
.break-all    { word-break: break-all !important; }

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

.tracking-tighter { letter-spacing: -0.05em !important; }
.tracking-tight   { letter-spacing: -0.025em !important; }
.tracking-normal  { letter-spacing: 0 !important; }
.tracking-wide    { letter-spacing: 0.025em !important; }
.tracking-wider   { letter-spacing: 0.05em !important; }
.tracking-widest  { letter-spacing: 0.1em !important; }

/* ==========================================================================
   FONT STYLE UTILITIES
   ========================================================================== */

.italic     { font-style: italic !important; }
.not-italic { font-style: normal !important; }

/* ==========================================================================
   VERTICAL ALIGNMENT UTILITIES
   ========================================================================== */

.align-baseline    { vertical-align: baseline !important; }
.align-top         { vertical-align: top !important; }
.align-middle      { vertical-align: middle !important; }
.align-bottom      { vertical-align: bottom !important; }
.align-text-top    { vertical-align: text-top !important; }
.align-text-bottom { vertical-align: text-bottom !important; }

/* ==========================================================================
   DARK MODE TYPOGRAPHY OVERRIDES
   ========================================================================== */

.dark-mode .text-primary   { color: var(--dark-text-primary) !important; }
.dark-mode .text-secondary { color: var(--dark-text-secondary) !important; }
.dark-mode .text-muted     { color: var(--dark-text-muted) !important; }