/* ==========================================================================
   SOCIAL SQUARE TYPOGRAPHY
   ========================================================================== */

/* Headings */
h1, .ss-h1 { font-family: var(--ss-font-heading); font-size: var(--ss-type-h1); font-weight: var(--ss-weight-bold); line-height: 1.2; letter-spacing: -0.02em; color: var(--ss-text-primary); }
h2, .ss-h2 { font-family: var(--ss-font-heading); font-size: var(--ss-type-h2); font-weight: var(--ss-weight-bold); line-height: 1.25; letter-spacing: -0.01em; color: var(--ss-text-primary); }
h3, .ss-h3 { font-family: var(--ss-font-heading); font-size: var(--ss-type-h3); font-weight: var(--ss-weight-semibold); line-height: 1.3; letter-spacing: -0.01em; color: var(--ss-text-primary); }
h4, .ss-h4 { font-family: var(--ss-font-heading); font-size: var(--ss-type-h4); font-weight: var(--ss-weight-semibold); line-height: 1.4; color: var(--ss-text-primary); }
h5, .ss-h5 { font-family: var(--ss-font-heading); font-size: var(--ss-type-h5); font-weight: var(--ss-weight-semibold); line-height: 1.4; color: var(--ss-text-primary); }
h6, .ss-h6 { font-family: var(--ss-font-heading); font-size: var(--ss-type-h6); font-weight: var(--ss-weight-semibold); line-height: 1.4; letter-spacing: 0.01em; color: var(--ss-text-primary); text-transform: uppercase; }

.ss-hero-text { font-family: var(--ss-font-heading); font-size: var(--ss-type-hero); font-weight: var(--ss-weight-extrabold); line-height: 1.1; letter-spacing: -0.02em; }
.ss-display-text { font-family: var(--ss-font-display); font-size: var(--ss-type-display); font-weight: var(--ss-weight-extrabold); line-height: 1.05; letter-spacing: -0.03em; }

/* Body text */
p { margin-bottom: var(--ss-spacing-md); max-width: 72ch; }
.ss-text-lg { font-size: var(--ss-type-body-lg); line-height: 1.6; }
.ss-text-sm { font-size: var(--ss-type-body-sm); line-height: 1.5; }
.ss-text-caption { font-size: var(--ss-type-caption); line-height: 1.5; letter-spacing: 0.01em; color: var(--ss-text-tertiary); }
.ss-text-micro { font-family: var(--ss-font-ui); font-size: var(--ss-type-micro); font-weight: var(--ss-weight-medium); letter-spacing: 0.02em; color: var(--ss-text-tertiary); }

/* Monospace */
.ss-mono { font-family: var(--ss-font-mono); font-size: var(--ss-type-mono); }
.ss-mono-lg { font-family: var(--ss-font-mono); font-size: var(--ss-type-mono-lg); font-weight: var(--ss-weight-semibold); letter-spacing: -0.01em; }

/* UI text */
.ss-ui-text { font-family: var(--ss-font-ui); font-size: var(--ss-type-ui); font-weight: var(--ss-weight-medium); letter-spacing: 0.01em; }
.ss-ui-text-sm { font-family: var(--ss-font-ui); font-size: var(--ss-type-ui-sm); font-weight: var(--ss-weight-medium); letter-spacing: 0.01em; }

/* Color utilities */
.ss-text-primary { color: var(--ss-text-primary); }
.ss-text-secondary { color: var(--ss-text-secondary); }
.ss-text-tertiary { color: var(--ss-text-tertiary); }
.ss-text-inverse { color: var(--ss-text-inverse); }
.ss-text-link { color: var(--ss-text-link); }
.ss-text-success { color: var(--ss-success-base); }
.ss-text-warning { color: var(--ss-warning-base); }
.ss-text-error { color: var(--ss-error-base); }

/* Overline / label */
.ss-overline {
    font-family: var(--ss-font-ui);
    font-size: var(--ss-type-micro);
    font-weight: var(--ss-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ss-text-tertiary);
}

/* Truncation */
.ss-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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