/*
 * Ajus Typography System
 * Purpose: exclusive, responsive typography bundle classes for common UI/content cases.
 * Scope: only typography-related properties (font, size, line-height, weight, color, text decoration, letter spacing, alignment, text transform, hover color).
 * Naming: all classes prefixed with `ajus-` to avoid conflicts.
 */

/* =========================================================
   1. Base semantic element typography
   ========================================================= */

h1,
.ajus-h1 {
    font-size: clamp(1.7rem, 3vw, 2.25rem);
    line-height: 1.14;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
}

h2,
.ajus-h2 {
    font-size: clamp(1.45rem, 2.5vw, 1.875rem);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--color-text-main);
}

h3,
.ajus-h3 {
    font-size: clamp(1.3rem, 2.2vw, 1.5rem);
    line-height: 1.24;
    font-weight: 700;
    color: var(--color-text-main);
}

h4,
.ajus-h4 {
    font-size: clamp(1.15rem, 1.8vw, 1.25rem);
    line-height: 1.3;
    font-weight: 600;
    color: var(--color-text-main);
}

h5,
.ajus-h5 {
    font-size: clamp(1.02rem, 1.5vw, 1.1rem);
    line-height: 1.35;
    font-weight: 600;
    color: var(--color-text-main);
}

h6,
.ajus-h6 {
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--color-text-main);
}

/* =========================================================
   2. Core text scale
   ========================================================= */

.ajus-display {
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-text-main);
}

.ajus-hero-title {
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--color-text-main);
}

.ajus-hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.5;
    font-weight: 400;
    color: var(--color-text-muted);
}

.ajus-lead {
    font-size: clamp(1.08rem, 1.8vw, 1.3rem);
    line-height: 1.65;
    font-weight: 400;
    color: var(--color-text-main);
}

.ajus-body-lg {
    font-size: 1.06rem;
    line-height: 1.7;
    font-weight: 400;
    color: var(--color-text-main);
}

.ajus-body {
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
    color: var(--color-text-main);
}

.ajus-body-sm {
    font-size: 0.94rem;
    line-height: 1.65;
    font-weight: 400;
    color: var(--color-text-main);
}

.ajus-small {
    font-size: 0.875rem;
    line-height: 1.55;
    font-weight: 400;
    color: var(--color-text-muted);
}

.ajus-caption {
    font-size: 0.8rem;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text-soft);
}

.ajus-overline {
    font-size: 0.76rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

/* =========================================================
   3. Weight and tone helpers
   ========================================================= */

.ajus-light {
    font-weight: 300;
}

.ajus-regular {
    font-weight: 400;
}

.ajus-medium {
    font-weight: 500;
}

.ajus-semibold {
    font-weight: 600;
}

.ajus-bold {
    font-weight: 700;
}

.ajus-extrabold {
    font-weight: 800;
}

.ajus-text-main {
    color: var(--color-text-main);
}

.ajus-text-muted {
    color: var(--color-text-muted);
}

.ajus-text-soft {
    color: var(--color-text-soft);
}

.ajus-text-disabled {
    color: var(--color-text-disabled);
}

.ajus-text-primary {
    color: var(--color-text-primary);
}

.ajus-text-secondary {
    color: var(--color-text-secondary);
}

.ajus-text-accent {
    color: var(--color-text-accent);
}

.ajus-text-success {
    color: var(--color-success);
}

.ajus-text-warning {
    color: var(--color-warning);
}

.ajus-text-danger {
    color: var(--color-danger);
}

.ajus-text-info {
    color: var(--color-info);
}

/* =========================================================
   4. Interactive typography
   ========================================================= */

.ajus-link {
    font-size: inherit;
    line-height: inherit;
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
}

.ajus-link:hover,
.ajus-link:focus {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.ajus-link-muted {
    font-size: inherit;
    line-height: inherit;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
}

.ajus-link-muted:hover,
.ajus-link-muted:focus {
    color: var(--color-text-main);
    text-decoration: underline;
}

.ajus-link-nav {
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
    text-decoration: none;
}

.ajus-link-nav:hover,
.ajus-link-nav:focus {
    color: var(--color-text-primary);
    text-decoration: none;
}

.ajus-link-title {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    color: var(--color-text-main);
    text-decoration: none;
}

.ajus-link-title:hover,
.ajus-link-title:focus {
    color: var(--color-text-primary);
    text-decoration: none;
}

/* =========================================================
   5. Content-oriented bundles
   ========================================================= */

.ajus-blog-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
}

.ajus-blog-subtitle {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.6;
    font-weight: 400;
    color: var(--color-text-muted);
}

.ajus-post-title {
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    line-height: 1.3;
    font-weight: 700;
    color: var(--color-text-main);
}

.ajus-post-title:hover {
    color: var(--color-text-primary);
}

.ajus-forum-title {
    font-size: clamp(1rem, 1.2vw + 0.9rem, 1.12rem);
    line-height: 1.35;
    font-weight: 700;
    color: var(--color-text-main);
}

.ajus-forum-title:hover {
    color: var(--color-text-primary);
}

.ajus-forum-meta {
    font-size: 0.92rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--color-text-soft);
}

.ajus-info-title {
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    line-height: 1.25;
    font-weight: 700;
    color: var(--color-text-main);
}

.ajus-info-text {
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
    color: var(--color-text-muted);
}

.ajus-ui-chip {
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 700;
    color: var(--color-text-main);
}

.ajus-ui-metric-label {
    font-size: 0.72rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}


/* =========================================================
   7. Long-form reading
   ========================================================= */

.ajus-reading {
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 400;
    color: var(--color-text-main);
}

.ajus-reading p,
.ajus-reading li,
.ajus-reading blockquote {
    color: var(--color-text-main);
}

.ajus-reading strong {
    font-weight: 700;
    color: var(--color-text-main);
}

.ajus-reading em {
    font-style: italic;
}

.ajus-reading a {
    color: var(--color-text-primary);
    text-decoration: underline;
}

.ajus-reading a:hover,
.ajus-reading a:focus {
    color: var(--color-primary-hover);
}

.ajus-reading h1,
.ajus-reading h2,
.ajus-reading h3,
.ajus-reading h4,
.ajus-reading h5,
.ajus-reading h6 {
    color: var(--color-text-main);
}

.ajus-reading blockquote {
    font-size: 1.05rem;
    line-height: 1.75;
    font-weight: 500;
    font-style: italic;
    color: var(--color-text-muted);
}

/* =========================================================
   8. Special use cases
   ========================================================= */

.ajus-tab-label {
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.ajus-quote {
    font-size: 1.08rem;
    line-height: 1.75;
    font-weight: 500;
    font-style: italic;
    color: var(--color-text-muted);
}

.ajus-kicker {
    font-size: 0.82rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-primary);
}

.ajus-badge-text {
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-main);
}

.ajus-alert-text {
    font-size: 0.9rem;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-danger);
}

.ajus-stat-number {
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-text-main);
    font-variant-numeric: tabular-nums;
}

.ajus-stat-label {
    font-size: 0.78rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

/* =========================================================
   9. Alignment and transform helpers
   ========================================================= */

.ajus-text-left {
    text-align: left;
}

.ajus-text-center {
    text-align: center;
}

.ajus-text-right {
    text-align: right;
}

.ajus-uppercase {
    text-transform: uppercase;
}

.ajus-lowercase {
    text-transform: lowercase;
}

.ajus-capitalize {
    text-transform: capitalize;
}

.ajus-nowrap {
    white-space: nowrap;
}

/* =========================================================
   10. Compact responsive tuning
   ========================================================= */

@media (max-width: 576px) {
    .ajus-display {
        line-height: 1.02;
    }

    .ajus-hero-title {
        line-height: 1.06;
    }

    .ajus-reading,
    .ajus-body,
    .ajus-body-lg,
    .ajus-info-text {
        line-height: 1.72;
    }
}