/**
 * File Path: assets/css/front/mbs-front-dark.css
 *
 * Dark Mode Token Overrides (F-007)
 *
 * Activated when data-mbs-theme="dark" is set on <html> by the
 * MBS_Front_Assets::output_dark_mode_attribute() inline script.
 * Triggered by the global Enable Dark Mode setting OR a per-post
 * mbs_theme_override = 'dark' meta value.
 *
 * All rules are flat (no CSS nesting) for maximum theme compatibility,
 * including classic themes such as Graphene Plus (CSS-002).
 *
 * Selector specificity: [data-mbs-theme="dark"] (0,1,0) + .mbs-wrapper
 * (0,1,0) = (0,2,0) — intentionally higher than the base .mbs-wrapper
 * token block (0,1,0) so dark values reliably win.
 *
 * Enqueued unconditionally (not just when setting is on) because per-post
 * overrides can activate dark mode independently of the global toggle.
 *
 * @package MyBookShowroom
 * @since   1.0.0
 */

/* ==========================================================================
   Core token overrides — applied whenever data-mbs-theme="dark" is on <html>
   ========================================================================== */

[data-mbs-theme="dark"] .mbs-wrapper {

    /* Surfaces */
    --mbs-card-bg:       #1E2A3A;
    --mbs-hero-bg:       #16213E;
    --mbs-surface-muted: #16213E;

    /* Borders */
    --mbs-border:        #2D3748;
    --mbs-border-ui:     #4A5568;

    /* Text */
    --mbs-text:          #ECF0F1;
    --mbs-text-strong:   #F5F5F5;
    --mbs-text-light:    #B0BEC5;
    --mbs-text-muted:    #9AABBA;
    --mbs-ink:           #ECF0F1;

    /* Accent / interactive — slightly brightened for dark backgrounds */
    --mbs-accent:        #5BBCC8;
    --mbs-link:          #5BBCC8;

    /* Buttons — navy reads well on dark; keep bg, lighten hover */
    --mbs-button-bg:     #2C3E6B;
    --mbs-button-hover:  #3A5080;
    --mbs-button-text:   #FFFFFF;
}

/* ==========================================================================
   Component-level overrides
   Handles elements that use hard-coded colors instead of tokens, or that
   need structural adjustments in dark mode.
   ========================================================================== */

/* Teaser / pull-quote block */
[data-mbs-theme="dark"] .mbs-teaser {
    background: #16213E;
    border-left-color: var(--mbs-accent, #5BBCC8);
    color: #ECF0F1;
}

/* Book hero section */
[data-mbs-theme="dark"] .mbs-book-hero {
    background: #16213E;
}

/* Per-format metadata rows */
[data-mbs-theme="dark"] .mbs-meta-row dt {
    color: #B0BEC5;
}

[data-mbs-theme="dark"] .mbs-meta-row dd {
    color: #ECF0F1;
}

/* Book cover watermark (FREE tier) — keep visible on dark bg */
[data-mbs-theme="dark"] .mbs-watermark {
    opacity: 0.6;
}

/* Series / author grid book titles */
[data-mbs-theme="dark"] .mbs-series-book h4 a,
[data-mbs-theme="dark"] .mbs-author-book h4 a {
    color: #ECF0F1;
}

/* Buy link buttons */
[data-mbs-theme="dark"] .mbs-buy-link {
    background: #1E2A3A;
    border-color: #4A5568;
    color: #ECF0F1;
}

[data-mbs-theme="dark"] .mbs-buy-link:hover,
[data-mbs-theme="dark"] .mbs-buy-link:focus {
    background: var(--mbs-button-bg, var(--mbs-navy));
    border-color: var(--mbs-button-bg, var(--mbs-navy));
    color: #ffffff;
}

/* External link buttons (Goodreads / StoryGraph) */
[data-mbs-theme="dark"] .mbs-external-link-btn {
    background: #1E2A3A;
    border-color: #4A5568;
    color: #ECF0F1;
}

[data-mbs-theme="dark"] .mbs-external-link-btn:hover {
    background: var(--mbs-accent, #5BBCC8);
    border-color: var(--mbs-accent, #5BBCC8);
    color: #fff;
}

/* Section headings */
[data-mbs-theme="dark"] .mbs-wrapper h1,
[data-mbs-theme="dark"] .mbs-wrapper h2,
[data-mbs-theme="dark"] .mbs-wrapper h3,
[data-mbs-theme="dark"] .mbs-wrapper h4 {
    color: #F5F5F5;
}

/* Archive page header */
[data-mbs-theme="dark"] .mbs-archive-header {
    border-bottom-color: #2D3748;
}

/* Book cards in grid/list layouts */
[data-mbs-theme="dark"] .mbs-book-card {
    background: #1E2A3A;
    border-color: #2D3748;
}

[data-mbs-theme="dark"] .mbs-book-card .mbs-book-title {
    color: #ECF0F1;
}

[data-mbs-theme="dark"] .mbs-book-card .mbs-book-author {
    color: #B0BEC5;
}

/* Breadcrumbs */
[data-mbs-theme="dark"] .mbs-breadcrumbs {
    color: #B0BEC5;
}

[data-mbs-theme="dark"] .mbs-breadcrumbs a {
    color: var(--mbs-link, #5BBCC8);
}

/* Search input */
[data-mbs-theme="dark"] .mbs-search-input {
    background: #1E2A3A;
    border-color: #4A5568;
    color: #ECF0F1;
}

/* Search result cards */
[data-mbs-theme="dark"] .mbs-search-result-card {
    border-bottom-color: #2D3748;
}

/* Series complete note */
[data-mbs-theme="dark"] .mbs-series-complete-note {
    color: #B0BEC5;
}

/* Term description on archive pages */
[data-mbs-theme="dark"] .mbs-term-description {
    color: #B0BEC5;
}

/* Format selector tabs (hero area) — .mbs-format-tab has background:#fff hardcoded
 * in mbs-front.css (CSS nesting). White buttons on a dark hero background look jarring.
 * Specificity (0,2,0) matches base nested rule; dark CSS loads after so it wins. */
[data-mbs-theme="dark"] .mbs-format-tab {
    background: #2D3748;
    color: #ECF0F1;
    border-color: #4A5568;
}

[data-mbs-theme="dark"] .mbs-format-tab:hover {
    background: #374151;
    color: var(--mbs-accent, #5BBCC8);
    border-color: var(--mbs-accent, #5BBCC8);
}

/* active state already uses --mbs-accent which dark mode overrides to #5BBCC8 */
[data-mbs-theme="dark"] .mbs-format-tab.active {
    background: var(--mbs-accent, #5BBCC8);
    border-color: var(--mbs-accent, #5BBCC8);
    color: #fff;
}

/* ==========================================================================
   Categorization pills — genre, tag, theme, content warning
   (mbs-front-categorization.css — all four pill types use light fallback
   colors that wash out against dark card/page backgrounds)
   ========================================================================== */

/* Genre — dark teal family */
[data-mbs-theme="dark"] .mbs-genre-link {
    background: #0D3D47;
    color: #7ECFD8;
    border-color: #1E6A78;
}

[data-mbs-theme="dark"] .mbs-genre-link:hover,
[data-mbs-theme="dark"] .mbs-genre-link:focus {
    background: var(--mbs-accent, #5BBCC8);
    color: #fff;
    border-color: var(--mbs-accent, #5BBCC8);
}

/* Tag — dark neutral */
[data-mbs-theme="dark"] .mbs-tag-link {
    background: #374151;
    color: #D1D5DB;
    border-color: #4B5563;
}

[data-mbs-theme="dark"] .mbs-tag-link:hover,
[data-mbs-theme="dark"] .mbs-tag-link:focus {
    background: #4B5563;
    color: #fff;
    border-color: #6B7280;
}

/* Theme — dark indigo/purple family */
[data-mbs-theme="dark"] .mbs-theme-link {
    background: #2E1D47;
    color: #C4B5FD;
    border-color: #5B3E8A;
}

[data-mbs-theme="dark"] .mbs-theme-link:hover,
[data-mbs-theme="dark"] .mbs-theme-link:focus {
    background: #5B3E8A;
    color: #fff;
    border-color: #7C5FBF;
}

/* Content warning — dark amber family */
[data-mbs-theme="dark"] .mbs-warning-item {
    background: #3B2007;
    color: #FCD34D;
    border-color: #78350F;
}

/* ==========================================================================
   FSE (block theme) context — supplement the fse.css FSE token bridge
   ========================================================================== */

:where(.wp-site-blocks, .editor-styles-wrapper, .entry-content)
[data-mbs-theme="dark"] .mbs-wrapper {
    --mbs-card-bg: #1E2A3A;
    --mbs-text:    #ECF0F1;
}

/* ==========================================================================
   Signup widget + Coming Soon badge — dark mode overrides
   Phase 1.3 (beige assignment): signup widget dark surface.
   Phase 2.5 (coming-soon badge): badge dark palette.
   ========================================================================== */

/* ESP Reader Signup Widget — dark surface (Phase 1.3) */
[data-mbs-theme="dark"] .mbs-esp-signup-widget {
    background: #1E2A3A;
    border-color: #2D3E52;
}

/* Coming Soon Badge — dark palette (Phase 2.5) */
[data-mbs-theme="dark"] .mbs-coming-soon-badge {
    background: var(--mbs-coming-soon-bg, #92400E);
    color: var(--mbs-coming-soon-text, #FEF3C7);
    border-color: rgba(255, 255, 255, 0.12);
}
