/**
 * canon-overrides.css — Aplicación visible del canon La Resistencia
 * Cargar DESPUÉS de premium.css y styles.css.
 *
 * No reemplaza, agrega: dorado en acentos, cobre en números,
 * rojo sangre solo para CTA principal, paper como fondo de lectura.
 */

html body,
html body.light-content {
    background: var(--paper) !important;
    color: var(--ash) !important;
}

/* === Acentos editoriales en dorado === */
html body a,
html body .link {
    color: var(--copper);
    text-decoration-color: rgba(138, 90, 54, 0.35);
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

html body a:hover {
    color: var(--blood);
    text-decoration-color: rgba(193, 53, 66, 0.5);
}

/* === Separadores sutiles en cobre === */
html body hr,
html body .rule,
html body .section-rule {
    border: none;
    border-top: 1px solid var(--fog);
}

/* === Tipografía display en títulos editoriales === */
html body h1:not(.no-display),
html body h2:not(.no-display),
html body .book-title,
html body .award-title,
html body .col-article-h1,
html body .col-article .col-article-h1,
html body .col-card h2,
html body .col-card-cover h2 {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    color: var(--ash);
}

/* Citas / bajadas en italic serif */
html body blockquote,
html body .quote,
html body .col-bajada,
html body .page-lead {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--smoke);
    letter-spacing: 0;
}

/* === Metadata en mono === */
html body time,
html body .meta,
html body .article-meta,
html body .col-meta,
html body .col-card-meta,
html body .col-card-cover .num,
html body .badge-cat {
    font-family: var(--font-mono) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px !important;
    color: var(--mist) !important;
}

/* === CTA principal en rojo sangre === */
html body .cta-primary,
html body .res-cta-primary,
html body .btn-primary,
html body .res-preorder-cta,
html body button[type="submit"]:not(.cta-secondary):not(.btn-ghost) {
    background: var(--blood) !important;
    color: var(--paper) !important;
    border-color: var(--blood) !important;
}

html body .cta-primary:hover,
html body .res-cta-primary:hover,
html body .btn-primary:hover {
    background: #9F2838 !important;
    border-color: #9F2838 !important;
}

/* === CTA secundario: borde dorado, fondo paper === */
html body .cta-secondary,
html body .btn-ghost,
html body .res-cta-secondary {
    background: transparent !important;
    color: var(--copper) !important;
    border: 1px solid var(--brass) !important;
}

html body .cta-secondary:hover,
html body .btn-ghost:hover {
    background: var(--brass) !important;
    color: var(--paper) !important;
}

/* === Award strip / premio === */
html body .award-strip {
    border-color: var(--brass) !important;
}

html body .award-strip .award-title,
html body .award-strip .award-meta {
    color: var(--brass) !important;
}

/* === Eyebrow / categoría en mono dorado === */
html body .eyebrow,
html body .col-article-eyebrow,
html body .res-eyebrow,
html body .page-eyebrow {
    font-family: var(--font-mono) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.20em !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--copper) !important;
}

/* === Tarjetas / libros === */
html body .book-card,
html body .col-card,
html body .res-card,
html body .feature-card {
    background: var(--whisper) !important;
    border: 1px solid var(--fog) !important;
    border-radius: var(--radius);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

html body .book-card:hover,
html body .col-card:hover,
html body .res-card:hover,
html body .feature-card:hover {
    border-color: var(--brass) !important;
    box-shadow: var(--shadow-lg);
}

/* === Footer === */
html body .site-footer {
    background: var(--ink) !important;
    color: var(--paper) !important;
    border-top: 1px solid var(--copper) !important;
}

html body .site-footer a {
    color: var(--brass) !important;
}

html body .site-footer a:hover {
    color: var(--paper) !important;
}

/* === Mobile === */
@media (max-width: 600px) {
    html body h1:not(.no-display) {
        letter-spacing: -0.01em !important;
    }
}

/* === Print: papel, negro === */
@media print {
    html body {
        background: white !important;
        color: black !important;
    }
    html body a {
        color: black !important;
        text-decoration: underline;
    }
    .site-footer { background: white !important; color: black !important; }
}