/**
 * CheckToBuild - Typography System
 * Sistema tipográfico inspirado en Vercel/Stripe con especificaciones CheckToBuild
 * 
 * @package CheckToBuild
 * @since 2.0.0
 */

/* ===========================
   BASE TYPOGRAPHY
   =========================== */
body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-dark);
    font-weight: var(--font-weight-normal);
}

/* ===========================
   HEADINGS SCALE - Especificaciones CheckToBuild
   =========================== */

h1, .h1 {
    font-family: var(--font-family-base);
    font-size: clamp(2rem, 5vw, var(--font-size-5xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-4);
    color: var(--title-color-light);
    letter-spacing: var(--letter-spacing-tight);
}

/* H2 - Según especificación: 28px, Montserrat, 700 */
h2, .h2 {
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-4);
    color: var(--title-color-light);
}

h3, .h3 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-3);
    color: var(--title-color-light);
}

h4, .h4 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-3);
    color: var(--title-color-light);
}

h5, .h5 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-2);
    color: var(--title-color-light);
}

h6, .h6 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-2);
    color: var(--title-color-light);
}

/* ===========================
   TÍTULOS SOBRE FONDOS OSCUROS
   =========================== */
.dark-bg h1,
.dark-bg h2,
.dark-bg h3,
.dark-bg h4,
.dark-bg h5,
.dark-bg h6,
.dark-bg .h1,
.dark-bg .h2,
.dark-bg .h3,
.dark-bg .h4,
.dark-bg .h5,
.dark-bg .h6 {
    color: var(--title-color-dark);
}

/* ===========================
   PÁRRAFOS Y TEXTOS - Especificación CheckToBuild
   =========================== */

/* Párrafos después de títulos según especificación */
p {
    margin-bottom: var(--space-4);
    line-height: var(--line-height-after-title);  /* 1.7 según especificación */
    color: var(--text-dark);
    font-family: var(--font-family-secondary);
}

/* Texto grande para leads */
.text-lead {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--text-medium);
    margin-bottom: var(--space-6);
}

/* ===========================
   BODY TEXT
   =========================== */

.text-xs {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.text-sm {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.text-base {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

.text-lg {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
}

.text-xl {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-relaxed);
}

/* ===========================
   FONT WEIGHTS
   =========================== */

.font-light {
    font-weight: var(--font-weight-light);
}

.font-normal {
    font-weight: var(--font-weight-normal);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

.font-extrabold {
    font-weight: var(--font-weight-extrabold);
}

/* ===========================
   TEXT COLORS
   =========================== */

.text-dark {
    color: var(--text-dark);
}

.text-medium {
    color: var(--text-medium);
}

.text-light {
    color: var(--text-light);
}

.text-white {
    color: var(--text-white);
}

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

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

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

.text-error {
    color: var(--error);
}

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

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

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

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

.text-justify {
    text-align: justify;
}

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

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

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

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

/* ===========================
   COMPONENTES TIPOGRÁFICOS
   =========================== */

/* Lead text - intro/destacado */
.lead {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-normal);
    color: var(--text-medium);
}

/* Small text */
.small {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* Badge text */
.badge-text {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
}

/* Code/mono */
.mono {
    font-family: var(--font-family-mono);
    font-size: 0.9em;
}

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

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

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

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

/* ===========================
   LINKS
   =========================== */

.link {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

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

.link-underline {
    text-decoration: underline;
}

.link-no-underline {
    text-decoration: none;
}

.link-no-underline:hover {
    text-decoration: none;
}

/* ===========================
   LISTAS ESTILIZADAS
   =========================== */

.list-disc {
    list-style: disc;
    padding-left: var(--space-6);
}

.list-decimal {
    list-style: decimal;
    padding-left: var(--space-6);
}

.list-none {
    list-style: none;
    padding-left: 0;
}

/* ===========================
   BLOCKQUOTE
   =========================== */

blockquote {
    margin: var(--space-6) 0;
    padding-left: var(--space-6);
    
    font-style: italic;
    color: var(--text-medium);
}

blockquote cite {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    font-style: normal;
    color: var(--text-light);
}

/* ===========================
   RESPONSIVE TYPOGRAPHY
   =========================== */

@media (max-width: 768px) {
    h1, .h1 {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
    }
    
    h2, .h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    
    h3, .h3 {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }
    
    .lead {
        font-size: var(--font-size-base);
    }
}