/* ==========================================================================
   winter.css — the "winter" site theme (SiteTheme.winter)

   Same cozy pixel room as the default cozy-fall theme, snowed in: frost
   and pine instead of oat and rust, string lights along the title bar,
   snow on the footer ground, a light snowfall instead of falling leaves.

   Everything here is scoped to <html data-theme="winter">, which
   base.leaf stamps from the `site_theme` setting (#siteTheme()). The file
   is loaded for every theme and is inert unless that attribute matches,
   so switching themes in the admin needs no deploy and no cache bust.

   Loaded after styles.css + cozy.css, before the admin theme overrides.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Palette

   Light mode is a bright morning after snow: frosted paper, blue-black
   ink, cranberry accent, pine frames. Dark mode is the same room at night
   with the tree lit: midnight blue walls, warm string-light gold accent.
   All text tokens clear WCAG AA (4.5:1) on bg, surface, border-light and
   the footer.

   :where() keeps these at the specificity of a bare :root, so they beat
   the defaults in styles.css by source order while the admin accent /
   font overrides (#129, emitted after this file) still win.
   -------------------------------------------------------------------------- */
:root:where([data-theme="winter"]) {
    --color-bg: #e6eef3;
    --color-surface: #f7fafb;
    --color-text: #1c2733;
    --color-text-secondary: #3a4958;
    --color-text-muted: #52616f;
    --color-border: #b7c8d5;
    --color-border-light: #d5e0e8;
    --color-accent: #a3262e;
    --color-accent-hover: #7f1d24;
    --color-on-accent: #fffaf2;

    --color-frame: #2f4a3c;
    --color-drop: #b3c4d1;

    /* footer ground: fresh snow over frozen dirt */
    --color-grass: #ffffff;
    --color-dirt: #8497aa;
    --color-footer-bg: #d5e0e8;

    --color-code-bg: #1a2330;
    --color-code-text: #e6eef5;

    /* snowfall + string lights */
    --color-snow: #ffffff;
    --color-snow-edge: #89a5bf;
    --color-wire: #2f4a3c;
    --light-a: #c2402a;
    --light-b: #e0a52e;
    --light-c: #3f7a4c;
    --light-d: #3d79b8;
}

@media (prefers-color-scheme: dark) {
    :root:where([data-theme="winter"]) {
        --color-bg: #131a25;
        --color-surface: #1c2634;
        --color-text: #eef3f7;
        --color-text-secondary: #c3cfdb;
        --color-text-muted: #94a4b6;
        --color-border: #34435a;
        --color-border-light: #232f41;
        --color-accent: #f2bd5a;
        --color-accent-hover: #ffd88a;
        --color-on-accent: #1c2733;

        --color-frame: #4a6078;
        --color-drop: #0a0f17;

        --color-grass: #dfe8f0;
        --color-dirt: #2b384b;
        --color-footer-bg: #0e141d;

        --color-code-bg: #0c1119;
        --color-code-text: #e6eef5;

        --color-snow: #eef4f9;
        --color-snow-edge: transparent;
        --color-wire: #0a0f17;
        --light-a: #f0604a;
        --light-b: #f7c64e;
        --light-c: #6fcf7f;
        --light-d: #6fc3e8;
    }
}

/* --------------------------------------------------------------------------
   2. Sprite swaps

   Templates keep their cozy-fall sprite inline and name a winter stand-in
   with data-winter="<sprite>"; the swap (and the stand-in's size, mirrored
   from Public/sprites/<name>.json) lives here. !important is needed to
   beat the inline custom properties.
   -------------------------------------------------------------------------- */
:root[data-theme="winter"] [data-winter="snowflake"] {
    --sprite: url(/sprites/snowflake.svg) !important;
    --w: 11 !important;
    --h: 11 !important;
    --frames: 1 !important;
}

:root[data-theme="winter"] [data-winter="gift"] {
    --sprite: url(/sprites/gift.svg) !important;
    --w: 14 !important;
    --h: 12 !important;
    --frames: 1 !important;
}

:root[data-theme="winter"] [data-winter="snowman"] {
    --sprite: url(/sprites/snowman.svg) !important;
    --w: 20 !important;
    --h: 19 !important;
    --frames: 1 !important;
}

:root[data-theme="winter"] [data-winter="snow-pile"] {
    --sprite: url(/sprites/snow-pile.svg) !important;
    --w: 40 !important;
    --h: 14 !important;
    --frames: 1 !important;
}

:root[data-theme="winter"] [data-winter="tree-lights"] {
    --sprite: url(/sprites/tree-lights-sheet.svg) !important;
    --w: 20 !important;
    --h: 24 !important;
    --frames: 2 !important;
    --fps: 2 !important;
}

/* --------------------------------------------------------------------------
   3. String lights along the bottom of the title bar

   Two interleaved rows of square pixel bulbs hanging off a wire, drawn
   with gradients on the header's pseudo-elements. The rows take turns
   dimming so the string twinkles; under reduced motion both stay lit.
   -------------------------------------------------------------------------- */
:root[data-theme="winter"] .site-header::before,
:root[data-theme="winter"] .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
    pointer-events: none;
    animation: winter-twinkle 2.4s steps(1) infinite;
}

/* wire + bulbs a (x 12) and c (x 60) */
:root[data-theme="winter"] .site-header::before {
    background-image:
        linear-gradient(var(--color-wire), var(--color-wire)),
        repeating-linear-gradient(90deg,
            transparent 0 12px, var(--light-a) 12px 18px,
            transparent 18px 60px, var(--light-c) 60px 66px,
            transparent 66px 96px);
    background-size: 100% 2px, 100% 6px;
    background-position: 0 0, 0 4px;
    background-repeat: no-repeat, no-repeat;
}

/* bulbs b (x 36) and d (x 84), half a beat out of phase */
:root[data-theme="winter"] .site-header::after {
    background-image:
        repeating-linear-gradient(90deg,
            transparent 0 36px, var(--light-b) 36px 42px,
            transparent 42px 84px, var(--light-d) 84px 90px,
            transparent 90px 96px);
    background-size: 100% 6px;
    background-position: 0 4px;
    background-repeat: no-repeat;
    animation-delay: -1.2s;
}

@keyframes winter-twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* --------------------------------------------------------------------------
   4. Snowfall (built by cozy.js in place of the falling leaves)

   Reuses the .cozy-leaves layer, its fall / sway keyframes, the footer
   switch and the reduced-motion rule in cozy.css, so the snow is absent
   entirely under prefers-reduced-motion. Flakes are plain square pixels.
   -------------------------------------------------------------------------- */
.cozy-flake {
    display: block;
    width: var(--size, 3px);
    height: var(--size, 3px);
    background: var(--color-snow, #fff);
    /* hard one-pixel drop shadow so white flakes read on a pale page */
    box-shadow: 1px 1px 0 0 var(--color-snow-edge, transparent);
}

/* --------------------------------------------------------------------------
   5. Odds and ends
   -------------------------------------------------------------------------- */
/* the frozen ground casts a cooler shadow than the autumn dirt */
:root[data-theme="winter"] .footer-ground {
    box-shadow: 0 var(--px) 0 0 color-mix(in srgb, var(--color-dirt) 80%, black);
}

@media (prefers-reduced-motion: reduce) {
    :root[data-theme="winter"] .site-header::before,
    :root[data-theme="winter"] .site-header::after {
        animation: none;
    }
}