/* ===================================================
   Shared Typography
   Reusable text-style utility classes for all maquetado sections.

   Each class sets font-size and color. Opacity is baked into the
   color via color-mix() against transparent, so ONLY the text is
   faded (unlike the CSS `opacity` property, which would also fade
   child icons/backgrounds).

   These classes carry !important so they override text styles already
   declared in individual section CSS files. To override one of these,
   a section must also use !important.

   Depends on tokens in variables.css:
     --color-primary, --color-text-white, --font-display
   =================================================== */

/* ---------------------------------------------------
   Primary color variants (--color-primary)
   --------------------------------------------------- */

.dv-text-title-xl {
    font-family: var(--font-display) !important;
    /* font-size: 8.3rem !important; */ /* size TBD — confirming with customer */
    color: var(--color-primary, #4a2c2a) !important;
}

.dv-text-title-lg {
    font-family: var(--font-display) !important;
    /* font-size: 5rem !important; */ /* size TBD — confirming with customer */
    line-height: 1.1 !important;
    color: color-mix(in srgb, var(--color-primary, #4a2c2a) 70%, transparent) !important;
}

.dv-text-title-md {
    font-family: var(--font-display) !important;
    /* font-size: 2.875rem !important; */ /* size TBD — confirming with customer */
    color: color-mix(in srgb, var(--color-primary, #4a2c2a) 70%, transparent) !important;
}

.dv-text-title-sm {
    font-family: var(--font-display) !important;
    /* font-size: 2.3rem !important; */ /* size TBD — confirming with customer */
    line-height: 1.3 !important;
    color: color-mix(in srgb, var(--color-primary, #4a2c2a) 60%, transparent) !important;
}

.dv-text-copy-lg {
    font-family: var(--font-display) !important;
    /* font-size: 1.8rem !important; */ /* size TBD — confirming with customer */
    line-height: 1.3 !important;
    color: color-mix(in srgb, var(--color-primary, #4a2c2a) 50%, transparent) !important;
}

.dv-text-copy-md {
    font-family: var(--font-display) !important;
    /* font-size: 1.625rem !important; */ /* size TBD — confirming with customer */
    color: color-mix(in srgb, var(--color-primary, #4a2c2a) 40%, transparent) !important;
}

.dv-text-copy-sm {
    font-family: var(--font-display) !important;
    /* font-size: 1.5rem !important; */ /* size TBD — confirming with customer */
    color: color-mix(in srgb, var(--color-primary, #4a2c2a) 30%, transparent) !important;
}

.dv-text-copy-button {
    font-family: var(--font-display) !important;
    /* font-size: 1.625rem !important; */ /* size TBD — confirming with customer */
    color: var(--color-primary, #4a2c2a) !important;
}

/* ---------------------------------------------------
   White variants (--color-text-white, #FAFAFA)
   --------------------------------------------------- */

.dv-text-title-xl-white {
    font-family: var(--font-display) !important;
    /* font-size: 8.3rem !important; */ /* size TBD — confirming with customer */
    color: var(--color-text-white, #FAFAFA) !important;
}

.dv-text-title-lg-white {
    font-family: var(--font-display) !important;
    /* font-size: 5rem !important; */ /* size TBD — confirming with customer */
    line-height: 1.1 !important;
    color: color-mix(in srgb, var(--color-text-white, #FAFAFA) 70%, transparent) !important;
}

.dv-text-title-md-white {
    font-family: var(--font-display) !important;
    /* font-size: 2.875rem !important; */ /* size TBD — confirming with customer */
    color: color-mix(in srgb, var(--color-text-white, #FAFAFA) 70%, transparent) !important;
}

.dv-text-title-sm-white {
    font-family: var(--font-display) !important;
    /* font-size: 2.3rem !important; */ /* size TBD — confirming with customer */
    line-height: 1.3 !important;
    color: color-mix(in srgb, var(--color-text-white, #FAFAFA) 60%, transparent) !important;
}

.dv-text-copy-lg-white {
    font-family: var(--font-display) !important;
    /* font-size: 1.8rem !important; */ /* size TBD — confirming with customer */
    line-height: 1.3 !important;
    color: color-mix(in srgb, var(--color-text-white, #FAFAFA) 50%, transparent) !important;
}

.dv-text-copy-md-white {
    font-family: var(--font-display) !important;
    /* font-size: 1.625rem !important; */ /* size TBD — confirming with customer */
    color: color-mix(in srgb, var(--color-text-white, #FAFAFA) 40%, transparent) !important;
}

.dv-text-copy-sm-white {
    font-family: var(--font-display) !important;
    /* font-size: 1.5rem !important; */ /* size TBD — confirming with customer */
    color: color-mix(in srgb, var(--color-text-white, #FAFAFA) 30%, transparent) !important;
}

.dv-text-copy-button-white {
    font-family: var(--font-display) !important;
    /* font-size: 1.625rem !important; */ /* size TBD — confirming with customer */
    color: var(--color-text-white, #FAFAFA) !important;
}

/* ===================================================
   Bold text
   Bold elements inside a typography class always render at FULL opacity
   in the base color (the faded opacity of the class does not apply to
   them). Primary-family classes -> solid primary; white-family classes
   -> solid white.

   Covers semantic bold (<b>, <strong>) plus a .dv-text-bold helper for
   markup that is emphasized visually but not semantically bold.
   =================================================== */

/* Primary-family classes -> solid primary */
.dv-text-title-xl b,
.dv-text-title-xl strong,
.dv-text-title-xl .dv-text-bold,
.dv-text-title-lg b,
.dv-text-title-lg strong,
.dv-text-title-lg .dv-text-bold,
.dv-text-title-md b,
.dv-text-title-md strong,
.dv-text-title-md .dv-text-bold,
.dv-text-title-sm b,
.dv-text-title-sm strong,
.dv-text-title-sm .dv-text-bold,
.dv-text-copy-lg b,
.dv-text-copy-lg strong,
.dv-text-copy-lg .dv-text-bold,
.dv-text-copy-md b,
.dv-text-copy-md strong,
.dv-text-copy-md .dv-text-bold,
.dv-text-copy-sm b,
.dv-text-copy-sm strong,
.dv-text-copy-sm .dv-text-bold,
.dv-text-copy-button b,
.dv-text-copy-button strong,
.dv-text-copy-button .dv-text-bold {
    color: var(--color-primary, #4a2c2a) !important;
    font-weight: 500 !important;
}

/* White-family classes -> solid white */
.dv-text-title-xl-white b,
.dv-text-title-xl-white strong,
.dv-text-title-xl-white .dv-text-bold,
.dv-text-title-lg-white b,
.dv-text-title-lg-white strong,
.dv-text-title-lg-white .dv-text-bold,
.dv-text-title-md-white b,
.dv-text-title-md-white strong,
.dv-text-title-md-white .dv-text-bold,
.dv-text-title-sm-white b,
.dv-text-title-sm-white strong,
.dv-text-title-sm-white .dv-text-bold,
.dv-text-copy-lg-white b,
.dv-text-copy-lg-white strong,
.dv-text-copy-lg-white .dv-text-bold,
.dv-text-copy-md-white b,
.dv-text-copy-md-white strong,
.dv-text-copy-md-white .dv-text-bold,
.dv-text-copy-sm-white b,
.dv-text-copy-sm-white strong,
.dv-text-copy-sm-white .dv-text-bold,
.dv-text-copy-button-white b,
.dv-text-copy-button-white strong,
.dv-text-copy-button-white .dv-text-bold {
    color: var(--color-text-white, #FAFAFA) !important;
    font-weight: 500 !important;
}