/* Shared front-end theme. Load after each page's layout styles. */
:root {
    --bg: #fff5f8;
    --panel: #fff;
    --panel-2: #fce7f0;
    --line: #f2cddd;
    --text: #492538;
    --muted: #86586c;
    --yellow: #e71983;
    --yellow-2: #ff63a9;
    --black: #fff;
    --accent-gradient: linear-gradient(110deg, #fa388f, #ce2398);
}

html, body {
    background: #fff5f8;
    color: var(--text);
}
body {
    background: radial-gradient(ellipse at 5% 0, #ffe0ee, transparent 45%),
                radial-gradient(ellipse at 100% 15%, #f3e5ff, transparent 40%), #fff5f8;
}
.site-header {
    background: rgba(255, 249, 252, .96);
    border-bottom-color: var(--line);
    box-shadow: 0 5px 24px rgba(161, 40, 104, .06);
}
.navbar { background: #fff0f6; border-top-color: #f8dce8; }
.site-header .topbar { background: transparent; }
.site-header .search-box input {
    background: #fff;
    color: var(--text);
    border-color: var(--line);
}
.site-header .search-box input::placeholder { color: var(--muted); }
.site-header .search-box input:focus { border-color: #e71983; }
.site-header .search-box button,
.site-header .nav-link.active,
.site-header .nav-link.active:hover,
.header-btn.primary {
    background: var(--accent-gradient);
    color: #fff;
}
.site-header .nav-link { color: #69334f; }
.site-header .nav-link:hover { background: #fbd6e8; color: #b70d6c; }
.brand-name { color: #b70d6c; }
.header-btn { background: #fff; border-color: var(--line); color: var(--text); }

.page-title, .section-title, .search-title h1,
.video-title-main, .video-title, .video-title a { color: var(--text); }
.page-head, .section-head { border-color: var(--line); }
.section-title::before, .page-title::before { background: var(--accent-gradient); }
.category-chip, .category-item, .category-tag {
    color: #70364f;
    background: #fff;
    border-color: var(--line);
    box-shadow: 0 3px 12px rgba(192, 49, 113, .04);
}
.category-chip:hover, .category-chip.active,
.category-item:hover, .category-item.active {
    color: #fff;
    background: var(--accent-gradient);
    border-color: #e71983;
    box-shadow: 0 4px 14px rgba(231, 25, 131, .17);
}
.category-toggle, .section-link, .search-keyword,
.empty-box strong, .breadcrumb a:hover { color: #bd116c; }
.video-title a:hover, .video-card:hover .video-title { color: #bd116c; }
.video-meta, .video-info, .card-meta, .search-meta,
.section-kicker, .breadcrumb { color: var(--muted); }
.dot { background: #cf94b0; }
.thumb, .video-cover { background: #f8e4ee; }
.quality, .quality-tag { background: var(--accent-gradient); color: #fff; }
.description, .empty, .empty-box, .empty-state {
    background: rgba(255, 255, 255, .85);
    color: var(--text);
    border-color: var(--line);
}
.description { box-shadow: 0 4px 20px rgba(161, 40, 104, .04); }
.player-wrap { border-color: var(--line); }
/* Preserve the player's neutral canvas and native controls. */
.pagination li a, .pagination li span {
    color: #70364f;
    background: #fff;
    border-color: var(--line);
}
.pagination li.active span, .pagination li.active a,
.pagination .current, .pagination li a:hover {
    color: #fff;
    background: var(--accent-gradient);
    border-color: #e71983;
}
.pagination li.disabled span, .pagination li.disabled a {
    color: #a78091;
    background: #f7edf2;
    border-color: #eedde5;
}
.footer { background: #fce7f0; border-top-color: var(--line); }
.footer-inner { color: var(--muted); }

/* Image captions stay white for contrast with the artwork. */
.hero-strip, .feature-card { background: #fce7f0; }
.feature-title, .feature-tag { color: #fff; }
.feature-tag { border-left-color: #ff63a9; }
.carousel-dot.is-active { background: #e71983; }
.feature-overlay {
    background: linear-gradient(0deg, rgba(75, 22, 53, .88), rgba(75, 22, 53, .04) 65%);
}
:where(a, button, input):focus-visible {
    outline: 2px solid #ce2398;
    outline-offset: 3px;
}