/*
    themes.css -- every palette lives here, and nothing else.
    style.css owns structure; this file owns colour.

    TO ADD A THEME:
      1. copy a block below, give it a new [data-theme="id"]
      2. add the same id to $GLOBALS['THEMES'] in build.php
    That's it. Nothing else needs touching.

    Notes on two tokens that trip people up:
      --accent-dark  is the *heading* colour. On dark themes it has to be
                     LIGHTER than --accent, not darker, or every h2 vanishes.
      --footer-*     the footer sits directly on the body gradient, not on a
                     panel, so its text colour tracks the BOTTOM of --body-bg.
                     Light themes with a pale bottom need dark footer text.

    The --*-rgb tokens are bare channel triples, used as
    rgba(var(--accent-rgb), 0.12). That keeps every alpha exactly where the
    design put it while letting a theme restate the hue once.
*/


/* ------------------------------------------------------------------ *
 *  Luna Blue -- the original. Windows XP, 2005, everything possible.  *
 * ------------------------------------------------------------------ */

:root,
[data-theme="luna"] {
    color-scheme: light;

    --accent: #0055ea;
    --accent-light: #4e96f7;
    --accent-dark: #003399;
    --accent-rgb: 0, 85, 234;

    --sheen-rgb: 255, 255, 255;
    --shade-rgb: 0, 40, 100;
    --shadow-rgb: 0, 60, 150;
    --ink-rgb: 0, 0, 0;

    --text: #1a1a2e;
    --text-secondary: #4a5568;
    --text-light: #718096;
    --text-on-accent: #fff;

    --link: #0055ea;
    --link-hover: #3380ff;

    --body-bg: linear-gradient(180deg,
        #4a9ae5 0%, #6db5ed 12%, #93cbf2 25%, #b5ddf0 40%,
        #c6e6d8 55%, #8ec87a 72%, #6bb54e 88%, #5aa640 100%);

    --nav-bg: linear-gradient(180deg,
        #0997ff 0%, #0878e8 4%, #0560c7 25%, #044aae 50%,
        #0560c7 75%, #0878e8 96%, #0997ff 100%);
    --nav-border: #003580;
    --nav-shadow: inset 0 1px 0 rgba(140, 200, 255, 0.45),
                  0 3px 12px rgba(0, 30, 80, 0.35);

    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-bg-hover: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.82);
    --glass-shadow: 0 8px 32px rgba(0, 60, 150, 0.10);
    --panel-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.08) 60%,
        rgba(255, 255, 255, 0.00) 100%);

    --card-bg: rgba(255, 255, 255, 0.50);
    --card-border: rgba(255, 255, 255, 0.70);
    --card-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.00) 100%);

    --gb-bg: rgba(255, 255, 255, 0.45);
    --gb-border: rgba(255, 255, 255, 0.65);
    --dialog-bg: rgba(255, 255, 255, 0.75);
    --input-bg: rgba(255, 255, 255, 0.70);
    --on-accent-link: #ffe066;

    --code-bg: rgba(0, 20, 60, 0.055);
    --code-border: rgba(0, 40, 100, 0.10);
    --inline-code-bg: rgba(0, 20, 60, 0.06);

    --btn-bg: linear-gradient(180deg, #5ba3f5 0%, #3380e0 45%, #2870d0 100%);
    --btn-bg-hover: linear-gradient(180deg, #6bb0ff 0%, #4490f0 45%, #3880e0 100%);
    --btn-bg-active: linear-gradient(180deg, #2870d0 0%, #2060b0 45%, #1850a0 100%);
    --btn-border: #2060b0;
    --btn-text: #fff;
    --btn-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.05));
    --titlebar-bg: linear-gradient(180deg, #4e96f7, #0055ea);
    --titlebar-text: #fff;

    --footer-text: rgba(255, 255, 255, 0.88);
    --footer-link: rgba(255, 255, 255, 0.95);
    --footer-shadow: 0 1px 2px rgba(0, 40, 0, 0.35);
    --counter-bg: rgba(0, 0, 0, 0.28);
    --counter-text: #90ee90;

    --duck: #e67e22;
    --live: #2a9d3f;
    --secret-link: rgba(0, 0, 0, 0.08);

    --theme-color: #0055ea;
}


/* ------------------------------------------------------------------ *
 *  Silver -- XP's other daylight scheme. Steel chrome, washed Bliss.  *
 * ------------------------------------------------------------------ */

[data-theme="silver"] {
    color-scheme: light;

    --accent: #3f6fa8;
    --accent-light: #7a9ec9;
    --accent-dark: #24466e;
    --accent-rgb: 63, 111, 168;

    --sheen-rgb: 255, 255, 255;
    --shade-rgb: 40, 46, 56;
    --shadow-rgb: 60, 68, 80;
    --ink-rgb: 0, 0, 0;

    --text: #21262e;
    --text-secondary: #4d545e;
    --text-light: #646b76;
    --text-on-accent: #fff;

    --link: #3f6fa8;
    --link-hover: #5a8cc7;

    --body-bg: linear-gradient(180deg,
        #b9c6d4 0%, #c3ced9 12%, #ccd5de 25%, #d3dae0 40%,
        #d4dcd8 55%, #bcc9b8 72%, #a8b8a4 88%, #9aab96 100%);

    --nav-bg: linear-gradient(180deg,
        #b6b6c6 0%, #9c9cae 4%, #84849a 25%, #70708a 50%,
        #84849a 75%, #9c9cae 96%, #b6b6c6 100%);
    --nav-border: #4a4a5c;
    --nav-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
                  0 3px 12px rgba(40, 46, 56, 0.30);

    --glass-bg: rgba(255, 255, 255, 0.66);
    --glass-bg-hover: rgba(255, 255, 255, 0.80);
    --glass-border: rgba(255, 255, 255, 0.85);
    --glass-shadow: 0 8px 32px rgba(60, 68, 80, 0.12);
    --panel-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.34) 0%,
        rgba(255, 255, 255, 0.10) 60%,
        rgba(255, 255, 255, 0.00) 100%);

    --card-bg: rgba(255, 255, 255, 0.54);
    --card-border: rgba(255, 255, 255, 0.74);
    --card-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.00) 100%);

    --gb-bg: rgba(255, 255, 255, 0.50);
    --gb-border: rgba(255, 255, 255, 0.70);
    --dialog-bg: rgba(255, 255, 255, 0.80);
    --input-bg: rgba(255, 255, 255, 0.75);
    --on-accent-link: #fff0a8;

    --code-bg: rgba(40, 46, 56, 0.06);
    --code-border: rgba(40, 46, 56, 0.12);
    --inline-code-bg: rgba(40, 46, 56, 0.07);

    --btn-bg: linear-gradient(180deg, #d2d2de 0%, #adadc0 45%, #9696ac 100%);
    --btn-bg-hover: linear-gradient(180deg, #e0e0ea 0%, #bcbcce 45%, #a4a4ba 100%);
    --btn-bg-active: linear-gradient(180deg, #9696ac 0%, #82829a 45%, #6e6e88 100%);
    --btn-border: #6e6e86;
    --btn-text: #21262e;
    --titlebar-bg: linear-gradient(180deg, #6b8cb0, #35597f);
    --titlebar-text: #fff;
    --btn-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.08));

    /* pale body bottom -- white footer text would disappear here */
    --footer-text: rgba(38, 46, 42, 0.88);
    --footer-link: rgba(24, 32, 28, 0.95);
    --footer-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
    --counter-bg: rgba(0, 0, 0, 0.20);
    --counter-text: #2f5f33;

    --duck: #c8681a;
    --live: #237f34;
    --secret-link: rgba(0, 0, 0, 0.08);

    --theme-color: #70708a;
}


/* ------------------------------------------------------------------ *
 *  Royale Noir -- the black XP theme that leaked out of Redmond.      *
 * ------------------------------------------------------------------ */

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

    --accent: #4a9eff;
    --accent-light: #7fbcff;
    --accent-dark: #a8d4ff;   /* headings: lighter than --accent on purpose */
    --accent-rgb: 74, 158, 255;

    --sheen-rgb: 255, 255, 255;
    --shade-rgb: 0, 0, 0;
    --shadow-rgb: 0, 0, 0;
    --ink-rgb: 0, 0, 0;

    --text: #e6e8ee;
    --text-secondary: #a8b0be;
    --text-light: #959dad;
    --text-on-accent: #fff;

    --link: #5aa9ff;
    --link-hover: #8ec5ff;

    /* night Bliss -- same horizon, luminance turned right down */
    --body-bg: linear-gradient(180deg,
        #05070d 0%, #0a1020 12%, #0d1626 25%, #101c2e 40%,
        #0f1f28 55%, #0d2018 72%, #0a1a12 88%, #08150e 100%);

    --nav-bg: linear-gradient(180deg,
        #2a3442 0%, #182230 4%, #0e1622 25%, #080d16 50%,
        #0e1622 75%, #182230 96%, #2a3442 100%);
    --nav-border: #000;
    --nav-shadow: inset 0 1px 0 rgba(120, 160, 210, 0.30),
                  0 3px 12px rgba(0, 0, 0, 0.55);

    --glass-bg: rgba(255, 255, 255, 0.055);
    --glass-bg-hover: rgba(255, 255, 255, 0.10);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --panel-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.02) 60%,
        rgba(255, 255, 255, 0.00) 100%);

    --card-bg: rgba(255, 255, 255, 0.05);
    --card-border: rgba(255, 255, 255, 0.11);
    --card-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.00) 100%);

    --gb-bg: rgba(255, 255, 255, 0.05);
    --gb-border: rgba(255, 255, 255, 0.11);
    --dialog-bg: rgba(255, 255, 255, 0.08);
    --input-bg: rgba(0, 0, 0, 0.30);
    --on-accent-link: #ffe066;

    --code-bg: rgba(0, 0, 0, 0.38);
    --code-border: rgba(255, 255, 255, 0.10);
    --inline-code-bg: rgba(0, 0, 0, 0.32);

    --btn-bg: linear-gradient(180deg, #3d5f8a 0%, #26405f 45%, #1b2e45 100%);
    --btn-bg-hover: linear-gradient(180deg, #4a7099 0%, #305070 45%, #223a55 100%);
    --btn-bg-active: linear-gradient(180deg, #1b2e45 0%, #142334 45%, #0e1a27 100%);
    --btn-border: #101c2b;
    --btn-text: #fff;
    --btn-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02));
    --titlebar-bg: linear-gradient(180deg, #1e2c3e, #0d1725);
    --titlebar-text: #e6e8ee;

    --footer-text: rgba(255, 255, 255, 0.72);
    --footer-link: rgba(255, 255, 255, 0.88);
    --footer-shadow: 0 1px 2px rgba(0, 0, 0, 0.60);
    --counter-bg: rgba(0, 0, 0, 0.45);
    --counter-text: #90ee90;

    --duck: #e08a3c;
    --live: #3fc75a;
    --secret-link: rgba(255, 255, 255, 0.07);

    --theme-color: #080d16;
}


/* ------------------------------------------------------------------ *
 *  Zune -- black and orange. The other one Microsoft actually shipped.*
 * ------------------------------------------------------------------ */

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

    --accent: #ff6a1f;
    --accent-light: #ff9455;
    --accent-dark: #ffa470;   /* headings: lighter than --accent on purpose */
    --accent-rgb: 255, 106, 31;

    --sheen-rgb: 255, 255, 255;
    --shade-rgb: 0, 0, 0;
    --shadow-rgb: 0, 0, 0;
    --ink-rgb: 0, 0, 0;

    --text: #f0e8e4;
    --text-secondary: #bdaea6;
    --text-light: #8e807a;
    --text-on-accent: #fff;

    --link: #ff7c36;
    --link-hover: #ffa066;

    --body-bg: linear-gradient(180deg,
        #0d0705 0%, #150a06 12%, #1a0d08 25%, #1f100a 40%,
        #1a0c07 55%, #140905 72%, #0f0704 88%, #0a0503 100%);

    --nav-bg: linear-gradient(180deg,
        #3a2a20 0%, #261a12 4%, #17100a 25%, #0d0805 50%,
        #17100a 75%, #261a12 96%, #3a2a20 100%);
    --nav-border: #000;
    --nav-shadow: inset 0 1px 0 rgba(255, 150, 80, 0.28),
                  0 3px 12px rgba(0, 0, 0, 0.55);

    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-bg-hover: rgba(255, 255, 255, 0.09);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.50);
    --panel-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.02) 60%,
        rgba(255, 255, 255, 0.00) 100%);

    --card-bg: rgba(255, 255, 255, 0.045);
    --card-border: rgba(255, 255, 255, 0.11);
    --card-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.00) 100%);

    --gb-bg: rgba(255, 255, 255, 0.045);
    --gb-border: rgba(255, 255, 255, 0.11);
    --dialog-bg: rgba(255, 255, 255, 0.075);
    --input-bg: rgba(0, 0, 0, 0.32);
    --on-accent-link: #fff3c4;

    --code-bg: rgba(0, 0, 0, 0.40);
    --code-border: rgba(255, 255, 255, 0.10);
    --inline-code-bg: rgba(0, 0, 0, 0.34);

    --btn-bg: linear-gradient(180deg, #f57f2e 0%, #d4550f 45%, #b04409 100%);
    --btn-bg-hover: linear-gradient(180deg, #ff9c55 0%, #ff7328 45%, #d85a14 100%);
    --btn-bg-active: linear-gradient(180deg, #c44e10 0%, #a8400b 45%, #8a3608 100%);
    --btn-border: #8a3608;
    --btn-text: #fff;
    --btn-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.04));
    --titlebar-bg: linear-gradient(180deg, #33241a, #1a1009);
    --titlebar-text: #f0e8e4;

    --footer-text: rgba(255, 255, 255, 0.70);
    --footer-link: rgba(255, 255, 255, 0.88);
    --footer-shadow: 0 1px 2px rgba(0, 0, 0, 0.60);
    --counter-bg: rgba(0, 0, 0, 0.45);
    --counter-text: #ffb060;

    --duck: #ff8c30;
    --live: #3fc75a;
    --secret-link: rgba(255, 255, 255, 0.07);

    --theme-color: #0d0805;
}


/* ------------------------------------------------------------------ *
 *  Back-compat aliases.                                              *
 *  404.php, 500.php, feed.xsl and src/index.js all reference these    *
 *  names inline. Keeping them mapped means those files don't have to  *
 *  be rewritten, and a stale cached stylesheet degrades instead of    *
 *  breaking.                                                          *
 * ------------------------------------------------------------------ */

:root {
    --luna-blue: var(--accent);
    --luna-blue-light: var(--accent-light);
    --luna-blue-dark: var(--accent-dark);
}