/* ============================================================
   typography.css — Baú de Matrizes
   Hierarquia de texto, fonte base, utilitários tipográficos.
   Depende de: design-system.css (variáveis)
   ============================================================ */

/* ----------------------------------------------------------
   BASE — corpo do documento
---------------------------------------------------------- */
body {
    font-family:      var(--font-family-base);
    font-size:        var(--font-size-base);
    font-weight:      var(--font-weight-normal);
    line-height:      var(--line-height-base);
    color:            var(--color-text-primary);
    background-color: var(--color-bg-body);
    -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------
   LINKS
---------------------------------------------------------- */
a {
    color:           var(--color-text-link);
    text-decoration: none;
    transition:      color var(--transition-base);
}
a:hover {
    color: var(--color-primary-hover);
}

/* ----------------------------------------------------------
   HEADINGS — hierarquia clara H1 → H6
   Regra: nunca pule níveis. Use H1 uma vez por página.
---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    color:         var(--color-text-secondary);
    line-height:   var(--line-height-tight);
    margin-top:    0;
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size:   var(--font-size-4xl);   /* 36px */
    font-weight: var(--font-weight-bold);
}
h2 {
    font-size:   var(--font-size-3xl);   /* 30px */
    font-weight: var(--font-weight-semibold);
}
h3 {
    font-size:   var(--font-size-2xl);   /* 24px */
    font-weight: var(--font-weight-semibold);
}
h4 {
    font-size:   var(--font-size-xl);    /* 20px */
    font-weight: var(--font-weight-medium);
}
h5 {
    font-size:   var(--font-size-lg);    /* 18px */
    font-weight: var(--font-weight-medium);
}
h6 {
    font-size:   var(--font-size-base);  /* 16px */
    font-weight: var(--font-weight-medium);
}

/* ----------------------------------------------------------
   PARÁGRAFO E TEXTO AUXILIAR
---------------------------------------------------------- */
p {
    margin-top:    0;
    margin-bottom: var(--spacing-md);
}

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

small,
.text-small {
    font-size: var(--font-size-sm);
}

/* ----------------------------------------------------------
   UTILITÁRIOS — tamanho de fonte
---------------------------------------------------------- */
.text-xs   { font-size: var(--font-size-xs)   !important; }
.text-sm   { font-size: var(--font-size-sm)   !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg   { font-size: var(--font-size-lg)   !important; }
.text-xl   { font-size: var(--font-size-xl)   !important; }
.text-2xl  { font-size: var(--font-size-2xl)  !important; }
.text-3xl  { font-size: var(--font-size-3xl)  !important; }
.text-4xl  { font-size: var(--font-size-4xl)  !important; }

/* ----------------------------------------------------------
   UTILITÁRIOS — cor de texto
   Nota: .text-orange continua em components.css (compat)
---------------------------------------------------------- */
.text-primary   { color: var(--color-primary)        !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted     { color: var(--color-text-muted)     !important; }
.text-inverted  { color: var(--color-text-inverted)  !important; }
.text-success   { color: var(--color-success)        !important; }
.text-warning   { color: var(--color-warning)        !important; }
.text-error,
.text-danger    { color: var(--color-error)          !important; }
.text-info      { color: var(--color-info)           !important; }

/* ----------------------------------------------------------
   UTILITÁRIOS — peso da fonte
---------------------------------------------------------- */
.font-light    { font-weight: var(--font-weight-light)    !important; }
.font-normal   { font-weight: var(--font-weight-normal)   !important; }
.font-medium   { font-weight: var(--font-weight-medium)   !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold     { font-weight: var(--font-weight-bold)     !important; }

/* ----------------------------------------------------------
   UTILITÁRIOS — alinhamento
---------------------------------------------------------- */
.text-left   { text-align: left   !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right  !important; }

/* ----------------------------------------------------------
   UTILITÁRIOS — transformação
---------------------------------------------------------- */
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }

/* ----------------------------------------------------------
   UTILITÁRIOS — decoração
---------------------------------------------------------- */
.text-underline    { text-decoration: underline    !important; }
.text-no-underline { text-decoration: none         !important; }
.text-truncate {
    overflow:      hidden;
    white-space:   nowrap;
    text-overflow: ellipsis;
}

/* ----------------------------------------------------------
   UTILITÁRIOS — altura de linha
---------------------------------------------------------- */
.leading-tight   { line-height: var(--line-height-tight)   !important; }
.leading-base    { line-height: var(--line-height-base)    !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }