/* Dark-theme overrides. Load after base.css + studio-nav.css.
   Structure and light defaults live in base.css; this file only re-paints for
   dark. Anything already driven by a token (var(--surface), var(--ink), ...)
   needs no rule here. */

/* Footer: stack light/dark logos (hidden one must not reserve flex space) */
.footer-mark {
    position: relative;
    width: 75px;
    height: 75px;
    flex-shrink: 0;
    line-height: 0;
}

.footer-mark .handmade-art-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 75px;
    height: 75px;
    margin: 0;
    object-fit: contain;
    object-position: center;
    display: block;
    opacity: 0.9;
}

/* Light-variant logo assets (no CSS invert — cleaner on dark backgrounds) */
.brand-mark--dark {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html[data-theme="dark"] .brand-mark--light {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html[data-theme="dark"] .brand-mark--dark {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* --- STUDIO-NAV DARK GRADIENTS --- */
html[data-theme="dark"] body.studio-shell .tagline-card {
    background: linear-gradient(135deg, #1e1c19 0%, #161514 100%) !important;
    border-color: var(--line) !important;
}

html[data-theme="dark"] body.studio-shell a.category-card.category-card--curated {
    background: linear-gradient(135deg, #2a241c 0%, #1f1b17 48%, #252019 100%) !important;
    border-color: rgba(154, 125, 79, 0.32) !important;
    box-shadow:
        0 12px 30px -16px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] body.studio-shell a.category-card.category-card--curated:hover {
    background: linear-gradient(135deg, #322a21 0%, #252019 50%, #2c241c 100%) !important;
    border-color: rgba(176, 148, 98, 0.38) !important;
}

html[data-theme="dark"] body.studio-shell a.category-card.category-card--curated .card-title-en {
    color: #f5f3ef !important;
}

/* --- HOME --- */
html[data-theme="dark"] .event-teaser-wrap {
    background-color: var(--surface);
}

html[data-theme="dark"] .event-teaser {
    background: var(--surface-raised);
    border-color: var(--line);
    box-shadow: var(--shadow-rest);
    color: var(--ink);
}

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

html[data-theme="dark"] .event-teaser-date,
html[data-theme="dark"] .event-teaser-chevron {
    color: var(--ink-soft);
}

html[data-theme="dark"] .content-stream {
    background-color: var(--surface);
}

html[data-theme="dark"] .luxury-card {
    background: var(--surface-raised);
    border-color: var(--line);
    box-shadow: var(--shadow-rest);
}

html[data-theme="dark"] .luxury-card .card-title,
html[data-theme="dark"] .luxury-card .card-text,
html[data-theme="dark"] .luxury-card .poetic-line {
    color: var(--ink);
}

html[data-theme="dark"] .buy-strip-card .glass-overlay {
    background: linear-gradient(180deg, transparent 0%, rgba(17, 16, 15, 0.72) 100%);
}

@media (min-width: 769px) {
    html[data-theme="dark"] .footer-area {
        background: var(--header-glass) !important;
        border-top-color: var(--line) !important;
        box-shadow: 0 -2px 24px -4px rgba(0, 0, 0, 0.35) !important;
    }
}

/* --- STORE --- */
html[data-theme="dark"] .flower-code {
    color: var(--ink-soft);
}

html[data-theme="dark"] .store-top-msg {
    color: var(--ink-soft);
}

html[data-theme="dark"] .order-sheet-btn--primary {
    color: #fffefb;
}

/* --- CONTACT --- */
html[data-theme="dark"] .title-card,
html[data-theme="dark"] .cta-btn {
    background: var(--surface-raised);
    border-color: var(--line);
    color: var(--ink);
    box-shadow: var(--shadow-rest);
}

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

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

/* --- EVENT / WORKSHOP image frames --- */
html[data-theme="dark"] .workshop-media .carousel-wrapper,
html[data-theme="dark"] .workshop-media .carousel-item,
html[data-theme="dark"] .event-carousel-wrap,
html[data-theme="dark"] .event-carousel,
html[data-theme="dark"] .event-carousel-item,
html[data-theme="dark"] .event-image-wrap {
    background: var(--surface);
}

@media (min-width: 769px) {
    html[data-theme="dark"] .workshop-post,
    html[data-theme="dark"] .event-story {
        background: var(--surface-raised);
        border-color: var(--line);
    }
}

/* --- 404 / TRAINING cards --- */
html[data-theme="dark"] .notfound-card,
html[data-theme="dark"] .message-card {
    background: linear-gradient(135deg, var(--surface-raised) 0%, var(--surface-muted) 100%);
    border-color: var(--line);
    color: var(--ink);
}

html[data-theme="dark"] .notfound-fa,
html[data-theme="dark"] .message-fa {
    color: var(--ink);
}

html[data-theme="dark"] .notfound-en,
html[data-theme="dark"] .message-en {
    color: var(--ink-soft);
}

html[data-theme="dark"] .notfound-home {
    background: var(--surface-muted);
    border-color: var(--line);
    color: var(--ink);
}