/* Theme tokens for signed-in / opted-in users (see src/users.js +
   public/js/theme.js). Keyed on html[data-theme="..."] so they beat the :root
   tokens in base.css / styles.css regardless of source order. "default" is the
   dark high-contrast theme and lives in the two `:root` blocks (no override
   here).

   Each block also matches a bare `[data-theme="..."]`, so an element OTHER than
   <html> can carry a theme: the worlds game sets `data-theme` on its own panel
   wrapper (public/js/worlds/worlds.js -> applyWorldsTheme) to give the game
   window a theme separate from the site, scoping these tokens to that subtree.

   The picker lists the DARK themes first, then the LIGHT ones — the same order
   as the account tab's #theme-select (index.html) and ALLOWED_THEMES
   (src/users.js). Each theme defines the WHOLE token set so the token-based
   pages (base.css: portfolio / login / admin / genles / account) and the
   music shell (styles.css) restyle together. See the "Aesthetic guidelines"
   section of docs/ARCHITECTURE.md before adding or renaming a theme.

   Token roles:
     --bg           page background
     --surface      panels: header, footer, cards, menus
     --surface-2    raised rows / inputs / list items
     --surface-3    hover & active fills
     --border       default hairline
     --border-strong stronger hairline / hover border
     --text         body text
     --text-strong  headings, active & emphasis
     --dim          secondary text
     --dimmer       tertiary text
     --accent       primary accent
     --accent-soft  accent fill (active pills)
     --accent-fg    the accent as TEXT (links, the chat's translated row) — tuned per
                    theme to hold 4.5:1 against --surface / --surface-2
     --green        success / share
     --green-soft   success fill (active rows)
     --red          danger
     --btn-bg       control-button fill
     --btn-fg       control-button text */

/* ===================== dark ===================== */

html[data-theme='pink'], [data-theme='pink'] {
  --bg: #170810;
  --surface: #20101a;
  --surface-2: #2a1622;
  --surface-3: #351d2b;
  --border: #43283a;
  --border-strong: #5e3a52;
  --text: #f7e6f1;
  --text-strong: #ffe9f7;
  --dim: #c99ab6;
  --dimmer: #9b7490;
  --accent: #ff4fa3;
  --accent-soft: #3a1230;
  --accent-fg: #ff4fa3;
  --green: #6adcae;
  --green-soft: #10251e;
  --red: #ff6b81;
  --btn-bg: #34152a;
  --btn-fg: #ffe9f7;
}

html[data-theme='purple'], [data-theme='purple'] {
  --bg: #100a1a;
  --surface: #181024;
  --surface-2: #21162f;
  --surface-3: #2b1d3d;
  --border: #3a2a52;
  --border-strong: #523c72;
  --text: #ece4f7;
  --text-strong: #f6f0ff;
  --dim: #b3a3cc;
  --dimmer: #8a7aa6;
  --accent: #a678ff;
  --accent-soft: #2a1a47;
  --accent-fg: #a678ff;
  --green: #6adcae;
  --green-soft: #10251e;
  --red: #ff6b81;
  --btn-bg: #241636;
  --btn-fg: #f6f0ff;
}

html[data-theme='orange'], [data-theme='orange'] {
  --bg: #170f08;
  --surface: #20150c;
  --surface-2: #2a1c10;
  --surface-3: #352416;
  --border: #46301d;
  --border-strong: #63452a;
  --text: #f7ead9;
  --text-strong: #fff3e2;
  --dim: #d0a97c;
  --dimmer: #a17f58;
  --accent: #ff8a3d;
  --accent-soft: #46260f;
  --accent-fg: #ff8a3d;
  --green: #6adcae;
  --green-soft: #16251b;
  --red: #ff6b5a;
  --btn-bg: #331f0e;
  --btn-fg: #fff3e2;
}

html[data-theme='yellow'], [data-theme='yellow'] {
  --bg: #131309;
  --surface: #1c1b0f;
  --surface-2: #262514;
  --surface-3: #2f2e1a;
  --border: #403f24;
  --border-strong: #5d5b34;
  --text: #f6f4dd;
  --text-strong: #fffbeb;
  --dim: #c8c390;
  --dimmer: #99946a;
  --accent: #f2d024;
  --accent-soft: #3a3411;
  --accent-fg: #f2d024;
  --green: #6adcae;
  --green-soft: #10251e;
  --red: #ff6b5a;
  --btn-bg: #2e2c15;
  --btn-fg: #fffbeb;
}

html[data-theme='teal'], [data-theme='teal'] {
  --bg: #061717;
  --surface: #0b1f1f;
  --surface-2: #102929;
  --surface-3: #163636;
  --border: #1f4747;
  --border-strong: #2f6464;
  --text: #dcf5f3;
  --text-strong: #ecfffd;
  --dim: #8cc4c0;
  --dimmer: #659a97;
  --accent: #2fd6c8;
  --accent-soft: #0d3b38;
  --accent-fg: #2fd6c8;
  --green: #6adcae;
  --green-soft: #0e2a22;
  --red: #ff6b81;
  --btn-bg: #123030;
  --btn-fg: #ecfffd;
}

html[data-theme='forest'], [data-theme='forest'] {
  --bg: #0a150d;
  --surface: #0f1e13;
  --surface-2: #142719;
  --surface-3: #1b3320;
  --border: #26432d;
  --border-strong: #3a6144;
  --text: #e2f2e6;
  --text-strong: #f0fff3;
  --dim: #9cc0a4;
  --dimmer: #71967a;
  --accent: #4bd17a;
  --accent-soft: #123a22;
  --accent-fg: #4bd17a;
  --green: #4bd17a;
  --green-soft: #122c1c;
  --red: #ff6b81;
  --btn-bg: #16301d;
  --btn-fg: #f0fff3;
}

html[data-theme='blue'], [data-theme='blue'] {
  --bg: #060c18;
  --surface: #0b1424;
  --surface-2: #101c30;
  --surface-3: #182740;
  --border: #22395c;
  --border-strong: #33507d;
  --text: #dce8f7;
  --text-strong: #ecf4ff;
  --dim: #8fa9cc;
  --dimmer: #647ea3;
  --accent: #4b8bff;
  --accent-soft: #10244a;
  --accent-fg: #4b8bff;
  --green: #6adcae;
  --green-soft: #10251e;
  --red: #ff6b81;
  --btn-bg: #12223c;
  --btn-fg: #ecf4ff;
}

/* ===================== light ===================== */

html[data-theme='light'], [data-theme='light'] {
  --bg: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #ececea;
  --surface-3: #e4e4e0;
  --border: #dcdcd8;
  --border-strong: #c4c4be;
  --text: #17171a;
  --text-strong: #000000;
  --dim: #5c5c66;
  --dimmer: #8a8a92;
  --accent: #2f62d6;
  --accent-soft: #dce6fb;
  --accent-fg: #2a58c4;
  --green: #12702f;
  --green-soft: #e2f5e8;
  --red: #bd1f1f;
  --btn-bg: #ececea;
  --btn-fg: #17171a;
}

html[data-theme='sepia'], [data-theme='sepia'] {
  --bg: #f4ecd8;
  --surface: #fbf5e6;
  --surface-2: #efe6d0;
  --surface-3: #e6dabf;
  --border: #ded2b4;
  --border-strong: #cbbd99;
  --text: #3a2f1e;
  --text-strong: #241c10;
  --dim: #6b5c42;
  --dimmer: #8f7f61;
  --accent: #8a5a15;
  --accent-soft: #ece0c2;
  --accent-fg: #7f5313;
  --green: #36701b;
  --green-soft: #e4f0d3;
  --red: #a33324;
  --btn-bg: #efe6d0;
  --btn-fg: #3a2f1e;
}

html[data-theme='blush'], [data-theme='blush'] {
  --bg: #fdf2f7;
  --surface: #ffffff;
  --surface-2: #f8e6f0;
  --surface-3: #f2d9e8;
  --border: #ecccdd;
  --border-strong: #d7a9c2;
  --text: #2a1120;
  --text-strong: #17060f;
  --dim: #7a5570;
  --dimmer: #a4809a;
  --accent: #d6338a;
  --accent-soft: #fbdcee;
  --accent-fg: #b02a72;
  --green: #12702f;
  --green-soft: #e2f5e8;
  --red: #b32c3c;
  --btn-bg: #f8e6f0;
  --btn-fg: #2a1120;
}

html[data-theme='lavender'], [data-theme='lavender'] {
  --bg: #f6f3fd;
  --surface: #ffffff;
  --surface-2: #efe8fb;
  --surface-3: #e6dcf7;
  --border: #ded1f0;
  --border-strong: #c3ade0;
  --text: #1d1230;
  --text-strong: #100722;
  --dim: #64558a;
  --dimmer: #8f83ae;
  --accent: #7c3aed;
  --accent-soft: #e6dcfb;
  --accent-fg: #7033d6;
  --green: #12702f;
  --green-soft: #e2f5e8;
  --red: #bd1f1f;
  --btn-bg: #efe8fb;
  --btn-fg: #1d1230;
}

html[data-theme='peach'], [data-theme='peach'] {
  --bg: #fdf5ee;
  --surface: #ffffff;
  --surface-2: #f9e9d8;
  --surface-3: #f2dcc4;
  --border: #edd6be;
  --border-strong: #d9b48d;
  --text: #2e1c0c;
  --text-strong: #1a0f05;
  --dim: #856246;
  --dimmer: #ab8b6f;
  --accent: #d2691e;
  --accent-soft: #fbe3cc;
  --accent-fg: #9c4d17;
  --green: #12702f;
  --green-soft: #e2f5e8;
  --red: #bd1f1f;
  --btn-bg: #f9e9d8;
  --btn-fg: #2e1c0c;
}

html[data-theme='butter'], [data-theme='butter'] {
  --bg: #fdfaec;
  --surface: #ffffff;
  --surface-2: #f8f2d8;
  --surface-3: #f1e9c2;
  --border: #e8dfae;
  --border-strong: #d3c684;
  --text: #2b2607;
  --text-strong: #171302;
  --dim: #706828;
  --dimmer: #a39a63;
  --accent: #a87508;
  --accent-soft: #f9f0c4;
  --accent-fg: #8a5f06;
  --green: #12702f;
  --green-soft: #e2f5e8;
  --red: #bd1f1f;
  --btn-bg: #f8f2d8;
  --btn-fg: #2b2607;
}

html[data-theme='mint'], [data-theme='mint'] {
  --bg: #f0faf8;
  --surface: #ffffff;
  --surface-2: #e2f5f1;
  --surface-3: #d3efe9;
  --border: #c3e6df;
  --border-strong: #9ccdc4;
  --text: #0c2422;
  --text-strong: #041614;
  --dim: #447069;
  --dimmer: #7aa5a0;
  --accent: #0d9488;
  --accent-soft: #c8efe9;
  --accent-fg: #0a7166;
  --green: #12702f;
  --green-soft: #e2f5e8;
  --red: #bd1f1f;
  --btn-bg: #e2f5f1;
  --btn-fg: #0c2422;
}

html[data-theme='sage'], [data-theme='sage'] {
  --bg: #f2f9f2;
  --surface: #ffffff;
  --surface-2: #e6f3e8;
  --surface-3: #d8eddb;
  --border: #c9e3cd;
  --border-strong: #a3cfa9;
  --text: #10231a;
  --text-strong: #06150e;
  --dim: #4f7059;
  --dimmer: #7d9c86;
  --accent: #2f9e5a;
  --accent-soft: #cdeed7;
  --accent-fg: #22793f;
  --green: #12702f;
  --green-soft: #e2f5e8;
  --red: #bd1f1f;
  --btn-bg: #e6f3e8;
  --btn-fg: #10231a;
}

html[data-theme='sky'], [data-theme='sky'] {
  --bg: #eef5fc;
  --surface: #ffffff;
  --surface-2: #e0edfa;
  --surface-3: #cfe2f6;
  --border: #c2d8ee;
  --border-strong: #97bade;
  --text: #0b2033;
  --text-strong: #04121f;
  --dim: #476a8c;
  --dimmer: #7a99b8;
  --accent: #1d6fe0;
  --accent-soft: #d4e5fc;
  --accent-fg: #1a60c2;
  --green: #12702f;
  --green-soft: #e2f5e8;
  --red: #bd1f1f;
  --btn-bg: #e0edfa;
  --btn-fg: #0b2033;
}