/* ========================================
   Halloween Theme
   Pumpkin orange, eerie green, deep black
   ======================================== */

[data-theme="halloween"] {
    --sidebar-bg: #0d0a07;
    --sidebar-header-bg: #121010;
    --topbar-bg: #121010;
    --content-bg: transparent;
    --page-bg: transparent;

    --card-bg: rgba(30, 23, 18, 0.96);
    --card-header-bg: #251d16;
    --card-border: #3d2e1f;

    --table-bg: rgba(30, 23, 18, 0.96);
    --table-header-bg: #251d16;
    --table-border: #3d2e1f;
    --table-hover-bg: #2a2018;
    --table-stripe-bg: #1a1410;

    --text-primary: #f0e6d6;
    --text-secondary: #c4a882;
    --text-muted: #8a7050;
    --text-inverse: #0d0a07;

    --border-color: #3d2e1f;
    --border-light: #4d3a28;
    --sidebar-header-border: rgba(61, 46, 31, 0.3);
    --topbar-border: rgba(61, 46, 31, 0.3);

    --scrollbar-thumb: #4d3a28;
    --scrollbar-thumb-hover: #5e4832;

    --sidebar-text: #c4a882;
    --sidebar-text-hover: #ff6600;
    --sidebar-active-bg: rgba(255, 102, 0, 0.12);
    --sidebar-active-text: #ff6600;
    --sidebar-active-border: #ff6600;
    --nav-group-bg: transparent;
    --nav-group-border: transparent;
    --nav-group-hover-bg: rgba(255, 102, 0, 0.06);

    --topbar-text: #c4a882;
    --topbar-text-active: #ff6600;

    --btn-primary-bg: #ff6600;
    --btn-primary-bg-hover: #ff8533;
    --btn-primary-text: #000000;
    --btn-secondary-bg: #251d16;
    --btn-secondary-bg-hover: #3d2e1f;
    --btn-secondary-text: #c4a882;
    --btn-secondary-border: #3d2e1f;
    --btn-outline-border: #4d3a28;
    --btn-outline-text: #c4a882;

    --input-bg: #1e1712;
    --input-border: #3d2e1f;
    --input-text: #f0e6d6;
    --input-placeholder: #8a7050;
    --input-focus-border: #ff6600;
    --input-disabled-bg: #0d0a07;

    --dropdown-bg: #1e1712;
    --dropdown-border: #3d2e1f;
    --dropdown-text: #c4a882;
    --dropdown-hover-bg: #2a2018;
    --dropdown-hover-text: #ff6600;

    --modal-bg: #1e1712;
    --modal-header-bg: #251d16;
    --modal-border: #3d2e1f;
    --modal-backdrop: rgba(13, 10, 7, 0.9);

    --alert-info-bg: rgba(138, 43, 226, 0.12);
    --alert-info-border: #8a2be2;
    --alert-info-text: #b366ff;
    --alert-success-bg: rgba(57, 255, 20, 0.08);
    --alert-success-border: #39ff14;
    --alert-success-text: #39ff14;
    --alert-warning-bg: rgba(255, 102, 0, 0.12);
    --alert-warning-border: #ff6600;
    --alert-warning-text: #ff8533;
    --alert-danger-bg: rgba(200, 0, 0, 0.12);
    --alert-danger-border: #cc0000;
    --alert-danger-text: #ff3333;

    --success-color: #39ff14;
    --success-hover: #2ecc10;
    --warning-color: #ff6600;
    --warning-hover: #cc5200;
    --danger-color: #cc0000;
    --danger-hover: #990000;

    --progress-bg: #251d16;

    --avatar-bg: #ff6600;
    --logo-filter: invert(50%) sepia(90%) saturate(2000%) hue-rotate(5deg) brightness(105%);
    --shadow: 0 4px 24px rgba(255, 102, 0, 0.08), 0 0 8px rgba(138, 43, 226, 0.06);
    --link-color: #ff6600;
    --link-hover-color: #ff8533;

    /* ── canonical --tl-* contract bridge ───────────────────────────── */
    --tl-bg-base:        #0d0a07;   /* SOLID near-black base (body gradient base / --sidebar-bg) */
    --tl-bg-elevated:    var(--card-bg);
    --tl-bg-elevated-2:  var(--card-header-bg, var(--table-stripe-bg, var(--card-bg)));
    --tl-bg-elevated-3:  var(--btn-secondary-bg, var(--table-hover-bg, var(--card-bg)));
    --tl-bg-hover:       var(--table-hover-bg, var(--nav-group-hover-bg, var(--card-bg)));
    --tl-bg-input:       var(--input-bg, var(--card-bg));

    --tl-text-primary:   var(--text-primary);
    --tl-text-secondary: var(--text-secondary, var(--text-primary));
    --tl-text-muted:     var(--text-muted, var(--text-secondary));
    --tl-text-subtle:    var(--input-placeholder, var(--text-muted));
    --tl-text-inverse:   var(--text-inverse, #0a0a0a);

    --tl-accent-primary:        var(--btn-primary-bg, var(--link-color));   /* pumpkin orange #ff6600 */
    --tl-accent-primary-light:  var(--btn-primary-bg-hover, var(--link-hover-color, var(--link-color)));
    --tl-accent-primary-dark:   var(--warning-hover, var(--link-color));

    --tl-border-default: var(--border-color, var(--card-border));
    --tl-border-subtle:  var(--card-border, var(--border-color));
    --tl-border-strong:  var(--border-light, var(--input-border, var(--border-color)));
    --tl-border-focus:   var(--input-focus-border, var(--link-color, var(--btn-primary-bg)));

    --tl-card-bg:        var(--card-bg);
    --tl-card-border:    var(--card-border, var(--border-color));
    --tl-card-header-bg: var(--card-header-bg, var(--card-bg));

    --tl-button-primary-bg:     var(--btn-primary-bg);
    --tl-button-primary-text:   var(--btn-primary-text, #000);
    --tl-button-secondary-bg:   var(--btn-secondary-bg, var(--card-header-bg));
    --tl-button-secondary-text: var(--btn-secondary-text, var(--text-secondary));

    --tl-success: var(--success-color, #39ff14);
    --tl-error:   var(--danger-color, #cc0000);
    --tl-warning: var(--warning-color, #ff6600);
    --tl-info:    var(--alert-info-text, var(--link-color, #b366ff));
    --tl-error-bg:     var(--alert-danger-bg, rgba(204, 0, 0, .12));
    --tl-error-border: var(--alert-danger-border, var(--danger-color, #cc0000));

    --tl-shadow-sm: var(--shadow, 0 1px 2px rgba(0,0,0,.3));
    --tl-shadow-md: var(--shadow, 0 4px 12px rgba(0,0,0,.4));
    --tl-shadow-lg: var(--shadow, 0 10px 30px rgba(0,0,0,.5));
}

/* Halloween icon overrides */
[data-theme="halloween"] .theme-toggle .sun-icon,
[data-theme="halloween"] .theme-toggle .moon-icon {
    display: none !important;
}

[data-theme="halloween"] .theme-toggle .palette-icon {
    display: block !important;
}

/* Halloween theme personality */
[data-theme="halloween"] {
    --focus-ring-color: rgba(255, 102, 0, 0.3);
    --scrollbar-track: #0d0a07;
}

[data-theme="halloween"] ::selection {
    background-color: rgba(255, 102, 0, 0.3);
    color: #f0e6d6;
}

/* backdrop-filter removed for performance — cards use opaque backgrounds */

[data-theme="halloween"] body {
    background: linear-gradient(180deg, #0d0a07 0%, #1a1410 30%, #0d0a07 100%) fixed !important;
}

/* Candle flicker glow on cards */
@media (prefers-reduced-motion: no-preference) {
    [data-theme="halloween"]:not([data-effects-off]):not([data-effect-candle-off]) .card,
    [data-theme="halloween"]:not([data-effects-off]):not([data-effect-candle-off]) .content-card,
    [data-theme="halloween"]:not([data-effects-off]):not([data-effect-candle-off]) .content-section,
    [data-theme="halloween"]:not([data-effects-off]):not([data-effect-candle-off]) .stat-card,
    [data-theme="halloween"]:not([data-effects-off]):not([data-effect-candle-off]) .collapsible-section {
        animation: candle-flicker 3s ease-in-out infinite;
    }

    @keyframes candle-flicker {
        0%, 100% { box-shadow: 0 0 8px rgba(255, 102, 0, 0.06); }
        25%      { box-shadow: 0 0 16px rgba(255, 102, 0, 0.12); }
        50%      { box-shadow: 0 0 6px rgba(255, 102, 0, 0.04); }
        75%      { box-shadow: 0 0 20px rgba(255, 102, 0, 0.1); }
    }
}

/* ========================================
   Floating Embers / Spirits
   Rising particles — inverse of holiday snow
   Two layers for parallax depth
   ======================================== */

[data-theme="halloween"]:not([data-effects-off]):not([data-effect-embers-off]) body::before {
    content: '';
    position: fixed;
    bottom: -100px;
    left: 0;
    width: 100%;
    height: calc(100% + 200px);
    pointer-events: none;
    z-index: 9998;
    background-image:
        radial-gradient(2px 2px at 60px 100px, rgba(255, 102, 0, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 180px 250px, rgba(138, 43, 226, 0.6), transparent),
        radial-gradient(2px 2px at 300px 80px, rgba(255, 140, 0, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 420px 350px, rgba(57, 255, 20, 0.5), transparent),
        radial-gradient(2px 2px at 540px 180px, rgba(255, 102, 0, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 660px 420px, rgba(138, 43, 226, 0.5), transparent),
        radial-gradient(2px 2px at 780px 60px, rgba(255, 140, 0, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 130px 480px, rgba(57, 255, 20, 0.4), transparent),
        radial-gradient(2px 2px at 350px 300px, rgba(255, 102, 0, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 500px 520px, rgba(138, 43, 226, 0.6), transparent),
        radial-gradient(2px 2px at 700px 150px, rgba(255, 140, 0, 0.5), transparent),
        radial-gradient(1.5px 1.5px at 850px 380px, rgba(57, 255, 20, 0.5), transparent),
        radial-gradient(2px 2px at 950px 280px, rgba(255, 102, 0, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 240px 560px, rgba(138, 43, 226, 0.7), transparent),
        radial-gradient(2px 2px at 620px 440px, rgba(255, 140, 0, 0.5), transparent);
    background-size: 1000px 600px;
    animation: embers-rise 10s linear infinite;
}

@keyframes embers-rise {
    from { transform: translateY(0); }
    to { transform: translateY(-600px); }
}

/* Ground fog effect */
[data-theme="halloween"]:not([data-effects-off]):not([data-effect-fog-off]) body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: -50%;
    width: 200%;
    height: 25vh;
    pointer-events: none;
    z-index: 9998;
    background: linear-gradient(
        to top,
        rgba(20, 10, 5, 0.35) 0%,
        rgba(20, 10, 5, 0.12) 50%,
        transparent 100%
    );
}

@media (prefers-reduced-motion: no-preference) {
    [data-theme="halloween"]:not([data-effects-off]):not([data-effect-fog-off]) body::after {
        animation: fog-drift 20s ease-in-out infinite alternate;
    }

    @keyframes fog-drift {
        from { transform: translateX(0); }
        to { transform: translateX(10%); }
    }
}

/* TODO: Add SVG jack-o-lantern and cobweb decorations later */