/* ============================================
   View Transition API — radial reveal for theme switching
   ============================================ */

::view-transition-new(root) {
    animation: themeRevealIn 0.6s ease-in-out forwards;
    z-index: 1;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    animation: none;
    z-index: 0;
    mix-blend-mode: normal;
}

::view-transition-image-pair(root) {
    isolation: isolate;
}

@keyframes themeRevealIn {
    from { clip-path: circle(0% at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%)); }
    to   { clip-path: circle(150% at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%)); }
}

/* ============================================
   DARK MODE — Wedding Website
   All overrides scoped to [data-theme="dark"]
   Loaded after storybook-unified.css in cascade
   ============================================ */

/* ─────────────────────────────────────────────
   PHASE 2: Core CSS Variable Overrides
   ───────────────────────────────────────────── */

[data-theme="dark"] {
    /* Foundation colors */
    --color-cream:          #1a1714;
    --color-text-dark:      #e8e0d4;
    --color-text-light:     #f5f0e8;
    --color-warm-charcoal:  #e0d4c8;
    --color-sage:           #8fa889;
    --color-forest:         #4a6b4e;
    --color-accent:         #c9b8a8;

    /* Manuscript ink tones → inverted for light-on-dark */
    --color-ink-dark:       #e8ddd0;
    --color-ink-medium:     #d4c8b8;
    --color-ink-light:      #b8a898;
    --ink-color:            #e0d8c8;
    --ink-color-sepia:      #d4c8b0;
    --ink-color-faded:      rgba(224, 216, 200, 0.6);

    /* Pastel palette → muted dark variants */
    --color-rose:           #5a3836;
    --color-lavender:       #3d3650;
    --color-dusty-rose:     #9a6a62;
    --color-blush-bg:       rgba(90, 56, 54, 0.12);
    --color-mint-bg:        rgba(74, 107, 78, 0.12);

    /* Notebook */
    --notebook-line-color:  rgba(120, 110, 95, 0.2);

    /* Envelope palette → darkened */
    --env-body-light:       #2a1e22;
    --env-body-mid:         #251a20;
    --env-body-dark:        #201518;
    --env-text-warm:        #e0d4cc;

    /* Book system — darker leather, same character */
    --book-cover-leather:   #3a2518;
    --book-cover-dark:      #241812;
    --book-page-cream:      #2a2420;
    --book-page-color-1:    #282218;
    --book-page-color-2:    #241e16;

    /* Gold accents UNCHANGED — good contrast on dark */
    /* --book-gold-leaf: #D4AF37; */
    /* --book-gold-detail: #C9A86A; */

    /* Page-turn visual effects → intensified for dark atmosphere */
    --book-turn-mote-opacity: 1;
    --book-turn-mote-color: rgba(212, 175, 55, 1);
    --book-turn-spine-glow-intensity: 0.55;
    --book-turn-spine-glow-color: rgba(212, 175, 55, 0.55);
    --book-turn-curl-shadow-max: 0.5;

    /* Table scene → stronger glow on dark surface */
    --book-table-glow-color: rgba(212, 175, 55, 0.6);
    --book-table-shadow-color: rgba(0, 0, 0, 0.7);

    /* Table scene rim glow → brighter on dark backgrounds */
    --book-table-rim-color: rgba(212, 175, 55, 0.45);
    --book-table-rim-blur: 45px;
    --book-table-rim-hover-color: rgba(212, 175, 55, 0.65);
    --book-table-rim-hover-blur: 55px;

    /* Frame shadow → deeper */
    --book-frame-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 2px 12px rgba(0,0,0,0.4);

    /* Color scheme hint for native UI */
    color-scheme: dark;
}


/* ─────────────────────────────────────────────
   Smooth theme transitions on key surfaces
   ───────────────────────────────────────────── */

[data-theme] .book-desk-scene,
[data-theme] .book-page-front,
[data-theme] .book-page-back,
[data-theme] .book-cover-page-front,
[data-theme] .book-cover-endpaper,
[data-theme] .book-hardcover,
[data-theme] .book-close-btn {
    transition: background 0.5s ease, color 0.5s ease,
                box-shadow 0.5s ease, border-color 0.5s ease;
}


/* ─────────────────────────────────────────────
   Celestial Theme Toggle (Sun/Moon in desk scene)
   Visible in Table, Cover, PickingUp, SettingDown
   ───────────────────────────────────────────── */

.celestial-toggle {
    position: absolute;
    top: 8%;
    right: 8%;
    z-index: 8;
    width: var(--celestial-size);
    height: var(--celestial-size);
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    animation: celestial-enter 1s ease-out 0.8s forwards;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.celestial-toggle__body {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Ambient glow behind celestial body */
.celestial-toggle__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--celestial-glow-size);
    height: var(--celestial-glow-size);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(212, 175, 55, 0.25) 0%,
        rgba(212, 175, 55, 0.08) 40%,
        transparent 70%);
    pointer-events: none;
    animation: celestial-glow-pulse 3s ease-in-out infinite;
}

/* Sun/Moon SVG — shared sizing + transitions */
.celestial-toggle__sun,
.celestial-toggle__moon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* CSS-only icon swap */
.celestial-toggle__sun  { opacity: 1; transform: scale(1) rotate(0deg); }
.celestial-toggle__moon { opacity: 0; transform: scale(0.5) rotate(90deg); }

[data-theme="dark"] .celestial-toggle__sun  { opacity: 0; transform: scale(0.5) rotate(-90deg); }
[data-theme="dark"] .celestial-toggle__moon { opacity: 1; transform: scale(1) rotate(0deg); }

/* Dark mode: cooler silver glow */
[data-theme="dark"] .celestial-toggle__glow {
    background: radial-gradient(circle,
        rgba(192, 200, 216, 0.3) 0%,
        rgba(192, 200, 216, 0.1) 40%,
        transparent 70%);
}

/* Hover */
.celestial-toggle:hover {
    transform: scale(1.12);
    filter: brightness(1.15);
}

.celestial-toggle:hover .celestial-toggle__glow {
    transform: translate(-50%, -50%) scale(1.3);
}

/* Click */
.celestial-toggle:active {
    transform: scale(0.92);
}

/* Focus */
.celestial-toggle:focus-visible {
    outline: 2px solid var(--book-gold-leaf, #D4AF37);
    outline-offset: 4px;
    border-radius: 50%;
}

@keyframes celestial-enter {
    from { opacity: 0; transform: translateY(-12px) scale(0.8); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes celestial-glow-pulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

/* State visibility — visible when book is on desk */
.book-desk-scene--opening .celestial-toggle,
.book-desk-scene--book .celestial-toggle,
.book-desk-scene--settling .celestial-toggle,
.book-desk-scene--closing .celestial-toggle {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.4s ease;
}


/* ─────────────────────────────────────────────
   Theme Ribbon Toggle (bottom-protruding bookmark)
   Always visible — toggles dark/light mode from any book state
   ───────────────────────────────────────────── */

.theme-ribbon {
    position: absolute;
    bottom: 0;
    right: 12%;
    transform: translateY(100%);
    width: var(--theme-ribbon-width);
    height: var(--theme-ribbon-protrude);
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 1;
    transition: height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.3s ease,
                opacity 0.3s ease,
                z-index 0s 0s;
}

.theme-ribbon__body {
    position: relative;
    width: 100%;
    flex: 1;
    background: linear-gradient(0deg,
        #1a1a3e 0%, #252550 30%,
        #2d2d5e 60%, #1e1e42 100%);
    border-radius: 0 0 3px 3px;
    overflow: hidden;
    box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.06),
                inset 0 1px 2px rgba(0, 0, 0, 0.2);
    border-left: 0.5px solid rgba(192, 200, 216, 0.15);
    border-right: 0.5px solid rgba(192, 200, 216, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-ribbon__sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(195deg,
        rgba(192, 200, 216, 0.1) 0%,
        rgba(255, 255, 255, 0.04) 25%,
        transparent 45%,
        rgba(192, 200, 216, 0.06) 65%,
        transparent 85%);
    pointer-events: none;
}

/* Rounded tail — distinct from V-cut nav ribbons */
.theme-ribbon__tail {
    width: 100%;
    height: var(--theme-ribbon-tail-height);
    background: #1e1e42;
    border-radius: 0 0 50% 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Icon swap — CSS-only */
.theme-ribbon__icon {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.theme-ribbon__icon--sun {
    color: #E8C050;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

.theme-ribbon__icon--moon {
    color: #C0C8D8;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6) rotate(60deg);
}

[data-theme="dark"] .theme-ribbon__icon--sun {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6) rotate(-60deg);
}

[data-theme="dark"] .theme-ribbon__icon--moon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

/* Dark mode: shift to warm midnight */
[data-theme="dark"] .theme-ribbon__body {
    background: linear-gradient(0deg,
        #14142e 0%, #1e1e44 30%,
        #252552 60%, #181838 100%);
    border-color: rgba(212, 175, 55, 0.12);
}

[data-theme="dark"] .theme-ribbon__tail {
    background: #181838;
}

/* Hover: extend downward, brighten */
.theme-ribbon:hover {
    height: calc(var(--theme-ribbon-protrude) * 1.3);
    filter: brightness(1.15) saturate(1.1);
}

.theme-ribbon:hover .theme-ribbon__body {
    box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.06),
                inset 0 1px 2px rgba(0, 0, 0, 0.2),
                0 0 10px rgba(192, 200, 216, 0.2),
                0 0 20px rgba(192, 200, 216, 0.08);
}

[data-theme="dark"] .theme-ribbon:hover .theme-ribbon__body {
    box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.06),
                inset 0 1px 2px rgba(0, 0, 0, 0.2),
                0 0 10px rgba(212, 175, 55, 0.2),
                0 0 20px rgba(212, 175, 55, 0.08);
}

/* Click: pull-down spring animation */
.theme-ribbon:active {
    animation: theme-ribbon-pull 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes theme-ribbon-pull {
    0%   { transform: translateY(100%); }
    30%  { transform: translateY(120%); }
    60%  { transform: translateY(95%); }
    80%  { transform: translateY(102%); }
    100% { transform: translateY(100%); }
}

/* Focus */
.theme-ribbon:focus-visible {
    outline: 2px solid var(--book-gold-leaf, #D4AF37);
    outline-offset: 2px;
    border-radius: 3px;
}


/* ─────────────────────────────────────────────
   Theme-conditional effect visibility
   Effects can be marked light-only or dark-only
   via VisualEffect.VisibleInLightMode/VisibleInDarkMode
   ───────────────────────────────────────────── */

/* Light-only effects: hidden when dark mode is active */
[data-theme="dark"] .visual-effect--light-only {
    display: none !important;
}

/* Dark-only effects: hidden when light mode is active (no data-theme or data-theme="light") */
:root:not([data-theme="dark"]) .visual-effect--dark-only {
    display: none !important;
}

/* Hidden in both modes (admin disabled for both) */
.visual-effect--hidden-both {
    display: none !important;
}

/* Dark mode background image swap — elements with --bg-dark CSS custom property
   switch their background-image to the dark variant when dark mode is active.
   Set by VisualEffectStyleBuilder when PageContentTransform.DarkModeBackgroundImageUrl is configured. */
[data-theme="dark"] [style*="--bg-dark"] {
    background-image: var(--bg-dark) !important;
}


/* ─────────────────────────────────────────────
   PHASE 3: Book System Surface Overrides
   ───────────────────────────────────────────── */

/* Desk scene background — dark warm wood surface.
   !important is required to beat inline background-image set by SiteBackgroundStyle
   (BookDeskScene.razor.cs) when no DarkModeBackgroundImageUrl is configured. Without it,
   the inline light-mode background persists in Table/PickingUp/SettingDown states. */
[data-theme="dark"] .book-desk-scene {
    background:
        var(--env-paper-grain),
        radial-gradient(ellipse at 50% 45%, rgba(40, 35, 28, 0.15) 0%, transparent 70%),
        linear-gradient(175deg,
            #1a1510 0%, #1e1914 25%,
            #221e18 50%, #26211b 75%,
            #2a251f 100%) !important;
}

/* When a dark-mode background image IS configured (--bg-dark CSS variable in inline style),
   use it instead of the default gradient. Higher specificity (0,3,0 vs 0,2,0) ensures this
   wins over the gradient rule above when both have !important. */
[data-theme="dark"] .book-desk-scene[style*="--bg-dark"] {
    background-image: var(--bg-dark) !important;
    background-size: cover !important;
    background-position: center !important;
}

[data-theme="dark"] .book-desk-scene::after {
    background: rgba(0, 0, 0, 0.12);
}

/* Book cover front face — darker leather */
[data-theme="dark"] .book-cover-page-front {
    background:
        var(--env-paper-grain),
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.02) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.2) 0%, transparent 50%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--book-cover-leather) 90%, white) 0%,
            var(--book-cover-leather) 25%,
            var(--book-cover-dark) 75%,
            color-mix(in srgb, var(--book-cover-dark) 85%, black) 100%);
    box-shadow:
        4px 4px 15px rgba(0, 0, 0, 0.5),
        inset 0 0 40px rgba(0, 0, 0, 0.25),
        inset 0 0 80px rgba(0, 0, 0, 0.15);
}

/* Cover endpaper — dark marbled */
[data-theme="dark"] .book-cover-endpaper {
    background:
        radial-gradient(ellipse at 20% 50%, color-mix(in srgb, var(--color-sage) 12%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, color-mix(in srgb, var(--color-gold) 10%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--color-lavender) 8%, transparent) 0%, transparent 55%),
        linear-gradient(135deg, var(--book-page-cream), color-mix(in srgb, var(--book-page-cream) 85%, black));
}

/* Cover edges — darker */
[data-theme="dark"] .book-cover-edge--spine,
[data-theme="dark"] .book-cover-edge--fore {
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .book-cover-edge--head,
[data-theme="dark"] .book-cover-edge--tail {
    background: var(--book-cover-dark);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.4);
}

/* Hardcover backing — darker leather */
[data-theme="dark"] .book-hardcover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 3px 10px rgba(0, 0, 0, 0.45),
        0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Book page front — dark parchment by candlelight */
[data-theme="dark"] .book-page-front {
    background: linear-gradient(to right,
        #1e1a14 0%,
        color-mix(in srgb, var(--book-page-cream) 98%, #1e1a14) 3%,
        color-mix(in srgb, var(--book-page-cream) 95%, #1a1610) 6%,
        var(--book-page-cream) 12%,
        var(--book-page-cream) 88%,
        color-mix(in srgb, var(--book-page-cream) 95%, #201c16) 94%,
        color-mix(in srgb, var(--book-page-cream) 98%, #1e1a14) 97%,
        #1e1a14 100%);
}

/* Book page back — dark parchment.
   Explicit background-color + background-image: none !important fallbacks ensure the
   light-mode parchment image (book-system.css) is cleared even if color-mix() doesn't
   resolve. The !important on background-image guarantees the light texture is removed
   regardless of cascade order or specificity conflicts with other CSS files. */
[data-theme="dark"] .book-page-back {
    background-color: #2a2420 !important;
    background-image: none !important;
    background: linear-gradient(to left,
        #1e1a14 0%,
        color-mix(in srgb, var(--book-page-cream) 98%, #1e1a14) 3%,
        color-mix(in srgb, var(--book-page-cream) 95%, #1a1610) 6%,
        var(--book-page-cream) 12%,
        var(--book-page-cream) 88%,
        color-mix(in srgb, var(--book-page-cream) 95%, #201c16) 94%,
        color-mix(in srgb, var(--book-page-cream) 98%, #1e1a14) 97%,
        #1e1a14 100%) !important;
}

/* 3D Spine — darker with stronger gold bands */
[data-theme="dark"] .book-spine-3d {
    box-shadow:
        inset 0 0 3px rgba(255, 255, 255, 0.04),
        inset 0 0 6px rgba(0, 0, 0, 0.4),
        -1px 0 3px rgba(0, 0, 0, 0.3),
        1px 0 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .book-spine-3d-glow {
    background: radial-gradient(ellipse at center,
        rgba(212, 175, 55, 0.3) 0%,
        rgba(212, 175, 55, 0.12) 40%,
        transparent 80%);
}

/* 3D edges — darker page lines */
[data-theme="dark"] .book-3d-edge-right,
[data-theme="dark"] .book-3d-edge-top,
[data-theme="dark"] .book-3d-edge-bottom {
    background-color: var(--book-page-color-1);
}

/* 3D page layers — darker alternating colors */
[data-theme="dark"] .book-3d-page {
    background-color: var(--book-page-color-1);
}

[data-theme="dark"] .book-3d-page--alt {
    background-color: var(--book-page-color-2);
}

/* 3D back cover */
[data-theme="dark"] .book-3d-back-cover {
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--book-cover-leather) 90%, black) 0%,
        var(--book-cover-dark) 100%);
}

/* Flyleaf textures — darker parchment variants */
[data-theme="dark"] .book-flyleaf-texture--endpaper {
    background:
        radial-gradient(ellipse at 20% 50%, color-mix(in srgb, var(--color-sage) 10%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, color-mix(in srgb, var(--color-gold) 8%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--color-lavender) 7%, transparent) 0%, transparent 55%),
        linear-gradient(135deg, var(--book-page-cream), color-mix(in srgb, var(--book-page-cream) 85%, black));
}

[data-theme="dark"] .book-flyleaf-texture--cream {
    background:
        var(--env-paper-grain),
        linear-gradient(170deg, var(--book-page-cream) 0%, color-mix(in srgb, var(--book-page-cream) 95%, #18140e) 100%);
}

[data-theme="dark"] .book-flyleaf-texture--aged {
    background:
        var(--env-paper-grain),
        radial-gradient(circle at 30% 70%, rgba(60, 50, 35, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 75% 25%, rgba(60, 50, 35, 0.06) 0%, transparent 35%),
        linear-gradient(170deg,
            color-mix(in srgb, var(--book-page-cream) 92%, #1a1610) 0%,
            color-mix(in srgb, var(--book-page-cream) 88%, #18140e) 100%);
}

/* Flyleaf back content (TOC) — override the light linen background image.
   Mirrors the .book-page-back dark gradient in the opposite direction. */
[data-theme="dark"] .book-flyleaf-back-content {
    background-color: #2a2420;
    background-image: none;
    background: linear-gradient(to right,
        #1e1a14 0%,
        color-mix(in srgb, var(--book-page-cream) 98%, #1e1a14) 3%,
        var(--book-page-cream) 50%,
        color-mix(in srgb, var(--book-page-cream) 96%, #1e1a14) 97%,
        color-mix(in srgb, var(--book-page-cream) 88%, #18140e) 100%);
}

/* Flyleaf shadows — deeper */
[data-theme="dark"] .book-flyleaf-front::after,
[data-theme="dark"] .book-flyleaf-back::after {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.12), inset 3px 0 8px rgba(0, 0, 0, 0.08);
}

/* Page corner peel — darker paper tones */
[data-theme="dark"] .book-page-peel-underpage {
    background: linear-gradient(135deg,
        transparent 40%,
        rgba(42, 36, 32, 0.4) 60%,
        rgba(42, 36, 32, 0.6) 80%);
}

[data-theme="dark"] .book-page-peel-underpage--tr {
    background: linear-gradient(225deg,
        transparent 40%,
        rgba(42, 36, 32, 0.4) 60%,
        rgba(42, 36, 32, 0.6) 80%);
}

/* Left-side peel underpage — dark variants (tl, bl) */
[data-theme="dark"] .book-page-peel-underpage--tl {
    background: linear-gradient(315deg,
        transparent 40%,
        rgba(42, 36, 32, 0.4) 60%,
        rgba(42, 36, 32, 0.6) 80%);
}

[data-theme="dark"] .book-page-peel-underpage--bl {
    background: linear-gradient(45deg,
        transparent 40%,
        rgba(42, 36, 32, 0.4) 60%,
        rgba(42, 36, 32, 0.6) 80%);
}

/* Corner hotspot peels — dark paper backgrounds */
[data-theme="dark"] .book-page-corner--next::before,
[data-theme="dark"] .book-page-corner--next-top::before {
    background: linear-gradient(135deg,
        transparent 36%,
        rgba(42, 36, 32, 0.5) 48%,
        rgba(42, 36, 32, 0.7) 52%,
        rgba(30, 26, 20, 0.85) 100%);
}

[data-theme="dark"] .book-page-corner--prev-top::before,
[data-theme="dark"] .book-page-corner--prev-bottom::before {
    background: linear-gradient(315deg,
        transparent 36%,
        rgba(42, 36, 32, 0.5) 48%,
        rgba(42, 36, 32, 0.7) 52%,
        rgba(30, 26, 20, 0.85) 100%);
}

/* Page stacks — darker edges */
[data-theme="dark"] .book-page-left {
    background: linear-gradient(to right, #1e1a14, #282218, #1e1a14);
    box-shadow: 1px 0 1px rgba(0,0,0,0.08), -0.5px 0 0.5px rgba(30, 26, 18, 0.8);
}

[data-theme="dark"] .book-page-right {
    background: linear-gradient(to left, #1e1a14, #282218, #1e1a14);
    box-shadow: -1px 0 1px rgba(0,0,0,0.08);
}

/* Page stack thickness box-shadows — dark paper layers instead of cream */
[data-theme="dark"] .book-page:not(.book-page--turned):not(.book-page--turning) > .book-page-front {
    box-shadow:
        inset -2px 0 0 #1e1a14,
        inset -3px 0 0 #282218,
        inset -4px 0 0 #2a2420,
        inset -5px 0 0 #1e1a14,
        inset -6px 0 0 #252018,
        inset -7px 0 0 #2a2420,
        inset -8px 0 0 #1e1a14,
        inset -9px 0 0 #282218,
        inset -10px 0 0 #2a2420,
        inset -11px 0 0 #1e1a14;
}

[data-theme="dark"] .book-page.book-page--turned:not(.book-page--turning) > .book-page-back {
    box-shadow:
        inset 2px 0 0 #1e1a14,
        inset 3px 0 0 #282218,
        inset 4px 0 0 #2a2420,
        inset 5px 0 0 #1e1a14,
        inset 6px 0 0 #252018,
        inset 7px 0 0 #2a2420,
        inset 8px 0 0 #1e1a14,
        inset 9px 0 0 #282218;
}

/* 3D page edge spans — dark paper gradients */
[data-theme="dark"] .book-page-edge-right span {
    background: linear-gradient(to right, #1e1a14, #282218, #1e1a14);
    box-shadow: 1px 0 1px rgba(0,0,0,0.08), -0.5px 0 0.5px rgba(30, 26, 18, 0.8);
}

[data-theme="dark"] .book-page-edge-left span {
    background: linear-gradient(to left, #1e1a14, #282218, #1e1a14);
    box-shadow: -1px 0 1px rgba(0,0,0,0.08), 0.5px 0 0.5px rgba(30, 26, 18, 0.8);
}

/* Ambient right-edge glow — subtle warm hint in dark mode */
[data-theme="dark"] .book-page:not(.book-page--turned):not(.book-page--turning) .book-page-front::before {
    background: linear-gradient(to left,
        rgba(212, 175, 55, 0.03) 0%,
        rgba(212, 175, 55, 0.01) 40%,
        transparent 100%);
}

/* Drag flap — dark paper */
[data-theme="dark"] .book-page-drag-flap {
    background: linear-gradient(to left, #1e1a14, #282218, #1e1a14);
}

/* Ribbon bookmarks — work well on dark (already dark-toned) */
/* Ribbon labels — slightly brighter for readability */
[data-theme="dark"] .book-ribbon-label {
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(212, 175, 55, 0.2);
}

/* Sticky notes — darker paper tone */
[data-theme="dark"] .book-sticky-note-paper {
    background: var(--note-color, rgba(212, 175, 55, 0.2));
    color: rgba(232, 224, 208, 0.75);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), -2px 0 4px rgba(0, 0, 0, 0.12);
}

/* Close button */
[data-theme="dark"] .book-close-btn {
    border: 1.5px solid rgba(212, 184, 150, 0.25);
    background: rgba(30, 26, 22, 0.55);
    color: rgba(212, 175, 55, 0.7);
}

[data-theme="dark"] .book-close-btn:hover {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.5);
    color: var(--book-gold-detail, rgba(212, 175, 55, 0.85));
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
}

/* Nav buttons — darker glass */
[data-theme="dark"] .book-page-nav-btn {
    border: 1.5px solid rgba(212, 184, 150, 0.12);
    background: rgba(30, 26, 22, 0.25);
    color: var(--color-text-dark);
}

[data-theme="dark"] .book-page-nav-btn:hover {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.35);
    color: var(--book-gold-detail, rgba(212, 175, 55, 0.85));
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.08);
}

/* Scrollbar — darker track */
[data-theme="dark"] .book-page-content {
    scrollbar-color: rgba(212, 175, 55, 0.25) rgba(30, 26, 22, 0.3);
}

[data-theme="dark"] .book-page-content::-webkit-scrollbar-track {
    background: rgba(30, 26, 22, 0.3);
}

[data-theme="dark"] .book-page-content::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.25);
}

/* Page numbers — lighter for dark pages */
[data-theme="dark"] .book-page-number {
    color: rgba(255, 255, 255, 0.2);
}

/* Gutter/center fold shadow — deeper */
[data-theme="dark"] .book-frame::after {
    opacity: 1;
}

/* Spine crease — deeper shadow */
[data-theme="dark"] .book-page-spine-crease {
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.08) 40%,
        transparent 100%);
}


/* ─────────────────────────────────────────────
   PHASE 4: Content Page Overrides
   ───────────────────────────────────────────── */

/* --- Cloud Section → Night Sky --- */

/* Cloud section vignette — match dark book page aesthetic */
[data-theme="dark"] .cloud-section-inner::after {
    background: radial-gradient(ellipse at center,
        transparent 40%,
        rgba(20, 16, 10, 0.25) 100%);
}

[data-theme="dark"] .cloud-mist {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(80, 90, 120, 0.12) 15%,
        rgba(60, 70, 100, 0.14) 35%,
        rgba(80, 90, 120, 0.10) 55%,
        rgba(60, 70, 100, 0.12) 75%,
        transparent 100%);
}

/* Stars — much brighter at night */
[data-theme="dark"] .star {
    background: radial-gradient(circle,
        rgba(255, 248, 230, 1) 0%,
        rgba(255, 240, 200, 0.7) 40%,
        transparent 70%);
    filter: none;
    opacity: 0.9;
}

/* Shooting star — vivid */
[data-theme="dark"] .cloud-shooting-star {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 240, 200, 1) 100%);
    box-shadow:
        0 0 4px rgba(255, 240, 200, 0.8),
        0 0 8px rgba(255, 240, 200, 0.4);
}

/* Fireflies — intensified glow */
[data-theme="dark"] .cloud-firefly {
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 248, 230, 0.3) 30%,
        transparent 70%);
    filter: brightness(1.3);
}

/* Cloud welcome text — brighter */
[data-theme="dark"] .cloud-title,
[data-theme="dark"] .cloud-word {
    filter: brightness(1.1);
}

/* Cloud nav labels — brighter gold on dark */
[data-theme="dark"] .cloud-nav-label {
    filter: brightness(1.15);
}

/* Petals — slightly brighter on dark */
[data-theme="dark"] .cloud-petal {
    opacity: 0.7;
}

/* Cloud border botanical SVGs — adjusted for dark */
[data-theme="dark"] .cloud-border-corner {
    opacity: 0.6;
    filter: brightness(0.8) saturate(0.85);
}

/* --- Schedule Page --- */
[data-theme="dark"] .schedule-content {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .schedule-content::before {
    background: linear-gradient(to bottom,
        rgba(20, 16, 10, 0.25) 0%, rgba(20, 16, 10, 0.08) 40%,
        rgba(20, 16, 10, 0.08) 60%, rgba(20, 16, 10, 0.3) 100%);
}

[data-theme="dark"] .schedule-content::after {
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.4),
                inset 0 0 40px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .schedule-title {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .schedule-event-time {
    color: #d4928a;
}

[data-theme="dark"] .schedule-event-title {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .schedule-event-details {
    color: var(--color-ink-medium);
}

[data-theme="dark"] .schedule-footer-label {
    color: var(--color-sage);
}

[data-theme="dark"] .schedule-footer-details {
    color: var(--color-ink-medium);
}

/* Schedule border frame SVGs */
[data-theme="dark"] .schedule-border-corner {
    opacity: 0.5;
    filter: brightness(0.75) saturate(0.8);
}

[data-theme="dark"] .schedule-margin-icon {
    color: var(--color-ink-light);
}

/* Schedule event names, descriptions, initials */
[data-theme="dark"] .schedule-event-name {
    color: var(--color-ink-dark);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3),
                 0 0 1px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .schedule-event-desc {
    color: var(--color-ink-medium);
    text-shadow: none;
}

[data-theme="dark"] .schedule-event-initial {
    color: #d4928a;
}

/* Schedule subheading — warm rose on dark */
[data-theme="dark"] .schedule-subheading {
    color: #d4928a;
}

/* Schedule footer text */
[data-theme="dark"] .schedule-footer-value {
    color: var(--color-ink-dark);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .schedule-footer-detail {
    color: var(--color-ink-medium);
}

/* Schedule venue link */
[data-theme="dark"] .schedule-venue-link {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .schedule-venue-link:hover {
    color: #d4928a;
}

[data-theme="dark"] .schedule-venue-icon {
    color: var(--color-sage);
}

/* Schedule sparkle stars — reduce brightness for dark bg */
[data-theme="dark"] .schedule-sparkle {
    filter: brightness(0.7);
    opacity: 0.6;
}

/* Schedule leaves — dim for dark atmosphere */
[data-theme="dark"] .schedule-leaf {
    opacity: 0.5;
    filter: brightness(0.7) saturate(0.8);
}

/* Schedule falling oak leaves — subdued */
[data-theme="dark"] .schedule-oak-leaf {
    opacity: 0.5;
    filter: brightness(0.7) saturate(0.8);
}

/* Fairy lights — increase glow contrast on dark */
[data-theme="dark"] .fairy-light {
    filter: brightness(1.3);
}

/* Schedule fireflies — intensified for dark, matching story pattern */
[data-theme="dark"] .schedule-firefly {
    opacity: 0.9;
    filter: brightness(1.2);
}

/* Schedule mist — darken wisps */
[data-theme="dark"] .schedule-mist {
    opacity: 0.3;
}

[data-theme="dark"] .schedule-mist-wisp {
    background: linear-gradient(0deg, rgba(20, 16, 10, 0.06), transparent);
}

/* Schedule horizon silhouette — darken for dark mode */
[data-theme="dark"] .schedule-horizon {
    opacity: 0.4;
    filter: brightness(0.6);
}

/* Schedule title ornament SVG — muted on dark */
[data-theme="dark"] .schedule-title-ornament svg {
    color: var(--color-sage);
    opacity: 0.6;
}

/* Schedule event divider SVG — softer on dark */
[data-theme="dark"] .schedule-event-divider svg {
    opacity: 0.4;
}

/* Schedule header band — subtle on dark */
[data-theme="dark"] .schedule-header-band svg {
    opacity: 0.5;
    filter: brightness(0.75);
}

/* --- FAQ Page --- */
[data-theme="dark"] .faq-scene {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .faq-scene::before {
    background: linear-gradient(to bottom,
        rgba(20, 16, 10, 0.25) 0%, rgba(20, 16, 10, 0.08) 40%,
        rgba(20, 16, 10, 0.08) 60%, rgba(20, 16, 10, 0.3) 100%);
}

[data-theme="dark"] .faq-scene::after {
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.4),
                inset 0 0 40px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .faq-header {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .faq-q-heading {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .faq-answer {
    color: var(--color-ink-medium);
}

[data-theme="dark"] .faq-dropcap {
    opacity: 0.8;
}

[data-theme="dark"] .faq-numeral {
    color: var(--color-ink-light);
}

[data-theme="dark"] .faq-running-header {
    color: var(--color-dusty-rose);
}

/* FAQ swatch tooltip */
[data-theme="dark"] .faq-swatch-tooltip {
    background: #2a2420;
    color: var(--color-ink-dark);
    border-color: rgba(212, 175, 55, 0.2);
}

/* --- Story Page --- */
[data-theme="dark"] .story-content {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .story-content::before {
    background: linear-gradient(to bottom,
        rgba(20, 16, 10, 0.22) 0%, rgba(20, 16, 10, 0.06) 40%,
        rgba(20, 16, 10, 0.06) 60%, rgba(20, 16, 10, 0.22) 100%);
}

[data-theme="dark"] .story-title {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .story-chapter-title {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .story-chapter-numeral {
    color: #d4928a;
}

[data-theme="dark"] .story-text {
    color: var(--color-ink-medium);
}

[data-theme="dark"] .story-closing-text {
    color: var(--color-ink-dark);
}

/* Story aged shadow overlay — matches FAQ double-layer vignette pattern */
[data-theme="dark"] .story-content::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.35),
                inset 0 0 30px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    z-index: 1;
}

/* Story fireflies — intensified */
[data-theme="dark"] .story-firefly {
    opacity: 1;
}

/* Story heading — light on dark */
[data-theme="dark"] .story-heading {
    color: var(--color-ink-dark);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 0 8px rgba(20, 16, 10, 0.4);
}

/* Story ink bleed ambient spots — darkened from peach to deep warm */
[data-theme="dark"] .story-ink-bleed {
    background: radial-gradient(circle, rgba(80, 60, 50, 0.15) 0%, transparent 70%);
}

/* Story water ripples — dimmed borders */
[data-theme="dark"] .water-ripple {
    border-color: rgba(100, 120, 140, 0.15);
}

/* Story mist wisps — warm dark instead of cream */
[data-theme="dark"] .story-mist-wisp {
    background: linear-gradient(90deg, transparent, rgba(40, 35, 30, 0.08), rgba(40, 35, 30, 0.06), transparent);
}

/* Story chapter marker numeral lines — gold-tinted on dark */
[data-theme="dark"] .chapter-numeral {
    color: #d4928a;
}

[data-theme="dark"] .chapter-numeral::before,
[data-theme="dark"] .chapter-numeral::after {
    background: linear-gradient(to var(--dir, right), rgba(212, 175, 55, 0.2), transparent);
}

/* Story botanical dividers — softer on dark */
[data-theme="dark"] .story-botanical-divider {
    opacity: 0.5;
    filter: brightness(0.75);
}

/* Story feather — subtle on dark */
[data-theme="dark"] .story-feather {
    filter: brightness(0.7) saturate(0.8);
}

/* Story continuation hint — warm rose */
[data-theme="dark"] .story-continuation {
    color: #d4928a;
}

/* Story closing emblem — muted on dark */
[data-theme="dark"] .story-closing-emblem svg {
    opacity: 0.6;
    filter: brightness(0.8);
}

/* Story scroll card — transparent bg already, but ensure text readability */
[data-theme="dark"] .story-scroll {
    color: var(--color-ink-medium);
}

/* --- RSVP Page --- */
[data-theme="dark"] .rsvp-section-content {
    color: var(--color-ink-dark);
    position: relative;
}

/* RSVP warm vignette — candlelit parchment edges */
[data-theme="dark"] .rsvp-section-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(20, 16, 10, 0.22) 0%, rgba(20, 16, 10, 0.06) 35%,
        rgba(20, 16, 10, 0.06) 65%, rgba(20, 16, 10, 0.25) 100%);
    pointer-events: none;
    z-index: 1;
}

/* RSVP aged shadow — depth and warmth */
[data-theme="dark"] .rsvp-section-content::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.35),
                inset 0 0 30px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    z-index: 1;
}

[data-theme="dark"] .rsvp-title {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .rsvp-form-label {
    color: var(--color-ink-medium);
}

[data-theme="dark"] .rsvp-radio-group label {
    color: var(--color-ink-medium);
}

/* Radio option labels — override hardcoded #1c1209 from rsvp.css.
   Targets both the modal radio options and inline form radio options.
   Uses ink-dark (#e8ddd0) for better contrast on dark backgrounds. */
[data-theme="dark"] .rsvp-radio-option {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .rsvp-input,
[data-theme="dark"] .rsvp-textarea,
[data-theme="dark"] .rsvp-select {
    background: rgba(42, 36, 32, 0.4);
    border-color: rgba(212, 175, 55, 0.2);
    color: var(--color-ink-dark);
}

[data-theme="dark"] .rsvp-input::placeholder,
[data-theme="dark"] .rsvp-textarea::placeholder {
    color: var(--color-ink-light);
}

[data-theme="dark"] .rsvp-input:focus,
[data-theme="dark"] .rsvp-textarea:focus,
[data-theme="dark"] .rsvp-select:focus {
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15);
}

[data-theme="dark"] .rsvp-submit-btn {
    background: #9a6a62;
    color: var(--color-text-light);
}

[data-theme="dark"] .rsvp-submit-btn:hover {
    background: #b07a72;
}

/* RSVP confirmation modal overlay */
[data-theme="dark"] .rsvp-modal-overlay {
    background: rgba(0, 0, 0, 0.75);
}

/* RSVP corner illustrations */
[data-theme="dark"] .rsvp-corner-illustration {
    opacity: 0.5;
    filter: brightness(0.75) saturate(0.8);
}

/* Song suggestion fields */
[data-theme="dark"] .song-field-group input {
    background: rgba(42, 36, 32, 0.35);
    border-color: rgba(212, 175, 55, 0.15);
    color: var(--color-ink-dark);
}

/* RSVP inline form background — warm dark parchment */
[data-theme="dark"] .rsvp-inline-form {
    background: linear-gradient(135deg, #2a2420 0%, #252018 40%, #2a2420 100%);
}

/* RSVP inline form ruled lines — dark notebook lines */
[data-theme="dark"] .rsvp-inline-form::before {
    opacity: 0.4;
}

/* RSVP inline form page curl shadow — deeper on dark */
[data-theme="dark"] .rsvp-inline-form::after {
    background: radial-gradient(
        ellipse at 100% 100%,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.06) 40%,
        transparent 70%
    );
}

/* RSVP inline form title — light ink */
[data-theme="dark"] .rsvp-inline-form .rsvp-title {
    color: var(--color-ink-dark);
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(20, 16, 10, 0.4);
}

/* RSVP inline form labels */
[data-theme="dark"] .rsvp-inline-form .rsvp-label {
    color: var(--color-ink-medium);
}

/* RSVP inline form inputs — dark variant of hand-drawn borders */
[data-theme="dark"] .rsvp-inline-form .rsvp-input,
[data-theme="dark"] .rsvp-inline-form .rsvp-textarea {
    border-color: rgba(224, 216, 200, 0.25);
    color: var(--color-ink-dark);
    background: rgba(42, 36, 32, 0.3);
}

[data-theme="dark"] .rsvp-inline-form .rsvp-input::placeholder,
[data-theme="dark"] .rsvp-inline-form .rsvp-textarea::placeholder {
    color: rgba(224, 216, 200, 0.45);
}

[data-theme="dark"] .rsvp-inline-form .rsvp-input:focus,
[data-theme="dark"] .rsvp-inline-form .rsvp-textarea:focus {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(42, 36, 32, 0.45);
}

/* RSVP inline radio options — brighter text for readability on dark pages */
[data-theme="dark"] .rsvp-inline-form .rsvp-radio-option {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .rsvp-inline-form .rsvp-radio-option:has(input:checked) {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .rsvp-inline-form .rsvp-radio-option:hover {
    background: rgba(42, 36, 32, 0.3);
}

[data-theme="dark"] .rsvp-inline-form .rsvp-radio-option input[type="radio"]::before {
    border-color: rgba(224, 216, 200, 0.4);
}

/* RSVP inline submit button — darker stamp style */
[data-theme="dark"] .rsvp-inline-form .rsvp-submit {
    background: #2a2420;
    border-color: rgba(224, 216, 200, 0.35);
    color: var(--color-ink-dark);
}

[data-theme="dark"] .rsvp-inline-form .rsvp-submit:hover {
    background: radial-gradient(ellipse at center, #3a2a24 0%, #2e2420 60%, #2a2420 100%);
    border-color: rgba(212, 175, 55, 0.4);
    color: var(--color-ink-dark);
    box-shadow:
        0 0 8px rgba(212, 175, 55, 0.2),
        0 0 16px rgba(155, 137, 180, 0.12);
}

/* RSVP inline download notice */
[data-theme="dark"] .rsvp-inline-form .rsvp-download-notice {
    background: rgba(42, 36, 32, 0.2);
    border-left-color: rgba(224, 216, 200, 0.3);
    color: var(--color-ink-medium);
}

/* RSVP inline song entries */
[data-theme="dark"] .rsvp-inline-form .song-entry {
    border-left-color: rgba(212, 175, 55, 0.15);
}

[data-theme="dark"] .rsvp-inline-form .song-add {
    color: #d4928a;
}

[data-theme="dark"] .rsvp-inline-form .song-input {
    border-bottom-color: rgba(224, 216, 200, 0.15);
    color: var(--color-ink-dark);
}

/* RSVP inline pastel section labels — warmer dark variants */
[data-theme="dark"] .rsvp-inline-form .rsvp-songs-section .rsvp-label {
    color: #d4928a;
}

[data-theme="dark"] .rsvp-inline-form .playlist-field .rsvp-label {
    color: var(--color-sage);
}

/* RSVP inline botanical glyphs — match label colors */
[data-theme="dark"] .rsvp-inline-form .rsvp-songs-section .rsvp-label::before {
    color: #d4928a;
}

[data-theme="dark"] .rsvp-inline-form .playlist-field .rsvp-label::before {
    color: var(--color-sage);
}

/* RSVP inline scrollbar — darker leather tones */
[data-theme="dark"] .rsvp-inline-form::-webkit-scrollbar-track {
    background: rgba(20, 16, 10, 0.3);
    border-left-color: rgba(212, 175, 55, 0.1);
}

[data-theme="dark"] .rsvp-inline-form::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(154, 106, 98, 0.6),
        rgba(128, 80, 72, 0.7));
}

[data-theme="dark"] .rsvp-inline-form {
    scrollbar-color: rgba(154, 106, 98, 0.6) rgba(20, 16, 10, 0.3);
}

/* RSVP inline form section dashed separators */
[data-theme="dark"] .rsvp-inline-form .rsvp-form-group + .rsvp-form-group {
    border-top-color: rgba(224, 216, 200, 0.15);
}

/* RSVP filigree corner borders (modal) */
[data-theme="dark"] .rsvp-corner {
    border-color: rgba(212, 175, 55, 0.15);
}

/* RSVP modal card — dark warm background */
[data-theme="dark"] .rsvp-modal-card {
    background: linear-gradient(135deg, #2a2420 0%, #252018 40%, #2a2420 100%);
    border-color: rgba(212, 175, 55, 0.15);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

/* RSVP corner illustrations — dimmed on dark */
[data-theme="dark"] .rsvp-corner-illust {
    opacity: 0.4;
    filter: brightness(0.7) saturate(0.8);
}

/* RSVP plus-one section */
[data-theme="dark"] .rsvp-plus-ones {
    background: rgba(42, 36, 32, 0.2);
    border-color: rgba(212, 175, 55, 0.12);
}

[data-theme="dark"] .btn-add-plus-one {
    border-color: #d4928a;
    color: #d4928a;
}

[data-theme="dark"] .btn-add-plus-one:hover {
    background: #d4928a;
    color: #1a1714;
}

[data-theme="dark"] .plus-one-entry {
    border-top-color: rgba(212, 175, 55, 0.1);
}

/* RSVP success states — subtle dim for dark mode */
[data-theme="dark"] .rsvp-success h2 {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .rsvp-success p {
    color: var(--color-ink-medium);
}

/* RSVP celebration success — warm dark */
[data-theme="dark"] .rsvp-celebrate-title {
    color: var(--color-ink-dark);
}

[data-theme="dark"] .rsvp-celebrate-subtitle {
    color: var(--color-ink-medium);
}

/* RSVP confetti — slightly dimmed on dark */
[data-theme="dark"] .confetti-piece {
    opacity: 0.7;
}

/* RSVP bokeh orbs — subtler on dark to avoid glare */
[data-theme="dark"] .bokeh-orb {
    opacity: 0.6;
    filter: brightness(0.8);
}

/* RSVP confirmation page — darker overlays */
[data-theme="dark"] .rsvp-confirmation::before {
    background: linear-gradient(to bottom,
        rgba(20, 16, 10, 0.25) 0%,
        rgba(20, 16, 10, 0.08) 50%,
        rgba(20, 16, 10, 0.3) 100%);
}

[data-theme="dark"] .rsvp-confirm-subtitle {
    color: var(--color-ink-medium);
}

/* RSVP confirmation sparkles — slightly muted */
[data-theme="dark"] .rsvp-confirm-sparkle {
    filter: brightness(0.8);
}

/* RSVP confirmation petals — dimmed */
[data-theme="dark"] .rsvp-confirm-petal {
    opacity: 0.5;
}

/* RSVP back button — light ink */
[data-theme="dark"] .rsvp-inline-back {
    color: var(--color-ink-medium);
}

[data-theme="dark"] .rsvp-inline-back:hover {
    color: var(--color-ink-dark);
    background: rgba(42, 36, 32, 0.2);
}

/* --- Countdown Page --- */

/* Countdown vignette/shadow — disabled to prevent visible dark rectangle */
[data-theme="dark"] .book-countdown-left::before {
    display: none;
}

[data-theme="dark"] .book-countdown-left::after {
    display: none;
}

[data-theme="dark"] .countdown-value,
[data-theme="dark"] .book-countdown-left .countdown-value {
    color: var(--color-text-dark) !important;
    text-shadow: 0 1px 8px rgba(212, 175, 55, 0.25);
}

[data-theme="dark"] .countdown-label,
[data-theme="dark"] .book-countdown-left .countdown-label {
    color: rgba(232, 224, 208, 0.5) !important;
}

[data-theme="dark"] .countdown-dot {
    color: rgba(212, 175, 55, 0.5);
}

[data-theme="dark"] .countdown-couple-glow {
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
}

[data-theme="dark"] .countdown-bokeh-orb {
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
}

/* Countdown petals — slightly brighter */
[data-theme="dark"] .countdown-petal {
    opacity: 0.65;
}

/* --- Cover Form Elements (BookCover.razor) --- */
[data-theme="dark"] .book-cover-content {
    background: rgba(20, 14, 6, 0.65);
    border-color: rgba(212, 175, 55, 0.15);
}

[data-theme="dark"] .book-cover-form {
    background: rgba(20, 14, 6, 0.6);
    border-color: rgba(212, 175, 55, 0.12);
}

[data-theme="dark"] .book-cover-input {
    background: rgba(0, 0, 0, 0.3);
    border-bottom-color: var(--book-gold-detail);
    color: var(--book-gold-leaf);
}

[data-theme="dark"] .book-cover-input::placeholder {
    color: rgba(212, 175, 55, 0.45);
}

[data-theme="dark"] .book-cover-welcome {
    background: rgba(20, 14, 6, 0.6);
    border-color: rgba(212, 175, 55, 0.12);
}


/* ─────────────────────────────────────────────
   PHASE 5: Navigation & UI Elements
   ───────────────────────────────────────────── */

/* ── Left page vignette overlays — consistent manuscript-by-candlelight feel ──
   Applied to all info-panel back-face content for visual depth matching FAQ quality. */

/* Book info panel warm vignette */
[data-theme="dark"] .book-info-panel-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(20, 16, 10, 0.18) 0%, rgba(20, 16, 10, 0.05) 35%,
        rgba(20, 16, 10, 0.05) 65%, rgba(20, 16, 10, 0.20) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Book info panel aged shadow */
[data-theme="dark"] .book-info-panel-content::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.25),
                inset 0 0 20px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    z-index: 1;
}

/* Book index (Page 0 TOC) */
[data-theme="dark"] .book-index {
    color: var(--color-text-dark);
}

[data-theme="dark"] .book-index-names {
    color: var(--color-text-dark);
}

[data-theme="dark"] .book-index-date {
    color: rgba(232, 224, 208, 0.6);
}

[data-theme="dark"] .book-index-venue {
    color: rgba(232, 224, 208, 0.45);
}

[data-theme="dark"] .book-index-heading {
    color: var(--color-text-dark);
}

[data-theme="dark"] .book-index-entry:hover {
    background: rgba(212, 175, 55, 0.08);
}

[data-theme="dark"] .book-index-title {
    color: var(--color-text-dark);
}

[data-theme="dark"] .book-index-dots {
    border-bottom-color: rgba(232, 224, 208, 0.2);
}

[data-theme="dark"] .book-index-page {
    color: rgba(232, 224, 208, 0.5);
}

/* Closing page */

/* Closing page warm vignette */
[data-theme="dark"] .book-closing-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(20, 16, 10, 0.20) 0%, rgba(20, 16, 10, 0.06) 35%,
        rgba(20, 16, 10, 0.06) 65%, rgba(20, 16, 10, 0.22) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Closing page aged shadow */
[data-theme="dark"] .book-closing-page::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.3),
                inset 0 0 30px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    z-index: 1;
}

[data-theme="dark"] .book-closing-emblem {
    color: rgba(232, 224, 208, 0.15);
}

[data-theme="dark"] .book-closing-text {
    color: rgba(232, 224, 208, 0.85);
}

[data-theme="dark"] .book-closing-subtitle {
    color: rgba(232, 224, 208, 0.7);
}


[data-theme="dark"] .book-info-names {
    color: var(--color-text-dark);
}

[data-theme="dark"] .book-info-section-heading {
    color: var(--color-text-dark);
}

[data-theme="dark"] .book-info-section-subtitle {
    color: rgba(232, 224, 208, 0.5);
}

[data-theme="dark"] .book-info-details p {
    color: rgba(232, 224, 208, 0.6);
}

[data-theme="dark"] .book-info-date {
    color: rgba(232, 224, 208, 0.7);
}

[data-theme="dark"] .book-info-toc-item {
    color: rgba(232, 224, 208, 0.5);
}

[data-theme="dark"] .book-info-toc-item:hover {
    background: rgba(212, 175, 55, 0.06);
    color: rgba(232, 224, 208, 0.8);
}

[data-theme="dark"] .book-info-toc-dot {
    background: rgba(232, 224, 208, 0.15);
}

/* Venue / When & Where left page */
[data-theme="dark"] .book-venue-time {
    color: rgba(232, 224, 208, 0.8);
}

[data-theme="dark"] .book-venue-event {
    color: rgba(232, 224, 208, 0.45);
}

[data-theme="dark"] .book-venue-name {
    color: rgba(232, 224, 208, 0.75);
}

[data-theme="dark"] .book-venue-address {
    color: rgba(232, 224, 208, 0.5);
}

[data-theme="dark"] .book-venue-map-link {
    color: rgba(232, 224, 208, 0.55);
    border-color: rgba(232, 224, 208, 0.2);
}

[data-theme="dark"] .book-venue-map-link:hover {
    color: rgba(232, 224, 208, 0.8);
    background: rgba(212, 175, 55, 0.08);
}

/* Session timer */
[data-theme="dark"] .timer-display {
    color: rgba(180, 170, 155, 0.5);
}

/* Hint tooltips */
[data-theme="dark"] .book-cover-hint__text,
[data-theme="dark"] .book-cover-hint__explore,
[data-theme="dark"] .book-cover-hint__separator {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 0, 0, 0.25);
}

/* Hint card — darker glass in dark mode */
[data-theme="dark"] .book-hint-card {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(212, 175, 55, 0.12);
}
[data-theme="dark"] .book-hint-card__instruction {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Rotation indicator */
[data-theme="dark"] .book-cover-rotate-indicator {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(212, 175, 55, 0.2);
}


/* ─────────────────────────────────────────────
   PHASE 6: Animation Enhancement
   ───────────────────────────────────────────── */

/* Fireflies — stronger glow in dark (cloud-firefly merged into Phase 4) */
[data-theme="dark"] .faq-firefly,
[data-theme="dark"] .story-firefly {
    filter: brightness(1.3);
}

/* Golden dust motes — more visible */
[data-theme="dark"] .book-mote,
[data-theme="dark"] .book-open-mote {
    filter: brightness(1.2);
}

/* Spine glow during page turn — stronger */
[data-theme="dark"] .book-page-spine-glow {
    filter: brightness(1.3);
}

/* Spine light — more pronounced */
[data-theme="dark"] .book-spine-light {
    filter: brightness(1.2);
}

/* Enhanced animations — fireflies and dandelion brighter */
[data-theme="dark"] .firefly-dot {
    filter: brightness(1.3);
}

/* Background images — darken with overlay filter */
[data-theme="dark"] .book-page-bg {
    filter: brightness(0.35) saturate(0.7);
}

/* Watercolor background decorations — dimmed */
[data-theme="dark"] .watercolor-bg {
    filter: brightness(0.4) saturate(0.6);
}

/* Gold decorative line dividers — brighter on dark */
[data-theme="dark"] .book-page-front .gold-divider,
[data-theme="dark"] .book-page .gold-line {
    filter: brightness(1.15);
}


/* ─────────────────────────────────────────────
   Layout & Footer (MainLayout pages)
   ───────────────────────────────────────────── */

[data-theme="dark"] .wedding-layout {
    background-color: #141210;
    color: var(--color-text-dark);
}

[data-theme="dark"] .wedding-header {
    background: rgba(20, 18, 16, 0.95);
    border-bottom-color: rgba(212, 175, 55, 0.15);
}

[data-theme="dark"] .wedding-footer {
    background: #141210;
    color: rgba(232, 224, 208, 0.5);
    border-top-color: rgba(212, 175, 55, 0.1);
}

[data-theme="dark"] .wedding-main {
    background-color: #1a1714;
}


/* ─────────────────────────────────────────────
   Admin Dashboard (light adjustments only)
   ───────────────────────────────────────────── */

[data-theme="dark"] .admin-dashboard {
    background: #1a1714;
    color: var(--color-text-dark);
}

[data-theme="dark"] .admin-card {
    background: #222018;
    border-color: rgba(212, 175, 55, 0.15);
    color: var(--color-text-dark);
}

[data-theme="dark"] .admin-card h3,
[data-theme="dark"] .admin-card h4 {
    color: var(--color-text-dark);
}

[data-theme="dark"] .admin-table {
    color: var(--color-text-dark);
}

[data-theme="dark"] .admin-table th {
    background: #26221a;
    color: var(--color-text-dark);
    border-color: rgba(212, 175, 55, 0.15);
}

[data-theme="dark"] .admin-table td {
    border-color: rgba(212, 175, 55, 0.08);
}

[data-theme="dark"] .admin-table tr:hover td {
    background: rgba(212, 175, 55, 0.05);
}


/* ─────────────────────────────────────────────
   Login Page
   ───────────────────────────────────────────── */

[data-theme="dark"] .login-card {
    background: rgba(30, 26, 22, 0.85);
    border-color: rgba(212, 175, 55, 0.15);
    color: var(--color-text-dark);
}

[data-theme="dark"] .login-card input {
    background: rgba(42, 36, 32, 0.5);
    border-color: rgba(212, 175, 55, 0.2);
    color: var(--color-ink-dark);
}

[data-theme="dark"] .login-card label {
    color: var(--color-ink-medium);
}

/* ─────────────────────────────────────────────
   Back Cover QR Code — dark mode overrides
   ───────────────────────────────────────────── */

[data-theme="dark"] .back-cover-qr__frame {
    background: #1a1714;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3),
                inset 0 0 0 1px rgba(212, 175, 55, 0.3);
}

[data-theme="dark"] .back-cover-qr__frame svg rect[fill="#FFFFFF"] {
    fill: #1a1714;
}

[data-theme="dark"] .back-cover-qr__frame svg rect[fill="#2C2C2C"],
[data-theme="dark"] .back-cover-qr__frame svg path[fill="#2C2C2C"] {
    fill: #e8e0d4;
}


/* ─────────────────────────────────────────────
   Reduced motion — respect user preference
   ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    [data-theme] .book-desk-scene,
    [data-theme] .book-page-front,
    [data-theme] .book-page-back,
    [data-theme] .book-cover-page-front {
        transition: none;
    }

    .celestial-toggle {
        animation: none;
        opacity: 1;
    }

    .celestial-toggle__glow {
        animation: none;
    }

    .celestial-toggle__sun,
    .celestial-toggle__moon {
        transition: none;
    }

    .theme-ribbon__icon {
        transition: none;
    }

    .theme-ribbon:active {
        animation: none;
    }

    /* Keep simple floating toggle for MainLayout */
    .theme-toggle {
        animation: none;
        opacity: 1;
    }
}


/* ─────────────────────────────────────────────
   Responsive adjustments
   ───────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Simple toggle (admin pages) */
    .theme-toggle {
        width: 36px;
        height: 36px;
        bottom: 0.75rem;
        left: 0.75rem;
    }

    .theme-toggle svg {
        width: 16px;
        height: 16px;
    }

    /* Celestial — scale down on mobile */
    .celestial-toggle {
        top: 5%;
        right: 5%;
    }

    /* Theme ribbon — slightly smaller */
    .theme-ribbon__icon {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 375px) {
    .theme-toggle {
        width: 36px;
        height: 36px;
        bottom: 0.5rem;
        left: 0.5rem;
    }

    .theme-toggle svg {
        width: 15px;
        height: 15px;
    }
}