/* =========================================================
   TYPOGRAPHY SYSTEM FSM
   Sistema complet i consistent de tipus
   ========================================================= */

/* =========================================================
   TEXT ELEMENT DEFAULTS
   ========================================================= */

h1 {
    font-size: var(--fsm-text-4xl);
    font-weight: var(--fsm-font-bold);
    line-height: var(--fsm-line-tight);
    margin-bottom: var(--fsm-space-lg);
}

h2 {
    font-size: var(--fsm-text-3xl);
    font-weight: var(--fsm-font-bold);
    line-height: var(--fsm-line-tight);
    margin-bottom: var(--fsm-space-md);
}

h3 {
    font-size: var(--fsm-text-2xl);
    font-weight: var(--fsm-font-bold);
    line-height: var(--fsm-line-normal);
    margin-bottom: var(--fsm-space-md);
}

h4 {
    font-size: var(--fsm-text-xl);
    font-weight: var(--fsm-font-semibold);
    line-height: var(--fsm-line-normal);
    margin-bottom: var(--fsm-space-sm);
}

h5 {
    font-size: var(--fsm-text-lg);
    font-weight: var(--fsm-font-semibold);
    line-height: var(--fsm-line-normal);
    margin-bottom: var(--fsm-space-sm);
}

h6 {
    font-size: var(--fsm-text-base);
    font-weight: var(--fsm-font-semibold);
    line-height: var(--fsm-line-normal);
    margin-bottom: var(--fsm-space-sm);
}

p {
    font-size: var(--fsm-text-base);
    line-height: var(--fsm-line-normal);
    margin-bottom: var(--fsm-space-md);
}

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

/* =========================================================
   COMPONENT TYPOGRAPHY HELPERS
   ========================================================= */

.fsm-heading {
    font-size: var(--fsm-text-3xl);
    font-weight: var(--fsm-font-bold);
    line-height: var(--fsm-line-tight);
    margin-bottom: var(--fsm-space-lg);
}

.fsm-subheading {
    font-size: var(--fsm-text-xl);
    font-weight: var(--fsm-font-semibold);
    line-height: var(--fsm-line-normal);
    margin-bottom: var(--fsm-space-md);
}

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

.fsm-caption {
    font-size: var(--fsm-text-xs);
    font-weight: var(--fsm-font-normal);
    line-height: var(--fsm-line-tight);
    color: var(--fsm-text-secondary);
}

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

/* =========================================================
   LINK TYPOGRAPHY
   ========================================================= */

a {
    color: var(--fsm-primary);
    text-decoration: none;
    transition: var(--fsm-transition);
}

a:hover {
    color: var(--fsm-primary-dark);
    text-decoration: underline;
}

/* =========================================================
   CODE TYPOGRAPHY
   ========================================================= */

code,
pre {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: var(--fsm-text-sm);
    line-height: var(--fsm-line-normal);
    background: var(--fsm-background);
    padding: 2px 6px;
    border-radius: var(--fsm-radius-sm);
}

pre {
    padding: var(--fsm-space-md);
    overflow: auto;
    border: 1px solid var(--fsm-border);
}

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

blockquote {
    font-size: var(--fsm-text-lg);
    font-style: italic;
    border-left: 4px solid var(--fsm-primary);
    padding: var(--fsm-space-md) var(--fsm-space-lg);
    background: var(--fsm-primary-light);
    margin: var(--fsm-space-lg) 0;
}

/* =========================================================
   LIST TYPOGRAPHY
   ========================================================= */

ul,
ol {
    margin-bottom: var(--fsm-space-md);
    padding-left: var(--fsm-space-lg);
}

li {
    margin-bottom: var(--fsm-space-sm);
    line-height: var(--fsm-line-normal);
}

/* =========================================================
   TYPOGRAPHY IN COMPONENTS
   ========================================================= */

/* Card Titles */
.fsm-card-title,
.fsm-card h3 {
    font-size: var(--fsm-text-lg);
    font-weight: var(--fsm-font-semibold);
    margin-bottom: var(--fsm-space-md);
}

/* Card Body */
.fsm-card-body {
    font-size: var(--fsm-text-base);
    line-height: var(--fsm-line-normal);
}

/* Button Text */
.fsm-button {
    font-size: var(--fsm-text-base);
    font-weight: var(--fsm-font-semibold);
    line-height: var(--fsm-line-normal);
}

/* KPI Values */
.fsm-kpi-value {
    font-size: var(--fsm-text-4xl);
    font-weight: var(--fsm-font-bold);
}

.fsm-kpi-title {
    font-size: var(--fsm-text-sm);
    font-weight: var(--fsm-font-semibold);
    color: var(--fsm-text-secondary);
}

/* Table Text */
.fsm-table th {
    font-size: var(--fsm-text-sm);
    font-weight: var(--fsm-font-bold);
}

.fsm-table td {
    font-size: var(--fsm-text-base);
}

/* Form Labels */
.fsm-form-label {
    font-size: var(--fsm-text-sm);
    font-weight: var(--fsm-font-semibold);
    margin-bottom: var(--fsm-space-sm);
}

/* Form Inputs */
.fsm-form-input,
.fsm-form-textarea,
.fsm-form-select {
    font-size: var(--fsm-text-base);
    line-height: var(--fsm-line-normal);
}

.fsm-form-input::placeholder {
    color: var(--fsm-text-tertiary);
}

/* Modal Titles */
.fsm-modal-title {
    font-size: var(--fsm-text-2xl);
    font-weight: var(--fsm-font-bold);
    margin-bottom: var(--fsm-space-md);
}

/* Badge Text */
.fsm-badge {
    font-size: var(--fsm-text-xs);
    font-weight: var(--fsm-font-bold);
}

/* =========================================================
   UTILITY CLASSES FOR TYPOGRAPHY CONTROL
   ========================================================= */

.fsm-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

.fsm-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

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

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

.fsm-italic {
    font-style: italic;
}

.fsm-not-italic {
    font-style: normal;
}

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

.fsm-decoration-none {
    text-decoration: none;
}

.fsm-decoration-line-through {
    text-decoration: line-through;
}

.fsm-tracking-tight {
    letter-spacing: -0.02em;
}

.fsm-tracking-wide {
    letter-spacing: 0.08em;
}

.fsm-tracking-wider {
    letter-spacing: 0.16em;
}

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

/* Adjust heading sizes on smaller screens */
@media (max-width: 768px) {
    h1 {
        font-size: var(--fsm-text-3xl);
    }

    h2 {
        font-size: var(--fsm-text-2xl);
    }

    h3 {
        font-size: var(--fsm-text-xl);
    }

    .fsm-heading {
        font-size: var(--fsm-text-2xl);
    }
}