/*
   The site's colours, in both themes.

   Everything else in the CSS asks for a token from here rather than naming a
   colour, so one file decides what light and dark mean and the stylesheets
   only say which role a thing plays.

   THE LADDER (--lv0 ... --lv19)

   The neutrals are a ladder measured as distance from the page, not as
   lightness: lv0 is the page itself and lv19 is as far from it as the ladder
   goes. In the light theme that runs white to black; in the dark theme it runs
   near-black to near-white. A rule saying `background: var(--lv2)` means "a
   shade off the page" and stays true in both themes, which a rule naming
   #f5f5f5 cannot.

   The light values are the exact greys the site already used, so the light
   theme is unchanged. The dark values are a curve rather than an inversion:
   both ends are pulled in -- the page is #131316 and not black, the furthest
   ink is #f4f4f5 and not white -- because a pure black page under pure white
   text glares. The neutrals carry a few points of blue so the dark surfaces
   read as chosen rather than as switched-off grey.

   GENERATED. The dark palette has to appear twice, because plain CSS cannot
   say "these declarations, under either of two selectors": once for people
   whose machine asks for dark, once for people who chose it from the switch in
   the header. Both copies are written from one list by
   scripts/gen_theme_css.py, so they cannot drift. Edit that and re-run it
   (`python3 scripts/gen_theme_css.py`), rather than editing this file.
*/
:root {
    color-scheme: light;

    /* the ladder: lv0 is the page, lv19 is as far from it as this goes */
    --lv0 : #ffffff;
    --lv1 : #fafafa;
    --lv2 : #f5f5f5;
    --lv3 : #f0f0f3;
    --lv4 : #eeeeee;
    --lv5 : #e8e8e8;
    --lv6 : #dddddd;
    --lv7 : #cccccc;
    --lv8 : #bbbbbb;
    --lv9 : #aaaaaa;
    --lv10: #999999;
    --lv11: #888888;
    --lv12: #777777;
    --lv13: #666666;
    --lv14: #555555;
    --lv15: #444444;
    --lv16: #333333;
    --lv17: #222222;
    --lv18: #111111;
    --lv19: #000000;

    /* the two overlays. A shadow is a shadow in both themes, so
       --shade-rgb stays black; --tint-rgb is the wash that lifts a panel
       off its background, so it has to flip or the panel disappears. */
    --shade-rgb: 0, 0, 0;
    --tint-rgb: 0, 0, 0;
    --untint-rgb: 255, 255, 255;
    /* links */
    --link: royalblue;
    --link-rgb: 65, 105, 225;
    --link-hover: #2a4fc4;
    --link-wash: rgba(65, 105, 225, 0.1);
    --link-solid: royalblue;
    /* the parts that were already dark before there was a dark theme:
       the collection headers, the footer. They stay dark, a shade lighter
       in the dark theme so they do not vanish into the page. */
    --slab-deep: #000000;
    --slab: #1c1c1e;
    --slab-2: #2b2b30;
    --slab-3: #333333;
    --slab-stage: #1c1c1e;
    --stage: #f5f5f5;
    --stage-rule: #eeeeee;
    --slab-ink: #ffffff;
    --slab-ink-dim: rgba(255, 255, 255, 0.72);
    --slab-rule: rgba(255, 255, 255, 0.18);
    /* Colours the site already uses to mean something, each a family
       running from a wash you put behind a block to the ink you write on
       it in. In dark the ends swap, so "wash" still means a quiet block
       of the colour and the bare name still means it legibly on top. */
    --go-wash: #edf7f2;
    --go-wash-2: #dff1e7;
    --go-rule: #9fd0b6;
    --go: #328659;
    --go-deep: #256543;

    --warn-wash: #f9eceb;
    --warn-wash-2: #f5dddb;
    --warn-rule: #d69e9a;
    --warn: #912e27;
    --warn-deep: #6d221d;

    --caution-wash: #fbf6e9;
    --caution-wash-2: #f8f0d8;
    --caution-rule: #dbc894;
    --caution: #957623;
    --caution-deep: #70591a;

    --info-wash: #edf4f7;
    --info-wash-2: #dfebf1;
    --info-rule: #a1bfce;
    --info: #356982;
    --info-deep: #284e62;
    /* form fields */
    --field-bg: #ffffff;
    --field-rule: var(--lv7);
    --field-ink: var(--lv16);
    --field-placeholder: var(--lv10);
    /* Artwork. Photographs only need taking down a little. The logo
       lockups are black line art on transparent, so in the dark theme they
       have to be turned over or they sit as black marks on a black page. */
    --art-filter: none;
    --pattern-filter: none;
}

@media (prefers-color-scheme: dark) {
    /* the :not() is what lets the switch in the header beat the machine */
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        /* the ladder: lv0 is the page, lv19 is as far from it as this goes */
        --lv0 : #131316;
        --lv1 : #17171b;
        --lv2 : #1c1b1f;
        --lv3 : #1e1e23;
        --lv4 : #212126;
        --lv5 : #26262b;
        --lv6 : #302f36;
        --lv7 : #3e3d46;
        --lv8 : #4c4b55;
        --lv9 : #5b5965;
        --lv10: #696875;
        --lv11: #777685;
        --lv12: #878593;
        --lv13: #9796a0;
        --lv14: #a7a6ae;
        --lv15: #b6b5bc;
        --lv16: #c6c5cb;
        --lv17: #d5d5d9;
        --lv18: #e5e5e7;
        --lv19: #f4f4f5;

        /* the two overlays. A shadow is a shadow in both themes, so
       --shade-rgb stays black; --tint-rgb is the wash that lifts a panel
       off its background, so it has to flip or the panel disappears. */
        --shade-rgb: 0, 0, 0;
        --tint-rgb: 255, 255, 255;
        --untint-rgb: 0, 0, 0;
        /* links */
        --link: #8ba3f5;
        --link-rgb: 139, 163, 245;
        --link-hover: #adbdf8;
        --link-wash: rgba(139, 163, 245, 0.16);
        --link-solid: #3f5fcf;
        /* the parts that were already dark before there was a dark theme:
       the collection headers, the footer. They stay dark, a shade lighter
       in the dark theme so they do not vanish into the page. */
        --slab-deep: #0c0c0f;
        --slab: #202026;
        --slab-2: #2b2b33;
        --slab-3: #2a2a30;
        --slab-stage: #2e2e36;
        --stage: #2e2e36;
        --stage-rule: #3a3a44;
        --slab-ink: #f4f4f5;
        --slab-ink-dim: rgba(244, 244, 245, 0.72);
        --slab-rule: rgba(255, 255, 255, 0.14);
        /* Colours the site already uses to mean something, each a family
       running from a wash you put behind a block to the ink you write on
       it in. In dark the ends swap, so "wash" still means a quiet block
       of the colour and the bare name still means it legibly on top. */
        --go-wash: #163123;
        --go-wash-2: #1e432f;
        --go-rule: #397455;
        --go: #80d0a6;
        --go-deep: #a9dfc3;

        --warn-wash: #371310;
        --warn-wash-2: #4b1916;
        --warn-rule: #7b3732;
        --warn: #db7d76;
        --warn-deep: #e6a7a2;

        --caution-wash: #3d2f0b;
        --caution-wash-2: #52400f;
        --caution-rule: #826b2b;
        --caution: #dec173;
        --caution-deep: #e9d5a0;

        --info-wash: #162831;
        --info-wash-2: #1e3743;
        --info-rule: #3b6072;
        --info: #84b4cd;
        --info-deep: #accddd;
        /* form fields */
        --field-bg: #1b1b20;
        --field-rule: var(--lv7);
        --field-ink: var(--lv17);
        --field-placeholder: var(--lv11);
        /* Artwork. Photographs only need taking down a little. The logo
       lockups are black line art on transparent, so in the dark theme they
       have to be turned over or they sit as black marks on a black page. */
        --art-filter: brightness(0.92) contrast(0.96);
        --pattern-filter: invert(0.92);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    /* the ladder: lv0 is the page, lv19 is as far from it as this goes */
    --lv0 : #131316;
    --lv1 : #17171b;
    --lv2 : #1c1b1f;
    --lv3 : #1e1e23;
    --lv4 : #212126;
    --lv5 : #26262b;
    --lv6 : #302f36;
    --lv7 : #3e3d46;
    --lv8 : #4c4b55;
    --lv9 : #5b5965;
    --lv10: #696875;
    --lv11: #777685;
    --lv12: #878593;
    --lv13: #9796a0;
    --lv14: #a7a6ae;
    --lv15: #b6b5bc;
    --lv16: #c6c5cb;
    --lv17: #d5d5d9;
    --lv18: #e5e5e7;
    --lv19: #f4f4f5;

    /* the two overlays. A shadow is a shadow in both themes, so
       --shade-rgb stays black; --tint-rgb is the wash that lifts a panel
       off its background, so it has to flip or the panel disappears. */
    --shade-rgb: 0, 0, 0;
    --tint-rgb: 255, 255, 255;
    --untint-rgb: 0, 0, 0;
    /* links */
    --link: #8ba3f5;
    --link-rgb: 139, 163, 245;
    --link-hover: #adbdf8;
    --link-wash: rgba(139, 163, 245, 0.16);
    --link-solid: #3f5fcf;
    /* the parts that were already dark before there was a dark theme:
       the collection headers, the footer. They stay dark, a shade lighter
       in the dark theme so they do not vanish into the page. */
    --slab-deep: #0c0c0f;
    --slab: #202026;
    --slab-2: #2b2b33;
    --slab-3: #2a2a30;
    --slab-stage: #2e2e36;
    --stage: #2e2e36;
    --stage-rule: #3a3a44;
    --slab-ink: #f4f4f5;
    --slab-ink-dim: rgba(244, 244, 245, 0.72);
    --slab-rule: rgba(255, 255, 255, 0.14);
    /* Colours the site already uses to mean something, each a family
       running from a wash you put behind a block to the ink you write on
       it in. In dark the ends swap, so "wash" still means a quiet block
       of the colour and the bare name still means it legibly on top. */
    --go-wash: #163123;
    --go-wash-2: #1e432f;
    --go-rule: #397455;
    --go: #80d0a6;
    --go-deep: #a9dfc3;

    --warn-wash: #371310;
    --warn-wash-2: #4b1916;
    --warn-rule: #7b3732;
    --warn: #db7d76;
    --warn-deep: #e6a7a2;

    --caution-wash: #3d2f0b;
    --caution-wash-2: #52400f;
    --caution-rule: #826b2b;
    --caution: #dec173;
    --caution-deep: #e9d5a0;

    --info-wash: #162831;
    --info-wash-2: #1e3743;
    --info-rule: #3b6072;
    --info: #84b4cd;
    --info-deep: #accddd;
    /* form fields */
    --field-bg: #1b1b20;
    --field-rule: var(--lv7);
    --field-ink: var(--lv17);
    --field-placeholder: var(--lv11);
    /* Artwork. Photographs only need taking down a little. The logo
       lockups are black line art on transparent, so in the dark theme they
       have to be turned over or they sit as black marks on a black page. */
    --art-filter: brightness(0.92) contrast(0.96);
    --pattern-filter: invert(0.92);
}