/* Seasonal theme tokens shared by every page.
   theme.js sets <html data-season="…"> before first paint; pages only ever
   read these variables, never season-specific colours. */

:root {
    --font-display: 'Bagel Fat One', 'Nunito', system-ui, sans-serif;
    --font-ui:      'Lexend', 'Nunito', system-ui, sans-serif;

    --r-tile: 18px;
    --r-pill: 999px;

    --surface: #FFFFFF;
    --warn:    #D9771C;
    --bad:     #D3374A;
    --bad-tint: #FFE3E6;
}

/* Particle layers are full background-image lists, each tiled at 200px so the
   sky animation loops seamlessly. */

:root,
[data-season="winter"] {
    --sky: radial-gradient(120% 90% at 50% 0%, #2A3D6E 0%, #1D2B53 55%, #121C3A 100%);
    --sky-text:   #F4F8FC;
    --sky-muted:  #C9D6EE;
    --chip-bg:    rgba(255,255,255,.10);
    --chip-hover: rgba(255,255,255,.16);
    --balance:    #FFC2CF;

    --page:   #F4F8FC;
    --line:   #DCE8F4;
    --ledge:  #B9CEE4;
    --ink:    #1D2B53;
    --muted:  #56668A;
    --good:   #17785D;
    --good-tint: #DDF3EA;

    --accent:       #E8476A;
    --accent-ledge: #C2304F;
    --accent-tint:  #FDE8ED;

    --deep:       #1D2B53;
    --deep-hover: #24356A;
    --on-deep:    #FFC2CF;
    --deep-muted: #C9D6EE;

    --wordmark:        #E8476A;
    --cap:             #FFFFFF;
    --cap-edge:        #FFE3EA;
    --wordmark-shadow: rgba(0,0,0,.25);

    --particles-far:
        radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 51%),
        radial-gradient(2px 2px at 90px 120px, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 160px 60px, #fff 50%, transparent 51%),
        radial-gradient(2px 2px at 130px 170px, #fff 50%, transparent 51%);
    --particles-near:
        radial-gradient(3px 3px at 50px 80px, #fff 50%, transparent 51%),
        radial-gradient(2.5px 2.5px at 150px 10px, #fff 50%, transparent 51%),
        radial-gradient(3px 3px at 180px 150px, #fff 50%, transparent 51%);
    --motion: fall;
    --speed-far: 14s;
    --speed-near: 9s;
}

[data-season="spring"] {
    --sky: radial-gradient(120% 90% at 50% 0%, #FFF1F5 0%, #D7EEF7 50%, #B3DAEE 100%);
    --sky-text:   #23402F;
    --sky-muted:  #46654F;
    --chip-bg:    rgba(255,255,255,.55);
    --chip-hover: rgba(255,255,255,.80);
    --balance:    #B8325F;

    --page:   #F5FAF2;
    --line:   #DDEBD5;
    --ledge:  #BCD6AE;
    --ink:    #23402F;
    --muted:  #566B5D;
    --good:   #2B7A41;
    --good-tint: #E0F2E3;

    --accent:       #C93A6E;
    --accent-ledge: #A32C57;
    --accent-tint:  #FBE6EE;

    --deep:       #2F5D3E;
    --deep-hover: #376B48;
    --on-deep:    #FFC9DA;
    --deep-muted: #CFE6D6;

    --wordmark:        #2F8A47;
    --cap:             #FFC2D6;
    --cap-edge:        #FFE6EE;
    --wordmark-shadow: rgba(35,64,47,.18);

    --particles-far:
        radial-gradient(4px 2.5px at 30px 40px, #FFC2D6 50%, transparent 51%),
        radial-gradient(3.5px 2.5px at 120px 110px, #FFD9E5 50%, transparent 51%),
        radial-gradient(4px 2.5px at 170px 180px, #FFC2D6 50%, transparent 51%);
    --particles-near:
        radial-gradient(6px 4px at 60px 70px, #FFB0C9 50%, transparent 51%),
        radial-gradient(5px 3.5px at 160px 20px, #FFD0DF 50%, transparent 51%);
    --motion: drift;
    --speed-far: 34s;
    --speed-near: 22s;
}

[data-season="summer"] {
    --sky: radial-gradient(120% 90% at 50% 0%, #3AA6E8 0%, #1366B0 55%, #0D4A85 100%);
    --sky-text:   #FFFFFF;
    --sky-muted:  #DCEFFF;
    --chip-bg:    rgba(255,255,255,.16);
    --chip-hover: rgba(255,255,255,.24);
    --balance:    #FFE07A;

    --page:   #FFF8EC;
    --line:   #F2E4C8;
    --ledge:  #E3C994;
    --ink:    #183A5A;
    --muted:  #66625A;
    --good:   #157E73;
    --good-tint: #DCF2EF;

    --accent:       #E2404D;
    --accent-ledge: #B8303B;
    --accent-tint:  #FDE7E8;

    --deep:       #0E5A8A;
    --deep-hover: #11689E;
    --on-deep:    #FFC23D;
    --deep-muted: #CFE6F5;

    --wordmark:        #FFD04F;
    --cap:             #FFF6D6;
    --cap-edge:        #FFE08A;
    --wordmark-shadow: rgba(10,50,100,.35);

    --particles-far:
        radial-gradient(2px 2px at 40px 50px, rgba(255,255,255,.7) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 150px 130px, rgba(255,255,255,.6) 50%, transparent 51%);
    --particles-near:
        radial-gradient(4px 4px at 80px 160px, rgba(255,255,255,.35) 60%, transparent 61%),
        radial-gradient(3px 3px at 170px 40px, rgba(255,240,180,.5) 60%, transparent 61%);
    --motion: rise;
    --speed-far: 24s;
    --speed-near: 16s;
}

[data-season="autumn"] {
    --sky: radial-gradient(120% 90% at 50% 0%, #7E413A 0%, #4A2742 55%, #2E1830 100%);
    --sky-text:   #FFF4EA;
    --sky-muted:  #E6C9C0;
    --chip-bg:    rgba(255,255,255,.10);
    --chip-hover: rgba(255,255,255,.16);
    --balance:    #FFC27A;

    --page:   #FBF4EC;
    --line:   #EEDFCF;
    --ledge:  #DCC3A6;
    --ink:    #3A2232;
    --muted:  #6F5A54;
    --good:   #55721F;
    --good-tint: #EAF0DC;

    --accent:       #B23A48;
    --accent-ledge: #8E2C38;
    --accent-tint:  #F7E4E6;

    --deep:       #4A2742;
    --deep-hover: #5A3050;
    --on-deep:    #FFC27A;
    --deep-muted: #E6C9C0;

    --wordmark:        #F29E38;
    --cap:             #FFE6BF;
    --cap-edge:        #FFD08A;
    --wordmark-shadow: rgba(0,0,0,.3);

    --particles-far:
        radial-gradient(4px 2.5px at 30px 60px, #C2412D 50%, transparent 51%),
        radial-gradient(3.5px 2.5px at 140px 140px, #E8792B 50%, transparent 51%),
        radial-gradient(4px 2.5px at 100px 10px, #D9A23A 50%, transparent 51%);
    --particles-near:
        radial-gradient(7px 4.5px at 50px 120px, #E8792B 50%, transparent 51%),
        radial-gradient(6px 4px at 170px 50px, #C2412D 50%, transparent 51%);
    --motion: drift;
    --speed-far: 26s;
    --speed-near: 17s;
}

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* ── Theme picker (theme.js fills #theme-picker on the home page) ── */

.theme-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 36px auto 12px;
    padding: 0 16px;
    font-family: var(--font-ui);
    font-size: .8rem;
    color: var(--muted);
    text-align: center;
}

.theme-picker-options {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    border-radius: var(--r-tile);
    background: var(--surface);
    border: 1.5px solid var(--line);
}

.theme-picker-btn {
    border: none;
    background: none;
    font: inherit;
    font-weight: 500;
    color: var(--muted);
    padding: 6px 12px;
    border-radius: var(--r-pill);
    cursor: pointer;
    white-space: nowrap;
}
.theme-picker-btn:hover { color: var(--ink); }
.theme-picker-btn[aria-pressed="true"] { background: var(--deep); color: var(--on-deep); }