html.dark-mode {
  --color-000: #d0810c;
  --color-444: #a0a0a0;
  --color-555: #555;
  --color-666: #aaa;
  --color-777: #777;
  --color-999: #999;
  --color-aaa: #aaa;
  --color-bbb: #bbb;
  --color-c0c0c0: #c0c0c0;
  --color-ccc: #555;
  --border-color: #0d2538;
  --color-eee: #111;
  --white: #ffffff;
  --color-op1: rgba(255, 255, 255, 0.1);
  --color-op5: rgba(255, 255, 255, 0.5);
  --color-op7: rgba(255, 255, 255, 0.7);
  --color-sidebar: rgba(255, 255, 255, 0.8);
  --dark-blue: #005580;
  --blue: #08c;
  --light-blue: #3b8dbd;
  --dark-green: #1b4406;
  --green: #35631e;
  --yellow: #ff0;
  --red: #F56C6C;
  --light-red: #ffeaea;
  --bg-menu: #26272b;
  --bg-button: #5bb75b;
  --bg-button-hover: #51a351;
  --bg-submission: #49afcd;
  --bg: #091a28;
  --bg-sidebar: #192733;
  --bg-sidebar-top: #35631e;
  --bg-tag: #33363b;
  --bg-secondary: #262626;
  --bg-notebox: #20222a;
  --bg-image-submission: linear-gradient(to bottom, #306473, #184450);
  --bg-image-button: linear-gradient(to bottom, #386d38, #274e27);
  --bg-skin-image-button: linear-gradient(to bottom, #454545, #262626);
  --bg-skin-download-hover: #262626;
  --skin-about: #dff0d8;
  --skin-about-border: #d6e9c6;
}

html.dark-blue-mode {
  --color-000: #d0810c;
  --color-444: #a0a0a0;
  --color-555: #555;
  --color-666: #aaa;
  --color-777: #777;
  --color-999: #999;
  --color-aaa: #aaa;
  --color-bbb: #bbb;
  --color-c0c0c0: #c0c0c0;
  --color-ccc: #555;
  --border-color: #0d2538;
  --color-eee: #111;
  --white: #ffffff;
  --color-op1: rgba(255, 255, 255, 0.1);
  --color-op5: rgba(255, 255, 255, 0.5);
  --color-op7: rgba(255, 255, 255, 0.7);
  --color-sidebar: rgba(255, 255, 255, 0.8);
  --dark-blue: #005580;
  --blue: #08c;
  --light-blue: #3b8dbd;
  --dark-green: #1b4406;
  --green: #35631e;
  --yellow: #ff0;
  --red: #F56C6C;
  --light-red: #ffeaea;
  --bg-menu: #091a28;
  --bg-button: #5bb75b;
  --bg-button-hover: #51a351;
  --bg-submission: #49afcd;
  --bg: #0d2538;
  --bg-sidebar: #192733;
  --bg-sidebar-top: #35631e;
  --bg-tag: #33363b;
  --bg-secondary: #091a28;
  --bg-image-submission: linear-gradient(to bottom, #306473, #184450);
  --bg-image-button: linear-gradient(to bottom, #386d38, #274e27);
  --bg-skin-image-button: linear-gradient(to bottom, #454545, #262626);
  --bg-skin-download-hover: #262626;
  --skin-about: #dff0d8;
  --skin-about-border: #d6e9c6;
}

html.dark-blue-simple-mode {
  --color-000: #d0810c;
  --color-444: #a0a0a0;
  --color-555: #555;
  --color-666: #aaa;
  --color-777: #777;
  --color-999: #999;
  --color-aaa: #aaa;
  --color-bbb: #bbb;
  --color-c0c0c0: #c0c0c0;
  --color-ccc: #555;
  --border-color: #0d2538;
  --color-eee: #111;
  --white: #ffffff;
  --color-op1: rgba(255, 255, 255, 0.1);
  --color-op5: rgba(255, 255, 255, 0.5);
  --color-op7: rgba(255, 255, 255, 0.7);
  --color-sidebar: rgba(255, 255, 255, 0.8);
  --dark-blue: #005580;
  --blue: #08c;
  --light-blue: #3b8dbd;
  --dark-green: #1b4406;
  --green: #4BB614;
  --yellow: #ff0;
  --red: #F56C6C;
  --light-red: #ffeaea;
  --bg-menu: #091a28;
  --bg-button: #5bb75b;
  --bg-button-hover: #51a351;
  --bg-submission: #49afcd;
  --bg: #0d2538;
  --bg-sidebar: #192733;
  --bg-sidebar-top: #35631e;
  --bg-tag: #33363b;
  --bg-secondary: #091a28;
  --bg-image-submission: linear-gradient(to bottom, #306473, #184450);
  --bg-image-button: linear-gradient(to bottom, #386d38, #274e27);
  --bg-skin-image-button: linear-gradient(to bottom, #454545, #262626);
  --bg-skin-download-hover: #262626;
  --skin-about: #dff0d8;
  --skin-about-border: #d6e9c6;
}

html.dark-simple-mode {
  --color-000: #d0810c;
  --color-444: #a0a0a0;
  --color-555: #555;
  --color-666: #aaa;
  --color-777: #777;
  --color-999: #999;
  --color-aaa: #aaa;
  --color-bbb: #bbb;
  --color-c0c0c0: #c0c0c0;
  --color-ccc: #555;
  --border-color: #555555;
  --color-eee: #111;
  --white: #ffffff;
  --color-op1: rgba(255, 255, 255, 0.1);
  --color-op5: rgba(255, 255, 255, 0.5);
  --color-op7: rgba(255, 255, 255, 0.7);
  --color-sidebar: rgba(255, 255, 255, 0.8);
  --dark-blue: #005580;
  --blue: #08c;
  --light-blue: #3b8dbd;
  --dark-green: #1b4406;
  --green: #35631e;
  --yellow: #ff0;
  --red: #F56C6C;
  --light-red: #ffeaea;
  --bg-menu: #323232;
  --bg-button: #5bb75b;
  --bg-button-hover: #51a351;
  --bg-submission: #49afcd;
  --bg: #1b1b1b;
  --bg-sidebar: #323232;
  --bg-sidebar-top: #35631e;
  --bg-tag: #33363b;
  --bg-secondary: #262626;
  --bg-notebox: #20222a;
  --bg-image-submission: linear-gradient(to bottom, #306473, #184450);
  --bg-image-button: linear-gradient(to bottom, #386d38, #274e27);
  --bg-skin-image-button: linear-gradient(to bottom, #454545, #262626);
  --bg-skin-download-hover: #262626;
  --skin-about: #dff0d8;
  --skin-about-border: #d6e9c6;
}

html.darkest-mode {
  /* CurseForge-style neutral dark palette with MCPEDL green retained as the brand accent. */

  /* Generic colour ramp */
  --color-000: #5cb85c;            /* brand-accent — MCPEDL green */
  --color-444: #a1a1aa;
  --color-555: #71717a;
  --color-666: #a1a1aa;
  --color-777: #71717a;
  --color-999: #71717a;
  --color-aaa: #a1a1aa;
  --color-bbb: #c4c4c8;
  --primary-text: #e4e4e7;
  --color-c0c0c0: #c4c4c8;
  --color-ccc: #3f3f46;
  --border-color: #2a2d34;
  --color-eee: #1f2125;             /* surface tint (was very dark) */
  --white: #ffffff;
  --color-op1: rgba(255, 255, 255, 0.06);
  --color-op5: rgba(255, 255, 255, 0.5);
  --color-op7: rgba(255, 255, 255, 0.75);
  --color-sidebar: rgba(255, 255, 255, 0.85);

  /* Brand colours — keep MCPEDL green */
  --dark-blue: #005580;
  --blue: #2e8de4;
  --light-blue: #3b8dbd;
  --dark-green: #1b4406;
  --green: #5cb85c;
  --yellow: #ffd54f;
  --red: #f56c6c;
  --light-red: #ffeaea;

  /* Surfaces — CurseForge-like layering */
  --bg-main: #0a0b0e;               /* near-black canvas behind everything */
  --bg-menu: #0f1115;               /* top navigation / app bar */
  --bg: #16181d;                    /* page background */
  --bg-secondary: #1f2125;          /* cards, tiles, panels */
  --bg-sidebar: #1a1c20;            /* sidebars / left rail */
  --bg-sidebar-top: #35631e;        /* MCPEDL green highlight stripe */
  --bg-tag: #2a2d34;                /* chips / tags */
  --bg-notebox: #20222a;

  /* Buttons stay MCPEDL green */
  --bg-button: #5bb75b;
  --bg-button-hover: #51a351;
  --bg-submission: #49afcd;
  --bg-image-submission: linear-gradient(to bottom, #2a2d34, #1f2125);
  --bg-image-button: linear-gradient(to bottom, #5bb75b, #3f8a3f);
  --bg-skin-image-button: linear-gradient(to bottom, #2a2d34, #1f2125);
  --bg-skin-download-hover: #2a2d34;

  /* Skin-detail callout */
  --skin-about: #1f2125;
  --skin-about-border: #2a2d34;

  /* VIP comment styling */
  --vip-comment-username: #5cb85c;
  --vip-comment-border: #35631e;
  --vip-comment-bg: #1f2125;
}

html.darkest-green-mode {
  --color-000: #d0810c;
  --color-444: #a0a0a0;
  --color-555: #555;
  --color-666: #aaa;
  --color-777: #777;
  --color-999: #999;
  --color-aaa: #aaa;
  --color-bbb: #bbb;
  --color-c0c0c0: #c0c0c0;
  --color-ccc: #555;
  --border-color: #555555;
  --color-eee: #111;
  --white: #ffffff;
  --color-op1: rgba(255, 255, 255, 0.1);
  --color-op5: rgba(255, 255, 255, 0.5);
  --color-op7: rgba(255, 255, 255, 0.7);
  --color-sidebar: rgba(255, 255, 255, 0.8);
  --dark-blue: #005580;
  --blue: #08c;
  --light-blue: #3b8dbd;
  --dark-green: #1b4406;
  --green: #35631e;
  --yellow: #ff0;
  --red: #F56C6C;
  --light-red: #ffeaea;
  --bg-menu: var(--dark-green);
  --bg-button: #5bb75b;
  --bg-button-hover: #51a351;
  --bg-submission: #49afcd;
  --bg: #1b1b1b;
  --bg-sidebar: #323232;
  --bg-sidebar-top: #35631e;
  --bg-tag: #33363b;
  --bg-secondary: #262626;
  --bg-notebox: #20222a;
  --bg-image-submission: linear-gradient(to bottom, #306473, #184450);
  --bg-image-button: linear-gradient(to bottom, #386d38, #274e27);
  --bg-skin-image-button: linear-gradient(to bottom, #454545, #262626);
  --bg-skin-download-hover: #262626;
  --skin-about: #dff0d8;
  --skin-about-border: #d6e9c6;
}

html.minepank2077-mode {
  --color-000: #d0810c;
  --color-444: #ff4343;
  --color-555: #555;
  --color-666: #aaa;
  --color-777: #777;
  --color-999: #f00;
  --color-aaa: #aaa;
  --color-bbb: #bbb;
  --color-c0c0c0: #c0c0c0;
  --color-ccc: #555;
  --border-color: #0d2538;
  --color-eee: #df00ff;
  --white: #ffffff;
  --color-op1: rgba(255, 255, 255, 0.1);
  --color-op5: rgba(255, 255, 255, 0.5);
  --color-op7: rgba(255, 255, 255, 0.7);
  --color-sidebar: rgba(255, 255, 255, 0.8);
  --dark-blue: #005580;
  --blue: #08c;
  --light-blue: #3b8dbd;
  --dark-green: #1b4406;
  --green: #fff900;
  --yellow: #ff0;
  --red: #F56C6C;
  --light-red: #ffeaea;
  --bg-menu: #1c0a27;
  --bg-button: #5bb75b;
  --bg-button-hover: #51a351;
  --bg-submission: #49afcd;
  --bg: #1b1b1b;
  --bg-sidebar: #323232;
  --bg-sidebar-top: #fff900;
  --bg-tag: #33363b;
  --bg-secondary: #262626;
  --bg-image-submission: linear-gradient(to bottom, #306473, #184450);
  --bg-image-button: linear-gradient(to bottom, #386d38, #274e27);
  --bg-skin-image-button: linear-gradient(to bottom, #454545, #262626);
  --bg-skin-download-hover: #262626;
  --skin-about: #dff0d8;
  --skin-about-border: #d6e9c6;
  --text-shadow: 1px 1px 10px #840017;
}