/*
 * H&C accessibility / contrast contract.
 *
 * Rules:
 * 1) Light surfaces -> dark blue/grey body text and dark green accents.
 * 2) Dark surfaces  -> ivory body text and mint accents.
 * 3) Light mint fills -> dark green text, never white.
 * 4) Small body copy and small italics use regular weight (400), not 300.
 *
 * This file is intentionally loaded last by BaseLayout.
 */

:root {
  --hc-text-strong: #172033;
  --hc-text-body: #46505c;
  --hc-text-small: #3f4a57;
  --hc-text-on-dark: #f8f4eb;
  --hc-text-muted-on-dark: #cbd2d5;
  --hc-text-small-on-dark: #b8c2c8;

  --hc-accent-on-light: #245a4f;
  --hc-accent-on-light-hover: #174f45;
  --accent-ink: #174f45;
  --accent-fill: #8fd5c5;
  --accent-fill-hover: #a8dfd3;

  /* Some migrated templates still reference this legacy token. */
  --text-dark-muted: var(--hc-text-body);
}

/* ── 1. Context tokens ───────────────────────────── */
.section--light,
.section--light-2,
.form-ctx,
.legal-page,
.e3-module,
.aside-block--articles {
  --text-muted: var(--hc-text-body) !important;
  --accent: var(--hc-accent-on-light) !important;
  --accent-hover: var(--hc-accent-on-light-hover) !important;
  --accent-dim: rgba(36, 90, 79, 0.09) !important;
}

.section--dark,
.section--dark-2,
.c-hero,
.instr-hero,
.escena-hero,
.momento-hero,
.post-hero,
.page-hero,
.c-nav,
.c-footer,
.aside-block--editorial,
.aside-block--contacto {
  --text-muted: var(--hc-text-muted-on-dark) !important;
  --accent: #8fd5c5 !important;
  --accent-hover: #a8dfd3 !important;
}

/* Footer is visually dark although its migrated component used light tokens. */
.c-footer {
  --text-dark: var(--hc-text-on-dark) !important;
  --text-light: var(--hc-text-on-dark) !important;
  --text-light-muted: var(--hc-text-muted-on-dark) !important;
  --border-dark: rgba(255, 255, 255, 0.16) !important;
  --border-dark-soft: rgba(255, 255, 255, 0.10) !important;
}

/* ── 2. Filled accent surfaces ───────────────────── */
.btn--solid,
a.btn--solid,
button.btn--solid {
  background: var(--accent-fill) !important;
  border-color: var(--accent-fill) !important;
  color: var(--accent-ink) !important;
  font-weight: 600 !important;
}

.btn--solid:hover,
.btn--solid:focus-visible,
a.btn--solid:hover,
a.btn--solid:focus-visible,
button.btn--solid:hover,
button.btn--solid:focus-visible {
  background: var(--accent-fill-hover) !important;
  border-color: var(--accent-fill-hover) !important;
  color: var(--accent-ink) !important;
}

.c-nav__mobile-cta,
.c-nav__mobile-cta:hover,
.c-nav__mobile-cta:focus-visible {
  background: var(--accent-fill) !important;
  color: var(--accent-ink) !important;
}

.surface-accent,
.panel-accent,
.card-accent,
.badge-accent {
  background: var(--accent-fill) !important;
  color: var(--accent-ink) !important;
}

.surface-accent a,
.panel-accent a,
.card-accent a,
.badge-accent a,
.surface-accent strong,
.panel-accent strong,
.card-accent strong,
.badge-accent strong {
  color: inherit !important;
}

/* Transparent buttons on light surfaces must never inherit ivory text. */
.section--light .btn:not(.btn--solid),
.section--light-2 .btn:not(.btn--solid) {
  color: var(--hc-text-strong) !important;
  border-color: rgba(23, 32, 51, 0.34) !important;
}

.section--light .btn:not(.btn--solid):hover,
.section--light-2 .btn:not(.btn--solid):hover,
.section--light .btn:not(.btn--solid):focus-visible,
.section--light-2 .btn:not(.btn--solid):focus-visible {
  color: var(--hc-accent-on-light) !important;
  border-color: var(--hc-accent-on-light) !important;
  background: rgba(36, 90, 79, 0.05) !important;
}

/* ── 3. Body copy on light surfaces ─────────────── */
.section--light .u-body,
.section--light-2 .u-body,
.section--light .instr-body,
.section--light-2 .instr-body,
.section--light .escena-body,
.section--light-2 .escena-body,
.section--light .momento-body,
.section--light-2 .momento-body,
.section--light .momento-intro,
.section--light-2 .momento-intro,
.section--light .instr-intro,
.section--light-2 .instr-intro,
.section--light .c-card__body,
.section--light-2 .c-card__body,
.section--light .c-entrecard__body,
.section--light-2 .c-entrecard__body,
.section--light .c-step__body,
.section--light-2 .c-step__body,
.section--light .c-cta-sub,
.section--light-2 .c-cta-sub,
.section--light .c-cta-micro,
.section--light-2 .c-cta-micro,
.section--light .instr-card p,
.section--light-2 .instr-card p,
.section--light .recurso-item p,
.section--light-2 .recurso-item p,
.legal-page__content,
.e3-module__body p,
.e3-module__body li,
.e3-module__aside p,
.post-body__content,
.post-body__content p,
.post-body__content li,
.page-body p,
.page-body li {
  color: var(--hc-text-body) !important;
  font-weight: 400 !important;
}

/* Dense/small copy gets a little more contrast. */
.section--light .instr-mechanism-list li,
.section--light-2 .instr-mechanism-list li,
.section--light .momento-layers li,
.section--light-2 .momento-layers li,
.section--light .momento-scene-card__desc,
.section--light-2 .momento-scene-card__desc,
.section--light .momento-instr-list li a,
.section--light-2 .momento-instr-list li a,
.section--light .escena-loop li,
.section--light-2 .escena-loop li,
.section--light .escena-risks li,
.section--light-2 .escena-risks li,
.section--light .escena-layers li,
.section--light-2 .escena-layers li,
.section--light .escena-result-card p,
.section--light-2 .escena-result-card p,
.section--light .escena-layer-card p,
.section--light-2 .escena-layer-card p,
.section--light .instr-related-list li a,
.section--light-2 .instr-related-list li a,
.aside-lista__titulo,
.aside-lista__fecha,
.form-ctx__legal,
.form-ctx__field label,
.form-ctx__field input,
.form-ctx__field select,
.form-ctx__field textarea,
.form-ctx__field input::placeholder,
.form-ctx__field textarea::placeholder,
.post-body__content figcaption {
  color: var(--hc-text-small) !important;
  font-weight: 400 !important;
}

/* Form placeholders are real instructions, not decorative ghost text. */
.form-ctx__field input::placeholder,
.form-ctx__field textarea::placeholder,
.c-footer__newsletter-form input::placeholder {
  opacity: 1 !important;
}

/* ── 4. Small italics / editorial notes ─────────── */
.section--light .instr-highlight,
.section--light-2 .instr-highlight,
.section--light .instr-closing,
.section--light-2 .instr-closing,
.section--light .escena-highlight,
.section--light-2 .escena-highlight,
.section--light .escena-closing,
.section--light-2 .escena-closing,
.section--light .escena-misreadings li,
.section--light-2 .escena-misreadings li,
.section--light .escena-blockquote,
.section--light-2 .escena-blockquote,
.post-body__lead,
.post-body__content blockquote,
.post-body__content figcaption,
.c-step-note,
.aside-lista__num {
  color: var(--hc-text-small) !important;
  font-weight: 400 !important;
}

.aside-lista__num {
  color: var(--hc-accent-on-light) !important;
  opacity: 1 !important;
  font-size: 0.72rem !important;
}

/* Italic emphasis inside normal body copy stays legible. */
.section--light :where(.u-body, .instr-body, .escena-body, .momento-body, .post-body__content, .legal-page__content) em,
.section--light-2 :where(.u-body, .instr-body, .escena-body, .momento-body, .post-body__content, .legal-page__content) em {
  color: inherit !important;
  font-weight: 400 !important;
}

/* ── 5. Small text on dark surfaces ─────────────── */
.escena-disclaimer,
.aside-editorial__stat,
.aside-contacto__cargo,
.aside-contacto__email,
.c-footer__copy,
.c-footer__newsletter-legal,
.c-footer__bottom-nav a {
  color: var(--hc-text-small-on-dark) !important;
  font-weight: 400 !important;
}

.escena-disclaimer,
.aside-editorial__stat {
  font-style: italic;
}

.aside-editorial__cuerpo,
.c-footer__tagline,
.c-footer__social-link,
.c-footer__contact-label,
.c-footer__legal-list a,
.c-footer__newsletter-text,
.c-footer__taxo-link,
.c-footer__e3-link {
  color: var(--hc-text-muted-on-dark) !important;
  font-weight: 400 !important;
}

/* Footer form fields are light controls inside a dark surface. */
.c-footer__newsletter-form input {
  background: #f6f2e9 !important;
  color: var(--hc-text-strong) !important;
  border-color: rgba(248, 244, 235, 0.32) !important;
  font-weight: 400 !important;
}

.c-footer__newsletter-form input::placeholder {
  color: var(--hc-text-body) !important;
}

/* ── 6. Accent labels/links on light surfaces ───── */
.section--light .u-eyebrow,
.section--light-2 .u-eyebrow,
.section--light .momento-scene-card__link,
.section--light-2 .momento-scene-card__link,
.section--light .instr-card__link,
.section--light-2 .instr-card__link,
.section--light .momento-cta__link,
.section--light-2 .momento-cta__link,
.section--light .post-body__content a,
.section--light-2 .post-body__content a,
.section--light .e3-module__body a,
.section--light-2 .e3-module__body a,
.aside-ver-todos,
.form-ctx__legal a,
.e3-module-nav__link span {
  color: var(--hc-accent-on-light) !important;
}

/* Headings remain dark navy; only supporting copy is softened. */
.section--light :where(h1, h2, h3, h4),
.section--light-2 :where(h1, h2, h3, h4),
.legal-page :where(h1, h2, h3, h4),
.post-body__content :where(h2, h3, h4),
.e3-module__body :where(h2, h3, h4) {
  color: var(--hc-text-strong) !important;
}

/* ── 7. Readability rhythm ───────────────────────── */
.instr-body,
.escena-body,
.momento-body,
.post-body__content,
.e3-module__body p,
.legal-page__content,
.page-body p {
  line-height: 1.75 !important;
}

.form-ctx__legal,
.post-body__content figcaption,
.escena-disclaimer,
.aside-editorial__stat {
  line-height: 1.65 !important;
}

/* Keep the smallest functional text comfortably readable on mobile. */
@media (max-width: 680px) {
  .form-ctx__legal,
  .aside-lista__fecha,
  .aside-ver-todos,
  .aside-editorial__stat,
  .aside-contacto__cargo,
  .c-footer__copy,
  .c-footer__newsletter-legal,
  .escena-disclaimer,
  .post-body__content figcaption {
    font-size: max(0.78rem, 12.5px) !important;
  }
}