/**
 * ============================================
 * 2026 THEME — Mycelium v2 visual refresh
 * Scoped under body.theme-2026 — zero impact
 * on the default theme.
 *
 * Accent: #d97757 (terracotta / Mycelium v2)
 * Pairs with existing forest green base.
 * Toggle via: ?theme=2026 or localStorage
 * ============================================
 */

/* ============================================
   TOKENS — warm accent added to the tree
   ============================================ */
body.theme-2026 {
    --color-accent-warm:        #d97757;
    --color-accent-warm-light:  #e8956b;
    --color-accent-warm-dim:    rgba(217, 119, 87, 0.12);
    --color-accent-warm-glow:   rgba(217, 119, 87, 0.35);
    --radius-bento:             16px;
    --shadow-bento-hover:       0 8px 32px rgba(0, 0, 0, 0.14);
    --bento-border-accent:      3px solid var(--color-accent-warm);
}

/* ============================================
   HERO — warm tagline, gradient hint
   ============================================ */
body.theme-2026 .hero {
    background: linear-gradient(
        160deg,
        var(--color-bg) 0%,
        color-mix(in srgb, var(--color-bg-alt) 90%, #d97757 10%) 100%
    );
}

body.theme-2026 .hero-tagline {
    color: var(--color-accent-warm);
}

/* ============================================
   SECTION HEADERS — warm top-bar accent
   ============================================ */
body.theme-2026 .section-header {
    position: relative;
}

body.theme-2026 .section-header::before {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-accent-warm), var(--color-accent-warm-light));
    margin: 0 auto 1.25rem;
}

body.theme-2026 .section-title {
    color: var(--color-accent-warm);
}

/* ============================================
   BENTO GRID — rounder, deeper, scale hover
   ============================================ */
body.theme-2026 .bento-item {
    border-radius: var(--radius-bento);
    border-left: var(--bento-border-accent);
    transition:
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease,
        border-color 0.15s ease;
}

body.theme-2026 .bento-item:hover {
    transform: scale(1.025) translateY(-2px);
    box-shadow: var(--shadow-bento-hover);
    border-left-color: var(--color-accent-warm-light);
    border-top-color: var(--color-accent-warm);
    border-color: var(--color-accent-warm);
}

body.theme-2026 .bento-item h3 {
    color: var(--color-accent-warm);
}

body.theme-2026 .feature-list li::before {
    color: var(--color-accent-warm);
}

/* ============================================
   ROLE CARDS — warm hover border
   ============================================ */
body.theme-2026 .role-card:hover {
    border-color: var(--color-accent-warm);
}

body.theme-2026 .role-card h3 {
    color: var(--color-accent-warm);
}

/* ============================================
   NAVIGATION — warm active link
   ============================================ */
body.theme-2026 .nav-link.active {
    color: var(--color-accent-warm);
}

body.theme-2026 .nav-link:hover {
    color: var(--color-text);
    background: var(--color-accent-warm-dim);
}

/* ============================================
   FAIRY iMENU — warm accent button
   ============================================ */
body.theme-2026 .imenu-fairy-btn {
    background: var(--color-accent-warm);
    box-shadow:
        0 4px 16px var(--color-accent-warm-glow),
        0 2px 4px rgba(0, 0, 0, 0.15);
}

body.theme-2026 .imenu-fairy-btn:hover,
body.theme-2026 .imenu-fairy-btn:focus-visible {
    background: var(--color-accent-warm-light);
    box-shadow:
        0 6px 24px var(--color-accent-warm-glow),
        0 2px 6px rgba(0, 0, 0, 0.2);
}

body.theme-2026 .imenu-fairy-item:hover,
body.theme-2026 .imenu-fairy-item:focus-visible {
    border-color: var(--color-accent-warm);
    color: var(--color-accent-warm);
}

/* Pulse uses warm color */
body.theme-2026 .imenu-fairy.open .imenu-fairy-btn {
    animation: fairy-pulse-warm 1s ease-out;
}

@keyframes fairy-pulse-warm {
    0%   { box-shadow: 0 0 0 0 var(--color-accent-warm-glow), 0 4px 16px var(--color-accent-warm-glow); }
    60%  { box-shadow: 0 0 0 16px rgba(217,119,87,0), 0 4px 16px var(--color-accent-warm-glow); }
    100% { box-shadow: 0 6px 24px var(--color-accent-warm-glow), 0 2px 6px rgba(0,0,0,0.2); }
}

/* ============================================
   LINKS + FOOTER
   ============================================ */
body.theme-2026 a {
    color: var(--color-accent-warm-light);
}

body.theme-2026 a:hover {
    color: var(--color-accent-warm);
}

body.theme-2026 .footer-link:hover {
    color: var(--color-accent-warm);
}

body.theme-2026 .logo .infinity-symbol {
    color: var(--color-accent-warm);
}

/* ============================================
   VARIANT SWITCHER — active indicator
   ============================================ */
body.theme-2026 .iv-variant-toggle {
    border-color: var(--color-accent-warm);
    color: var(--color-accent-warm);
}

body.theme-2026 .iv-variant-toggle::after {
    background: var(--color-accent-warm);
}

/* ============================================
   DARK THEME COMPAT — warm tones in dark mode
   ============================================ */
[data-theme="dark"] body.theme-2026,
[data-theme="dark"].theme-2026 {
    --color-accent-warm-dim: rgba(217, 119, 87, 0.15);
}

[data-theme="dark"] body.theme-2026 .bento-item:hover,
[data-theme="dark"].theme-2026 .bento-item:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}