/* ========================================
   Winter Holiday Theme
   Frosty blues, silver, warm gold accents
   with animated falling snow
   ======================================== */

[data-theme="holiday"] {
    /* Sidebar stays frosty/cold — the outside */
    --sidebar-bg: #0b1929;
    --sidebar-header-bg: #0f2035;
    --topbar-bg: #1a1210;
    --content-bg: transparent;
    --page-bg: transparent;

    /* Warm cabin interior — cards like wooden panels */
    --card-bg: rgba(35, 28, 22, 0.96);
    --card-header-bg: #2a2118;
    --card-border: #3d3028;

    --table-bg: rgba(35, 28, 22, 0.96);
    --table-header-bg: #2a2118;
    --table-border: #3d3028;
    --table-hover-bg: #2e251c;
    --table-stripe-bg: #1f1914;

    --text-primary: #f0e8dc;
    --text-secondary: #c8b8a0;
    --text-muted: #8a7860;
    --text-inverse: #181210;

    --border-color: #3d3028;
    --border-light: #4a3a2e;
    --sidebar-header-border: rgba(42, 80, 128, 0.3);
    --topbar-border: rgba(60, 48, 40, 0.4);

    --scrollbar-thumb: #4a3a2e;
    --scrollbar-thumb-hover: #5c4a3a;

    /* Sidebar stays icy blue */
    --sidebar-text: #a0c0dc;
    --sidebar-text-hover: #c8a850;
    --sidebar-active-bg: rgba(200, 168, 80, 0.12);
    --sidebar-active-text: #c8a850;
    --sidebar-active-border: #c8a850;
    --nav-group-bg: transparent;
    --nav-group-border: transparent;
    --nav-group-hover-bg: rgba(200, 168, 80, 0.06);

    --topbar-text: #c8b8a0;
    --topbar-text-active: #c8a850;

    /* Warm gold buttons — like firelight */
    --btn-primary-bg: #c8a850;
    --btn-primary-bg-hover: #d4b860;
    --btn-primary-text: #181210;
    --btn-secondary-bg: #2a2118;
    --btn-secondary-bg-hover: #3d3028;
    --btn-secondary-text: #c8b8a0;
    --btn-secondary-border: #3d3028;
    --btn-outline-border: #4a3a2e;
    --btn-outline-text: #c8b8a0;

    --input-bg: #1f1914;
    --input-border: #3d3028;
    --input-text: #f0e8dc;
    --input-placeholder: #8a7860;
    --input-focus-border: #c8a850;
    --input-disabled-bg: #181210;

    --dropdown-bg: #231c16;
    --dropdown-border: #3d3028;
    --dropdown-text: #c8b8a0;
    --dropdown-hover-bg: #2e251c;
    --dropdown-hover-text: #c8a850;

    --modal-bg: #231c16;
    --modal-header-bg: #2a2118;
    --modal-border: #3d3028;
    --modal-backdrop: rgba(18, 14, 10, 0.88);

    --alert-info-bg: rgba(100, 180, 255, 0.08);
    --alert-info-border: #64b4ff;
    --alert-info-text: #90ccff;
    --alert-success-bg: rgba(100, 200, 120, 0.08);
    --alert-success-border: #64c878;
    --alert-success-text: #80d890;
    --alert-warning-bg: rgba(200, 168, 80, 0.12);
    --alert-warning-border: #c8a850;
    --alert-warning-text: #d4b860;
    --alert-danger-bg: rgba(220, 80, 80, 0.08);
    --alert-danger-border: #dc5050;
    --alert-danger-text: #e87070;

    --success-color: #64c878;
    --success-hover: #50a060;
    --warning-color: #c8a850;
    --warning-hover: #a08840;
    --danger-color: #dc5050;
    --danger-hover: #b04040;

    --progress-bg: #2a2118;

    --avatar-bg: #c8a850;
    --logo-filter: invert(100%) sepia(0%) saturate(0%) brightness(100%);
    --shadow: 0 4px 20px rgba(40, 30, 20, 0.3), 0 0 8px rgba(200, 168, 80, 0.08);
    --link-color: #d4a84a;
    --link-hover-color: #e0be68;

    /* ── canonical --tl-* contract bridge ───────────────────────────── */
    /* --tl-bg-base is a SOLID deep winter blue (the body gradient's base stop, = --sidebar-bg);
       --content-bg / --page-bg are transparent here so the snow/gradient shows through. */
    --tl-bg-base:        #0b1929;
    --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, #181210);

    --tl-accent-primary:        var(--link-color, var(--btn-primary-bg-hover, var(--btn-primary-bg)));
    --tl-accent-primary-light:  var(--link-hover-color, var(--sidebar-text-hover, var(--link-color)));
    --tl-accent-primary-dark:   var(--btn-primary-bg, 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, #181210);
    --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, #64c878);
    --tl-error:   var(--danger-color, #dc5050);
    --tl-warning: var(--warning-color, #c8a850);
    --tl-info:    var(--alert-info-text, var(--link-color, #90ccff));
    --tl-error-bg:     var(--alert-danger-bg, rgba(220, 80, 80, .08));
    --tl-error-border: var(--alert-danger-border, var(--danger-color, #dc5050));

    --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));
}

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

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

/* ========================================
   Animated Falling Snow
   Two layers for parallax depth effect
   ======================================== */

[data-theme="holiday"]:not([data-effects-off]):not([data-effect-snow-off]) body::before,
[data-theme="holiday"]:not([data-effects-off]):not([data-effect-snow-off]) body::after {
    content: '';
    position: fixed;
    top: -100px;
    left: 0;
    width: 100%;
    height: calc(100% + 200px);
    pointer-events: none;
    /* Decorative overlay: above page background, BELOW modals/toasts/overlays */
    z-index: 2;
    background-image:
        radial-gradient(2px 2px at 50px 80px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 150px 200px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 250px 50px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 350px 300px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 450px 120px, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 100px 350px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 550px 250px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 650px 180px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 750px 400px, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 200px 450px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 850px 100px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 300px 500px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 950px 320px, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 500px 550px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 700px 50px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 400px 150px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 800px 480px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 600px 380px, rgba(255,255,255,0.8), transparent);
    background-size: 1000px 600px;
    animation: snowfall 8s linear infinite;
}

[data-theme="holiday"]:not([data-effects-off]):not([data-effect-snow-off]) body::after {
    background-image:
        radial-gradient(3px 3px at 80px 150px, rgba(255,255,255,0.5), transparent),
        radial-gradient(2.5px 2.5px at 220px 30px, rgba(255,255,255,0.4), transparent),
        radial-gradient(3px 3px at 420px 280px, rgba(255,255,255,0.5), transparent),
        radial-gradient(2.5px 2.5px at 580px 90px, rgba(255,255,255,0.3), transparent),
        radial-gradient(3px 3px at 720px 350px, rgba(255,255,255,0.5), transparent),
        radial-gradient(2.5px 2.5px at 180px 420px, rgba(255,255,255,0.4), transparent),
        radial-gradient(3px 3px at 380px 500px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2.5px 2.5px at 900px 200px, rgba(255,255,255,0.5), transparent),
        radial-gradient(3px 3px at 620px 530px, rgba(255,255,255,0.4), transparent),
        radial-gradient(2.5px 2.5px at 820px 60px, rgba(255,255,255,0.3), transparent),
        radial-gradient(3px 3px at 120px 560px, rgba(255,255,255,0.5), transparent),
        radial-gradient(2.5px 2.5px at 480px 380px, rgba(255,255,255,0.4), transparent);
    background-size: 1000px 600px;
    animation: snowfall 12s linear infinite;
    opacity: 0.6;
}

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

/* Holiday theme personality */
[data-theme="holiday"] {
    --focus-ring-color: rgba(200, 168, 80, 0.3);
    --border-radius-card: 14px;
    --border-radius-btn: 16px;
    --scrollbar-track: #181210;
}

[data-theme="holiday"] ::selection {
    background-color: rgba(200, 168, 80, 0.3);
    color: #e8f0f8;
}

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

[data-theme="holiday"] body {
    background: linear-gradient(180deg, #0b1929 0%, #181210 20%, #1c1612 50%, #181210 100%) fixed !important;
}

/* ========================================
   Frosted Window Edge
   Icy vignette around the entire viewport
   ======================================== */

[data-theme="holiday"]:not([data-effects-off]):not([data-effect-frost-off]) #page-root::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    /* Decorative overlay: above page background, BELOW modals/toasts/overlays */
    z-index: 1;
    background:
        /* Frost corners — thicker ice buildup */
        radial-gradient(ellipse at 0% 0%, rgba(180, 210, 240, 0.25) 0%, transparent 25%),
        radial-gradient(ellipse at 100% 0%, rgba(180, 210, 240, 0.20) 0%, transparent 22%),
        radial-gradient(ellipse at 0% 100%, rgba(180, 210, 240, 0.20) 0%, transparent 22%),
        radial-gradient(ellipse at 100% 100%, rgba(180, 210, 240, 0.18) 0%, transparent 20%),
        /* Frost edges — thin icy border */
        linear-gradient(to right, rgba(200, 225, 255, 0.12) 0%, transparent 4%),
        linear-gradient(to left, rgba(200, 225, 255, 0.12) 0%, transparent 4%),
        linear-gradient(to bottom, rgba(200, 225, 255, 0.10) 0%, transparent 3%),
        linear-gradient(to top, rgba(200, 225, 255, 0.10) 0%, transparent 3%);
    border-radius: 0;
}

/* ========================================
   Twinkling Christmas Lights
   Coloured dots along the top edge
   ======================================== */

[data-theme="holiday"]:not([data-effects-off]):not([data-effect-lights-off]) #page-root::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    pointer-events: none;
    /* Decorative overlay: above page background, BELOW modals/toasts/overlays */
    z-index: 3;
    background-image:
        /* Red */
        radial-gradient(circle 3px at 30px 3px, #ff3333, transparent),
        radial-gradient(circle 3px at 190px 3px, #ff3333, transparent),
        radial-gradient(circle 3px at 350px 3px, #ff3333, transparent),
        radial-gradient(circle 3px at 510px 3px, #ff3333, transparent),
        radial-gradient(circle 3px at 670px 3px, #ff3333, transparent),
        radial-gradient(circle 3px at 830px 3px, #ff3333, transparent),
        radial-gradient(circle 3px at 990px 3px, #ff3333, transparent),
        radial-gradient(circle 3px at 1150px 3px, #ff3333, transparent),
        radial-gradient(circle 3px at 1310px 3px, #ff3333, transparent),
        radial-gradient(circle 3px at 1470px 3px, #ff3333, transparent),
        /* Green */
        radial-gradient(circle 3px at 70px 3px, #33cc33, transparent),
        radial-gradient(circle 3px at 230px 3px, #33cc33, transparent),
        radial-gradient(circle 3px at 390px 3px, #33cc33, transparent),
        radial-gradient(circle 3px at 550px 3px, #33cc33, transparent),
        radial-gradient(circle 3px at 710px 3px, #33cc33, transparent),
        radial-gradient(circle 3px at 870px 3px, #33cc33, transparent),
        radial-gradient(circle 3px at 1030px 3px, #33cc33, transparent),
        radial-gradient(circle 3px at 1190px 3px, #33cc33, transparent),
        radial-gradient(circle 3px at 1350px 3px, #33cc33, transparent),
        radial-gradient(circle 3px at 1510px 3px, #33cc33, transparent),
        /* Gold */
        radial-gradient(circle 3px at 110px 3px, #ffcc00, transparent),
        radial-gradient(circle 3px at 270px 3px, #ffcc00, transparent),
        radial-gradient(circle 3px at 430px 3px, #ffcc00, transparent),
        radial-gradient(circle 3px at 590px 3px, #ffcc00, transparent),
        radial-gradient(circle 3px at 750px 3px, #ffcc00, transparent),
        radial-gradient(circle 3px at 910px 3px, #ffcc00, transparent),
        radial-gradient(circle 3px at 1070px 3px, #ffcc00, transparent),
        radial-gradient(circle 3px at 1230px 3px, #ffcc00, transparent),
        radial-gradient(circle 3px at 1390px 3px, #ffcc00, transparent),
        radial-gradient(circle 3px at 1550px 3px, #ffcc00, transparent),
        /* Blue */
        radial-gradient(circle 3px at 150px 3px, #3399ff, transparent),
        radial-gradient(circle 3px at 310px 3px, #3399ff, transparent),
        radial-gradient(circle 3px at 470px 3px, #3399ff, transparent),
        radial-gradient(circle 3px at 630px 3px, #3399ff, transparent),
        radial-gradient(circle 3px at 790px 3px, #3399ff, transparent),
        radial-gradient(circle 3px at 950px 3px, #3399ff, transparent),
        radial-gradient(circle 3px at 1110px 3px, #3399ff, transparent),
        radial-gradient(circle 3px at 1270px 3px, #3399ff, transparent),
        radial-gradient(circle 3px at 1430px 3px, #3399ff, transparent),
        radial-gradient(circle 3px at 1590px 3px, #3399ff, transparent);
    background-repeat: repeat-x;
    background-size: 1600px 6px;
}

@media (prefers-reduced-motion: no-preference) {
    [data-theme="holiday"]:not([data-effects-off]):not([data-effect-lights-off]) #page-root::after {
        animation: lights-twinkle 2s ease-in-out infinite alternate;
    }

    @keyframes lights-twinkle {
        0%   { opacity: 1; filter: brightness(1); }
        25%  { opacity: 0.7; filter: brightness(0.8); }
        50%  { opacity: 1; filter: brightness(1.2); }
        75%  { opacity: 0.8; filter: brightness(0.9); }
        100% { opacity: 1; filter: brightness(1.1); }
    }
}