/**
 * ============================================================================
 * CTT DESIGN SYSTEM - TYPOGRAPHY UTILITY CLASSES
 * ============================================================================
 * 
 * Token-based typography utilities aligned with the new design token system.
 * All utilities reference BASE TEXT STYLE tokens from new-tokens.css
 * 
 * ----------------------------------------------------------------------------
 * TOKEN HIERARCHY
 * ----------------------------------------------------------------------------
 * Typography utilities use the following token hierarchy:
 * 
 * Brand → CORE → BASE TEXT STYLES → Typography Utilities
 * 
 * BASE TEXT STYLE TOKENS (--ctt-base-text-style-*):
 *   These are compound tokens that define complete text styles including:
 *   - family: Font family (Acto CTT)
 *   - size: Font size in pixels
 *   - line-height: Line height in pixels  
 *   - weight: Font weight (400, 500, 700, etc.)
 * 
 * CORE TOKENS (--ctt-core-font-*, --ctt-core-line-height-*):
 *   System-level primitives used to build BASE tokens
 * 
 * ----------------------------------------------------------------------------
 * TYPOGRAPHY CATEGORIES
 * ----------------------------------------------------------------------------
 * 
 * 1. BODY TEXT (.ctt-body-*)
 *    Purpose: General content, paragraphs, descriptions
 *    Variants: Small (s), Medium (m), Large (l)
 *    Font Weight: Regular (400)
 *    Uses: --ctt-base-text-style-body-{sm|md|lg}-*
 * 
 *    Sizes:
 *    - body-s  → 14px / 20px line-height / 400 weight
 *    - body-m  → 16px / 24px line-height / 400 weight
 *    - body-l  → 18px / 28px line-height / 400 weight
 * 
 * 2. LABELS (.ctt-label-*)
 *    Purpose: Form labels, UI labels, metadata, captions
 *    Variants: Small (s), Medium (m), Large (l)
 *    Font Weight: Medium (500)
 *    Uses: --ctt-base-text-style-label-{sm|md|lg}-*
 * 
 *    Sizes:
 *    - label-s  → 12px / 16px line-height / 500 weight
 *    - label-m  → 14px / 20px line-height / 500 weight
 *    - label-l  → 16px / 24px line-height / 500 weight
 * 
 * 3. TITLES (.ctt-title-*)
 *    Purpose: Section headings, card titles, page headers
 *    Variants: Extra Small (xs), Small (s), Medium (m), Large (l), Extra Large (xl)
 *    Font Weight: Medium (500)
 *    Uses: --ctt-base-text-style-heading-title-desktop-{xs|sm|md|lg|xl}-*
 * 
 *    Sizes (Desktop defaults):
 *    - title-xs  → 20px / 28px line-height / 500 weight
 *    - title-s   → 24px / 32px line-height / 500 weight
 *    - title-m   → 28px / 36px line-height / 500 weight
 *    - title-l   → 32px / 40px line-height / 500 weight
 *    - title-xl  → 40px / 48px line-height / 500 weight
 * 
 * 4. DISPLAY TEXT (.ctt-display-*)
 *    Purpose: Hero sections, marketing headlines, large UI elements
 *    Variants: Small (s), Medium (m), Large (l), Extra Large (xl)
 *    Font Weight: Medium (500)
 *    Uses: --ctt-base-text-style-heading-display-desktop-{sm|md|lg|xl}-*
 * 
 *    Sizes (Desktop defaults):
 *    - display-s   → 32px / 40px line-height / 500 weight
 *    - display-m   → 48px / 56px line-height / 500 weight
 *    - display-l   → 60px / 68px line-height / 500 weight
 *    - display-xl  → 72px / 80px line-height / 500 weight
 * 
 * ----------------------------------------------------------------------------
 * RESPONSIVE TYPOGRAPHY
 * ----------------------------------------------------------------------------
 * Device-specific variants automatically adjust at breakpoints:
 * 
 * TITLES:
 * - Desktop (≥1024px): .ctt-title-desktop-{xs|s|m|l|xl}
 * - Tablet (768-1023px): .ctt-title-tablet-{s|m|l}
 * - Mobile (≤767px): .ctt-title-mobile-{s|m}
 * 
 * DISPLAY:
 * - Desktop (≥1024px): .ctt-display-desktop-{s|m|l|xl}
 * - Tablet (768-1023px): .ctt-display-tablet-{s|m}
 * - Mobile (≤767px): .ctt-display-mobile-s
 * 
 * ----------------------------------------------------------------------------
 * ADDITIONAL UTILITIES
 * ----------------------------------------------------------------------------
 * Font Weights: .ctt-font-{thin|light|book|medium|bold|black}
 * Text Alignment: .ctt-text-{left|center|right|justify}
 * Text Decoration: .ctt-{underline|no-underline|line-through}
 * Text Transform: .ctt-{uppercase|lowercase|capitalize|normal-case}
 * Letter Spacing: .ctt-tracking-{tight|normal|wide}
 * Line Height: .ctt-leading-{tight|normal|loose}
 * 
 * ----------------------------------------------------------------------------
 * USAGE EXAMPLES
 * ----------------------------------------------------------------------------
 * ```html
 * <!-- Body Content -->
 * <p class="ctt-body-m">This is a paragraph with medium body text.</p>
 * <p class="ctt-body-l ctt-font-medium">Large body text with medium weight.</p>
 * 
 * <!-- Form Labels -->
 * <label class="ctt-label-m">Email Address</label>
 * <span class="ctt-label-s ctt-text-weak">Optional field</span>
 * 
 * <!-- Page Titles -->
 * <h1 class="ctt-title-xl">Welcome to CTT Design System</h1>
 * <h2 class="ctt-title-l">Section Heading</h2>
 * <h3 class="ctt-title-m">Card Title</h3>
 * 
 * <!-- Hero/Display Text -->
 * <h1 class="ctt-display-xl">Amazing Experience</h1>
 * <h2 class="ctt-display-m ctt-text-center">Centered Display Text</h2>
 * 
 * <!-- Responsive Typography -->
 * <h1 class="ctt-title-desktop-xl ctt-title-tablet-l ctt-title-mobile-m">
 *   Responsive Heading
 * </h1>
 * ```
 * 
 * ----------------------------------------------------------------------------
 * BEST PRACTICES
 * ----------------------------------------------------------------------------
 * 1. Use semantic HTML elements (h1-h6, p, label) with utility classes
 * 2. Prefer typography utilities over custom font-size declarations
 * 3. Use responsive variants for adaptive typography across devices
 * 4. Combine with color utilities (ctt-text-*) for complete styling
 * 5. Maintain heading hierarchy (h1 → h2 → h3) for accessibility
 * 6. Use display text for marketing/hero sections, titles for UI headings
 * 7. Use labels for form controls and UI metadata
 * 8. Body text should be used for all paragraph content
 * 
 * ============================================================================
 */

/* ==========================================================================
   BODY TYPOGRAPHY UTILITIES
   Base tokens for body text (paragraphs, descriptions, content)
   Font: Acto CTT Regular (400) | Responsive line heights
   ========================================================================== */

.ctt-body-s {
  font-family: var(--ctt-base-text-style-body-sm-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-body-sm-size) !important;
  /* 14px */
  line-height: var(--ctt-base-text-style-body-sm-line-height) !important;
  /* 20px */
  font-weight: var(--ctt-base-text-style-body-sm-weight) !important;
  /* 400 */
}

.ctt-body-m {
  font-family: var(--ctt-base-text-style-body-md-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-body-md-size) !important;
  /* 16px */
  line-height: var(--ctt-base-text-style-body-md-line-height) !important;
  /* 24px */
  font-weight: var(--ctt-base-text-style-body-md-weight) !important;
  /* 400 */
}

.ctt-body-l {
  font-family: var(--ctt-base-text-style-body-lg-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-body-lg-size) !important;
  /* 18px */
  line-height: var(--ctt-base-text-style-body-lg-line-height) !important;
  /* 28px */
  font-weight: var(--ctt-base-text-style-body-lg-weight) !important;
  /* 400 */
}

/* ==========================================================================
   LABEL TYPOGRAPHY UTILITIES
   Base tokens for labels (form labels, UI labels, captions, metadata)
   Font: Acto CTT Medium (500) | Tight line heights
   ========================================================================== */

.ctt-label-s {
  font-family: var(--ctt-base-text-style-label-sm-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-label-sm-size) !important;
  /* 12px */
  line-height: var(--ctt-base-text-style-label-sm-line-height) !important;
  /* 16px */
  font-weight: var(--ctt-base-text-style-label-sm-weight) !important;
  /* 500 */
}

.ctt-label-m {
  font-family: var(--ctt-base-text-style-label-md-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-label-md-size) !important;
  /* 14px */
  line-height: var(--ctt-base-text-style-label-md-line-height) !important;
  /* 20px */
  font-weight: var(--ctt-base-text-style-label-md-weight) !important;
  /* 500 */
}

.ctt-label-l {
  font-family: var(--ctt-base-text-style-label-lg-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-label-lg-size) !important;
  /* 16px */
  line-height: var(--ctt-base-text-style-label-lg-line-height) !important;
  /* 24px */
  font-weight: var(--ctt-base-text-style-label-lg-weight) !important;
  /* 500 */
}

/* ==========================================================================
   TITLE TYPOGRAPHY UTILITIES
   Base tokens for titles (headings, section headers, card titles)
   Font: Acto CTT Medium (500) | Uses desktop tokens by default
   ========================================================================== */

.ctt-title-xs {
  font-family: var(--ctt-base-text-style-heading-title-desktop-xs-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-title-desktop-xs-size) !important;
  /* 20px */
  line-height: var(--ctt-base-text-style-heading-title-desktop-xs-line-height) !important;
  /* 28px */
  font-weight: var(--ctt-base-text-style-heading-title-desktop-xs-weight) !important;
  /* 500 */
}

.ctt-title-s {
  font-family: var(--ctt-base-text-style-heading-title-desktop-sm-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-title-desktop-sm-size) !important;
  /* 24px */
  line-height: var(--ctt-base-text-style-heading-title-desktop-sm-line-height) !important;
  /* 32px */
  font-weight: var(--ctt-base-text-style-heading-title-desktop-sm-weight) !important;
  /* 500 */
}

.ctt-title-m {
  font-family: var(--ctt-base-text-style-heading-title-desktop-md-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-title-desktop-md-size) !important;
  /* 28px */
  line-height: var(--ctt-base-text-style-heading-title-desktop-md-line-height) !important;
  /* 36px */
  font-weight: var(--ctt-base-text-style-heading-title-desktop-md-weight) !important;
  /* 500 */
}

.ctt-title-l {
  font-family: var(--ctt-base-text-style-heading-title-desktop-lg-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-title-desktop-lg-size) !important;
  /* 32px */
  line-height: var(--ctt-base-text-style-heading-title-desktop-lg-line-height) !important;
  /* 40px */
  font-weight: var(--ctt-base-text-style-heading-title-desktop-lg-weight) !important;
  /* 500 */
}

.ctt-title-xl {
  font-family: var(--ctt-base-text-style-heading-title-desktop-xl-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-title-desktop-xl-size) !important;
  /* 40px */
  line-height: var(--ctt-base-text-style-heading-title-desktop-xl-line-height) !important;
  /* 48px */
  font-weight: var(--ctt-base-text-style-heading-title-desktop-xl-weight) !important;
  /* 500 */
}

/* ==========================================================================
   DISPLAY TYPOGRAPHY UTILITIES
   Base tokens for display text (heroes, large headlines, marketing)
   Font: Acto CTT Medium (500) | Uses desktop tokens by default
   ========================================================================== */

.ctt-display-s {
  font-family: var(--ctt-base-text-style-heading-display-desktop-sm-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-display-desktop-sm-size) !important;
  /* 32px */
  line-height: var(--ctt-base-text-style-heading-display-desktop-sm-line-height) !important;
  /* 40px */
  font-weight: var(--ctt-base-text-style-heading-display-desktop-sm-weight) !important;
  /* 500 */
}

.ctt-display-m {
  font-family: var(--ctt-base-text-style-heading-display-desktop-md-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-display-desktop-md-size) !important;
  /* 48px */
  line-height: var(--ctt-base-text-style-heading-display-desktop-md-line-height) !important;
  /* 56px */
  font-weight: var(--ctt-base-text-style-heading-display-desktop-md-weight) !important;
  /* 500 */
}

.ctt-display-l {
  font-family: var(--ctt-base-text-style-heading-display-desktop-lg-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-display-desktop-lg-size) !important;
  /* 60px */
  line-height: var(--ctt-base-text-style-heading-display-desktop-lg-line-height) !important;
  /* 68px */
  font-weight: var(--ctt-base-text-style-heading-display-desktop-lg-weight) !important;
  /* 500 */
}

.ctt-display-xl {
  font-family: var(--ctt-base-text-style-heading-display-desktop-xl-family) !important;
  /* Acto CTT */
  font-size: var(--ctt-base-text-style-heading-display-desktop-xl-size) !important;
  /* 72px */
  line-height: var(--ctt-base-text-style-heading-display-desktop-xl-line-height) !important;
  /* 80px */
  font-weight: var(--ctt-base-text-style-heading-display-desktop-xl-weight) !important;
  /* 500 */
}

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY UTILITIES - DESKTOP
   Device-specific typography for desktop screens (min-width: 1024px)
   ========================================================================== */

@media (min-width: 1024px) {

  /* Desktop Title Variants */
  .ctt-title-desktop-s {
    font-family: var(--ctt-base-text-style-heading-title-desktop-sm-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-desktop-sm-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-desktop-sm-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-desktop-sm-weight) !important;
  }

  .ctt-title-desktop-m {
    font-family: var(--ctt-base-text-style-heading-title-desktop-md-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-desktop-md-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-desktop-md-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-desktop-md-weight) !important;
  }

  .ctt-title-desktop-l {
    font-family: var(--ctt-base-text-style-heading-title-desktop-lg-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-desktop-lg-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-desktop-lg-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-desktop-lg-weight) !important;
  }

  .ctt-title-desktop-xl {
    font-family: var(--ctt-base-text-style-heading-title-desktop-xl-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-desktop-xl-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-desktop-xl-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-desktop-xl-weight) !important;
  }

  /* Desktop Display Variants */
  .ctt-display-desktop-s {
    font-family: var(--ctt-base-text-style-heading-display-desktop-sm-family) !important;
    font-size: var(--ctt-base-text-style-heading-display-desktop-sm-size) !important;
    line-height: var(--ctt-base-text-style-heading-display-desktop-sm-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-display-desktop-sm-weight) !important;
  }

  .ctt-display-desktop-m {
    font-family: var(--ctt-base-text-style-heading-display-desktop-md-family) !important;
    font-size: var(--ctt-base-text-style-heading-display-desktop-md-size) !important;
    line-height: var(--ctt-base-text-style-heading-display-desktop-md-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-display-desktop-md-weight) !important;
  }

  .ctt-display-desktop-l {
    font-family: var(--ctt-base-text-style-heading-display-desktop-lg-family) !important;
    font-size: var(--ctt-base-text-style-heading-display-desktop-lg-size) !important;
    line-height: var(--ctt-base-text-style-heading-display-desktop-lg-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-display-desktop-lg-weight) !important;
  }
}

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY UTILITIES - TABLET
   Device-specific typography for tablets (768px - 1023px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

  /* Tablet Title Variants */
  .ctt-title-tablet-s {
    font-family: var(--ctt-base-text-style-heading-title-tablet-sm-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-tablet-sm-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-tablet-sm-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-tablet-sm-weight) !important;
  }

  .ctt-title-tablet-m {
    font-family: var(--ctt-base-text-style-heading-title-tablet-md-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-tablet-md-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-tablet-md-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-tablet-md-weight) !important;
  }

  .ctt-title-tablet-l {
    font-family: var(--ctt-base-text-style-heading-title-tablet-lg-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-tablet-lg-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-tablet-lg-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-tablet-lg-weight) !important;
  }

  /* Tablet Display Variants */
  .ctt-display-tablet-s {
    font-family: var(--ctt-base-text-style-heading-display-tablet-sm-family) !important;
    font-size: var(--ctt-base-text-style-heading-display-tablet-sm-size) !important;
    line-height: var(--ctt-base-text-style-heading-display-tablet-sm-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-display-tablet-sm-weight) !important;
  }

  .ctt-display-tablet-m {
    font-family: var(--ctt-base-text-style-heading-display-tablet-md-family) !important;
    font-size: var(--ctt-base-text-style-heading-display-tablet-md-size) !important;
    line-height: var(--ctt-base-text-style-heading-display-tablet-md-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-display-tablet-md-weight) !important;
  }
}

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY UTILITIES - MOBILE
   Device-specific typography for mobile (max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {

  /* Mobile Title Variants */
  .ctt-title-mobile-s {
    font-family: var(--ctt-base-text-style-heading-title-mobile-sm-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-mobile-sm-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-mobile-sm-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-mobile-sm-weight) !important;
  }

  .ctt-title-mobile-m {
    font-family: var(--ctt-base-text-style-heading-title-mobile-md-family) !important;
    font-size: var(--ctt-base-text-style-heading-title-mobile-md-size) !important;
    line-height: var(--ctt-base-text-style-heading-title-mobile-md-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-title-mobile-md-weight) !important;
  }

  /* Mobile Display Variant */
  .ctt-display-mobile-s {
    font-family: var(--ctt-base-text-style-heading-display-mobile-sm-family) !important;
    font-size: var(--ctt-base-text-style-heading-display-mobile-sm-size) !important;
    line-height: var(--ctt-base-text-style-heading-display-mobile-sm-line-height) !important;
    font-weight: var(--ctt-base-text-style-heading-display-mobile-sm-weight) !important;
  }
}

/* ==========================================================================
   FONT WEIGHT UTILITIES
   Direct access to core font weights for custom styling
   ========================================================================== */

.ctt-font-thin {
  font-weight: var(--ctt-core-font-weight-thin) !important;
}

/* 250 */
.ctt-font-light {
  font-weight: var(--ctt-core-font-weight-light) !important;
}

/* 300 */
.ctt-font-book {
  font-weight: var(--ctt-core-font-weight-book) !important;
}

/* 400 */
.ctt-font-medium {
  font-weight: var(--ctt-core-font-weight-medium) !important;
}

/* 500 */
.ctt-font-bold {
  font-weight: var(--ctt-core-font-weight-bold) !important;
}

/* 700 */
.ctt-font-black {
  font-weight: var(--ctt-core-font-weight-black) !important;
}

/* 900 */

/* ==========================================================================
   LETTER SPACING UTILITIES
   Direct access to core letter spacing values
   ========================================================================== */

.ctt-tracking-tight {
  letter-spacing: var(--ctt-core-letter-spacing-tight) !important;
}

/* -1px */
.ctt-tracking-normal {
  letter-spacing: var(--ctt-core-letter-spacing-normal) !important;
}

/* 0px */
.ctt-tracking-wide {
  letter-spacing: var(--ctt-core-letter-spacing-wide) !important;
}

/* 1px */

/* ==========================================================================
   LINE HEIGHT UTILITIES
   Relative line heights for flexible typography
   ========================================================================== */

.ctt-leading-none {
  line-height: 1 !important;
}

/* 100% */
.ctt-leading-tight {
  line-height: 1.1 !important;
}

/* 110% */
.ctt-leading-normal {
  line-height: 1.25 !important;
}

/* 125% */
.ctt-leading-relaxed {
  line-height: 1.5 !important;
}

/* 150% */
.ctt-leading-loose {
  line-height: 1.75 !important;
}

/* 175% */

/* ==========================================================================
   TEXT ALIGNMENT UTILITIES
   Horizontal text alignment options
   ========================================================================== */

.ctt-text-left {
  text-align: left !important;
}

.ctt-text-center {
  text-align: center !important;
}

.ctt-text-right {
  text-align: right !important;
}

.ctt-text-justify {
  text-align: justify !important;
}

/* ==========================================================================
   TEXT DECORATION UTILITIES
   Underlines, strikethroughs, and decoration removal
   ========================================================================== */

.ctt-underline {
  text-decoration: underline !important;
}

.ctt-no-underline {
  text-decoration: none !important;
}

.ctt-line-through {
  text-decoration: line-through !important;
}

/* ==========================================================================
   TEXT TRANSFORM UTILITIES
   Case transformations for text content
   ========================================================================== */

.ctt-uppercase {
  text-transform: uppercase !important;
}

.ctt-lowercase {
  text-transform: lowercase !important;
}

.ctt-capitalize {
  text-transform: capitalize !important;
}

.ctt-normal-case {
  text-transform: none !important;
}

/* ==========================================================================
   TEXT WRAPPING UTILITIES
   Control text overflow and wrapping behavior
   ========================================================================== */

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

.ctt-text-wrap {
  white-space: normal !important;
}

.ctt-text-nowrap {
  white-space: nowrap !important;
}

.ctt-break-words {
  word-break: break-word !important;
}

.ctt-break-all {
  word-break: break-all !important;
}