/**
 * WaitN Design System - Typography
 * Text sizes, weights, and styling
 */

/* ========================================
   FONT SIZE UTILITIES
   ======================================== */
.wn-text-xs { font-size: var(--wn-text-xs); }
.wn-text-sm { font-size: var(--wn-text-sm); }
.wn-text-base { font-size: var(--wn-text-base); }
.wn-text-md { font-size: var(--wn-text-md); }
.wn-text-lg { font-size: var(--wn-text-lg); }
.wn-text-xl { font-size: var(--wn-text-xl); }
.wn-text-2xl { font-size: var(--wn-text-2xl); }
.wn-text-3xl { font-size: var(--wn-text-3xl); }
.wn-text-4xl { font-size: var(--wn-text-4xl); }

/* ========================================
   FONT WEIGHT UTILITIES
   ======================================== */
.wn-font-light { font-weight: var(--wn-font-light); }
.wn-font-normal { font-weight: var(--wn-font-normal); }
.wn-font-medium { font-weight: var(--wn-font-medium); }
.wn-font-semibold { font-weight: var(--wn-font-semibold); }
.wn-font-bold { font-weight: var(--wn-font-bold); }

/* ========================================
   LINE HEIGHT UTILITIES
   ======================================== */
.wn-leading-tight { line-height: var(--wn-line-height-tight); }
.wn-leading-normal { line-height: var(--wn-line-height-normal); }
.wn-leading-relaxed { line-height: var(--wn-line-height-relaxed); }

/* ========================================
   TEXT ALIGNMENT
   ======================================== */
.wn-text-left { text-align: left; }
.wn-text-center { text-align: center; }
.wn-text-right { text-align: right; }

/* ========================================
   TEXT TRANSFORM
   ======================================== */
.wn-uppercase { text-transform: uppercase; }
.wn-lowercase { text-transform: lowercase; }
.wn-capitalize { text-transform: capitalize; }
.wn-normal-case { text-transform: none; }

/* ========================================
   TEXT DECORATION
   ======================================== */
.wn-underline { text-decoration: underline; }
.wn-line-through { text-decoration: line-through; }
.wn-no-underline { text-decoration: none; }

/* ========================================
   TEXT OVERFLOW
   ======================================== */
.wn-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

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

/* ========================================
   HEADING STYLES
   ======================================== */
.wn-heading-1 {
    font-size: var(--wn-text-3xl);
    font-weight: var(--wn-font-bold);
    line-height: var(--wn-line-height-tight);
    color: var(--wn-text-primary);
}

.wn-heading-2 {
    font-size: var(--wn-text-2xl);
    font-weight: var(--wn-font-bold);
    line-height: var(--wn-line-height-tight);
    color: var(--wn-text-primary);
}

.wn-heading-3 {
    font-size: var(--wn-text-xl);
    font-weight: var(--wn-font-semibold);
    line-height: var(--wn-line-height-tight);
    color: var(--wn-text-primary);
}

.wn-heading-4 {
    font-size: var(--wn-text-lg);
    font-weight: var(--wn-font-semibold);
    line-height: var(--wn-line-height-normal);
    color: var(--wn-text-primary);
}

/* ========================================
   BODY TEXT STYLES
   ======================================== */
.wn-body {
    font-size: var(--wn-text-base);
    font-weight: var(--wn-font-normal);
    line-height: var(--wn-line-height-normal);
    color: var(--wn-text-primary);
}

.wn-body-sm {
    font-size: var(--wn-text-sm);
    font-weight: var(--wn-font-normal);
    line-height: var(--wn-line-height-normal);
    color: var(--wn-text-secondary);
}

.wn-caption {
    font-size: var(--wn-text-xs);
    font-weight: var(--wn-font-normal);
    line-height: var(--wn-line-height-normal);
    color: var(--wn-text-muted);
}

/* ========================================
   SECTION TITLES
   ======================================== */
.wn-section-title {
    font-size: var(--wn-text-sm);
    font-weight: var(--wn-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wn-text-muted);
    margin-bottom: var(--wn-space-3);
    padding-left: var(--wn-space-1);
}

.wn-section-title-lg {
    font-size: var(--wn-text-md);
    font-weight: var(--wn-font-bold);
    color: var(--wn-text-primary);
    margin-bottom: var(--wn-space-4);
}

/* ========================================
   LABEL STYLES
   ======================================== */
.wn-label {
    font-size: var(--wn-text-sm);
    font-weight: var(--wn-font-medium);
    color: var(--wn-text-secondary);
}

.wn-label-required::after {
    content: ' *';
    color: var(--wn-error);
}

/* ========================================
   LINK STYLES
   ======================================== */
.wn-link {
    color: var(--wn-primary);
    text-decoration: none;
    transition: color var(--wn-transition-fast);
}

.wn-link:hover {
    color: var(--wn-primary-dark);
    text-decoration: underline;
}

/* ========================================
   TEXT COLOR UTILITIES
   ======================================== */
.text-primary { color: var(--wn-primary) !important; }
.text-accent { color: var(--wn-accent) !important; }
.text-success { color: var(--wn-success) !important; }
.text-warning { color: var(--wn-warning) !important; }
.text-error { color: var(--wn-error) !important; }
.text-info { color: var(--wn-info) !important; }
.text-muted { color: var(--wn-text-muted) !important; }
.text-secondary { color: var(--wn-text-secondary) !important; }
.text-white { color: var(--wn-white) !important; }
.text-black { color: var(--wn-black) !important; }