/*
 * Cobalt static pack — Counter-Strike inspired theme layer.
 *
 * The semantic --cst-* tokens are intentionally separate from the compiled
 * application tokens. They let the frozen build switch palettes without
 * rebuilding Vue or changing component structure.
 */

:root,
html[data-cobalt-theme="dust2"] {
  color-scheme: dark;

  --cst-bg-deep: #10110e;
  --cst-bg-page: #191a15;
  --cst-bg-surface-1: #23251d;
  --cst-bg-surface-2: #2d3025;
  --cst-bg-surface-3: #3a3d30;
  --cst-bg-raised: #444839;
  --cst-border: #565b48;
  --cst-border-soft: #34372b;

  --cst-text-primary: #f2efe5;
  --cst-text-secondary: #aaa997;
  --cst-text-tertiary: #797d6b;
  --cst-text-on-action: #050505;

  --cst-action: #c68b35;
  --cst-action-hover: #dda447;
  --cst-action-pressed: #9c6e2a;
  --cst-focus: #efc36e;
  --cst-accent: #91a85f;
  --cst-accent-strong: #b8cb78;

  --cst-success: #91bd63;
  --cst-win: #72b69d;
  --cst-warning: #e0ad54;
  --cst-reward: #c98258;
  --cst-danger: #d65f49;
  --cst-orange: #e17a42;
  --cst-purple: #a88ac4;

  --cst-action-rgb: 198 139 53;
  --cst-focus-rgb: 239 195 110;
  --cst-accent-rgb: 145 168 95;
  --cst-danger-rgb: 214 95 73;
  --cst-bg-deep-rgb: 16 17 14;

  --cst-promo-gradient: linear-gradient(111.56deg, #455136 0%, #b76f2d 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #d8a34c 0%, #758d50 100%);
}

html[data-cobalt-theme="nuke"] {
  --cst-bg-deep: #0b1116;
  --cst-bg-page: #111a21;
  --cst-bg-surface-1: #19252d;
  --cst-bg-surface-2: #23343e;
  --cst-bg-surface-3: #304650;
  --cst-bg-raised: #3b5660;
  --cst-border: #4d6870;
  --cst-border-soft: #293b44;

  --cst-text-primary: #edf5f5;
  --cst-text-secondary: #a5b9bd;
  --cst-text-tertiary: #6f858b;
  --cst-text-on-action: #edf5f5;

  --cst-action: #1e6d83;
  --cst-action-hover: #217890;
  --cst-action-pressed: #1a5f71;
  --cst-focus: #75d5e6;
  --cst-accent: #b0cb45;
  --cst-accent-strong: #cee365;

  --cst-success: #9fc65b;
  --cst-win: #49bca9;
  --cst-warning: #e7b34d;
  --cst-reward: #d77c4a;
  --cst-danger: #db5b45;
  --cst-orange: #e98742;
  --cst-purple: #9d8ac8;

  --cst-action-rgb: 30 109 131;
  --cst-focus-rgb: 117 213 230;
  --cst-accent-rgb: 176 203 69;
  --cst-danger-rgb: 219 91 69;
  --cst-bg-deep-rgb: 11 17 22;

  --cst-promo-gradient: linear-gradient(111.56deg, #1e6d83 0%, #a6bc39 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #217890 0%, #b5ce45 100%);
}

html[data-cobalt-theme="inferno"] {
  --cst-bg-deep: #120d0b;
  --cst-bg-page: #1b1310;
  --cst-bg-surface-1: #291c18;
  --cst-bg-surface-2: #38251f;
  --cst-bg-surface-3: #493128;
  --cst-bg-raised: #583b30;
  --cst-border: #6a493a;
  --cst-border-soft: #3d2922;

  --cst-text-primary: #f5eee8;
  --cst-text-secondary: #b5a096;
  --cst-text-tertiary: #87736a;
  --cst-text-on-action: #f5eee8;

  --cst-action: #9e4926;
  --cst-action-hover: #af502a;
  --cst-action-pressed: #893f21;
  --cst-focus: #f2a264;
  --cst-accent: #b68c54;
  --cst-accent-strong: #d2ad70;

  --cst-success: #8eaf65;
  --cst-win: #5eaa93;
  --cst-warning: #dda44d;
  --cst-reward: #c35a47;
  --cst-danger: #e04f3d;
  --cst-orange: #e8783e;
  --cst-purple: #a176a8;

  --cst-action-rgb: 158 73 38;
  --cst-focus-rgb: 242 162 100;
  --cst-accent-rgb: 182 140 84;
  --cst-danger-rgb: 224 79 61;
  --cst-bg-deep-rgb: 18 13 11;

  --cst-promo-gradient: linear-gradient(111.56deg, #713622 0%, #9e4926 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #af502a 0%, #8e3d2d 100%);
}

html[data-cobalt-theme="ancient"] {
  --cst-bg-deep: #0c120f;
  --cst-bg-page: #121b16;
  --cst-bg-surface-1: #1a2720;
  --cst-bg-surface-2: #24362b;
  --cst-bg-surface-3: #304638;
  --cst-bg-raised: #3b5644;
  --cst-border: #4e6755;
  --cst-border-soft: #293b30;

  --cst-text-primary: #edf1e9;
  --cst-text-secondary: #a8b7a8;
  --cst-text-tertiary: #708074;
  --cst-text-on-action: #edf1e9;

  --cst-action: #466a4d;
  --cst-action-hover: #4d7555;
  --cst-action-pressed: #3d5c43;
  --cst-focus: #8dc7a0;
  --cst-accent: #c1a454;
  --cst-accent-strong: #dac371;

  --cst-success: #7eae72;
  --cst-win: #5cae99;
  --cst-warning: #d7a84e;
  --cst-reward: #ad7f5e;
  --cst-danger: #cf6049;
  --cst-orange: #d97a43;
  --cst-purple: #9885b5;

  --cst-action-rgb: 70 106 77;
  --cst-focus-rgb: 141 199 160;
  --cst-accent-rgb: 193 164 84;
  --cst-danger-rgb: 207 96 73;
  --cst-bg-deep-rgb: 12 18 15;

  --cst-promo-gradient: linear-gradient(111.56deg, #315b46 0%, #9e803e 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #4d7555 0%, #c1a454 100%);
}

html[data-cobalt-theme="iron"] {
  --cst-bg-deep: #0d0e10;
  --cst-bg-page: #15171a;
  --cst-bg-surface-1: #1e2125;
  --cst-bg-surface-2: #292d32;
  --cst-bg-surface-3: #353a40;
  --cst-bg-raised: #42484f;
  --cst-border: #59616a;
  --cst-border-soft: #2f3338;

  --cst-text-primary: #f0f1f2;
  --cst-text-secondary: #a9afb6;
  --cst-text-tertiary: #747c85;
  --cst-text-on-action: #f0f1f2;

  --cst-action: #8e552e;
  --cst-action-hover: #9d5e32;
  --cst-action-pressed: #7b4a28;
  --cst-focus: #d6a06f;
  --cst-accent: #82909a;
  --cst-accent-strong: #aeb8bf;

  --cst-success: #7fa477;
  --cst-win: #66a18e;
  --cst-warning: #d2a44f;
  --cst-reward: #b46e5d;
  --cst-danger: #cf5b4f;
  --cst-orange: #d37842;
  --cst-purple: #9686aa;

  --cst-action-rgb: 142 85 46;
  --cst-focus-rgb: 214 160 111;
  --cst-accent-rgb: 130 144 154;
  --cst-danger-rgb: 207 91 79;
  --cst-bg-deep-rgb: 13 14 16;

  --cst-promo-gradient: linear-gradient(111.56deg, #4c555d 0%, #8e552e 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #9d5e32 0%, #78858f 100%);
}

html[data-cobalt-theme="blackout"] {
  --cst-bg-deep: #050506;
  --cst-bg-page: #0a0a0c;
  --cst-bg-surface-1: #111216;
  --cst-bg-surface-2: #191a1f;
  --cst-bg-surface-3: #23252b;
  --cst-bg-raised: #2e3038;
  --cst-border: #42454f;
  --cst-border-soft: #1d1e23;

  --cst-text-primary: #f4f4f5;
  --cst-text-secondary: #9a9ca3;
  --cst-text-tertiary: #666870;
  --cst-text-on-action: #f4f4f5;

  --cst-action: #bd3430;
  --cst-action-hover: #c33a35;
  --cst-action-pressed: #962825;
  --cst-focus: #ff7a73;
  --cst-accent: #8e929b;
  --cst-accent-strong: #c5c7cc;

  --cst-success: #72a478;
  --cst-win: #5da899;
  --cst-warning: #d3a449;
  --cst-reward: #b65c62;
  --cst-danger: #e04a43;
  --cst-orange: #d86f3e;
  --cst-purple: #9080ad;

  --cst-action-rgb: 189 52 48;
  --cst-focus-rgb: 255 122 115;
  --cst-accent-rgb: 142 146 155;
  --cst-danger-rgb: 224 74 67;
  --cst-bg-deep-rgb: 5 5 6;

  --cst-promo-gradient: linear-gradient(111.56deg, #25262b 0%, #8d2724 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #bd3430 0%, #34363d 100%);
}

html[data-cobalt-theme="arctic"] {
  --cst-bg-deep: #0b1014;
  --cst-bg-page: #121a20;
  --cst-bg-surface-1: #1b2730;
  --cst-bg-surface-2: #263640;
  --cst-bg-surface-3: #334751;
  --cst-bg-raised: #405966;
  --cst-border: #56717d;
  --cst-border-soft: #2b3d46;

  --cst-text-primary: #edf6f7;
  --cst-text-secondary: #a7bac1;
  --cst-text-tertiary: #6c838d;
  --cst-text-on-action: #edf6f7;

  --cst-action: #396b7c;
  --cst-action-hover: #3f7689;
  --cst-action-pressed: #325d6c;
  --cst-focus: #8bd4e4;
  --cst-accent: #9bb8c2;
  --cst-accent-strong: #c4d9de;

  --cst-success: #78ae91;
  --cst-win: #54b4ab;
  --cst-warning: #d8ac59;
  --cst-reward: #b87975;
  --cst-danger: #d86355;
  --cst-orange: #d9824d;
  --cst-purple: #9a8eb9;

  --cst-action-rgb: 57 107 124;
  --cst-focus-rgb: 139 212 228;
  --cst-accent-rgb: 155 184 194;
  --cst-danger-rgb: 216 99 85;
  --cst-bg-deep-rgb: 11 16 20;

  --cst-promo-gradient: linear-gradient(111.56deg, #396b7c 0%, #94b5c0 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #3f7689 0%, #c0d8dd 100%);
}

html[data-cobalt-theme="overpass"] {
  --cst-bg-deep: #11110f;
  --cst-bg-page: #191a17;
  --cst-bg-surface-1: #23251f;
  --cst-bg-surface-2: #2e3129;
  --cst-bg-surface-3: #3b3f35;
  --cst-bg-raised: #484d41;
  --cst-border: #606759;
  --cst-border-soft: #34372f;

  --cst-text-primary: #f0f1eb;
  --cst-text-secondary: #aaaea1;
  --cst-text-tertiary: #777d70;
  --cst-text-on-action: #050505;

  --cst-action: #b38a25;
  --cst-action-hover: #cfa63a;
  --cst-action-pressed: #95731f;
  --cst-focus: #e5c35b;
  --cst-accent: #6f8988;
  --cst-accent-strong: #96aaaa;

  --cst-success: #7fa66e;
  --cst-win: #5da797;
  --cst-warning: #d6aa43;
  --cst-reward: #bb7353;
  --cst-danger: #d25f49;
  --cst-orange: #d77a3f;
  --cst-purple: #9583ac;

  --cst-action-rgb: 179 138 37;
  --cst-focus-rgb: 229 195 91;
  --cst-accent-rgb: 111 137 136;
  --cst-danger-rgb: 210 95 73;
  --cst-bg-deep-rgb: 17 17 15;

  --cst-promo-gradient: linear-gradient(111.56deg, #526967 0%, #a47d22 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #d1aa3c 0%, #657f7e 100%);
}

html[data-cobalt-theme="ultraviolet"] {
  --cst-bg-deep: #0e0b12;
  --cst-bg-page: #16121c;
  --cst-bg-surface-1: #211a2a;
  --cst-bg-surface-2: #2d2338;
  --cst-bg-surface-3: #3b2e49;
  --cst-bg-raised: #49395a;
  --cst-border: #604b72;
  --cst-border-soft: #33283f;

  --cst-text-primary: #f3eef5;
  --cst-text-secondary: #aea1b5;
  --cst-text-tertiary: #7d6e86;
  --cst-text-on-action: #f3eef5;

  --cst-action: #8359a8;
  --cst-action-hover: #865aaa;
  --cst-action-pressed: #6a4588;
  --cst-focus: #c49cdd;
  --cst-accent: #a56c91;
  --cst-accent-strong: #c48eae;

  --cst-success: #7da478;
  --cst-win: #62a895;
  --cst-warning: #d0a153;
  --cst-reward: #c06496;
  --cst-danger: #d45c59;
  --cst-orange: #d47949;
  --cst-purple: #b37bd0;

  --cst-action-rgb: 131 89 168;
  --cst-focus-rgb: 196 156 221;
  --cst-accent-rgb: 165 108 145;
  --cst-danger-rgb: 212 92 89;
  --cst-bg-deep-rgb: 14 11 18;

  --cst-promo-gradient: linear-gradient(111.56deg, #5d3c75 0%, #9a516f 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #9d68bd 0%, #bf668e 100%);
}

html[data-cobalt-theme="source2"] {
  --cst-bg-deep: #0a0d12;
  --cst-bg-page: #0e141b;
  --cst-bg-surface-1: #191a1e;
  --cst-bg-surface-2: #23262e;
  --cst-bg-surface-3: #32353c;
  --cst-bg-raised: #3d4450;
  --cst-border: #67707b;
  --cst-border-soft: #282c2f;

  --cst-text-primary: #f0f2f4;
  --cst-text-secondary: #b8bcbf;
  --cst-text-tertiary: #8b929a;
  --cst-text-on-action: #f0f2f4;

  --cst-action: #29698d;
  --cst-action-hover: #2d749b;
  --cst-action-pressed: #235b7a;
  --cst-focus: #6dcff6;
  --cst-accent: #e0881e;
  --cst-accent-strong: #ff9b01;

  --cst-success: #59bf40;
  --cst-win: #43b69f;
  --cst-warning: #e8b123;
  --cst-reward: #c15755;
  --cst-danger: #ff6046;
  --cst-orange: #e0881e;
  --cst-purple: #9a72b0;

  --cst-action-rgb: 41 105 141;
  --cst-focus-rgb: 109 207 246;
  --cst-accent-rgb: 224 136 30;
  --cst-danger-rgb: 255 96 70;
  --cst-bg-deep-rgb: 10 13 18;

  --cst-promo-gradient: linear-gradient(111.56deg, #235b7a 0%, #c57518 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #2d749b 0%, #ff9b01 100%);
}

html[data-cobalt-theme="arena"] {
  --cst-bg-deep: #070707;
  --cst-bg-page: #101011;
  --cst-bg-surface-1: #18181b;
  --cst-bg-surface-2: #222225;
  --cst-bg-surface-3: #2d2d31;
  --cst-bg-raised: #3a3a40;
  --cst-border: #505058;
  --cst-border-soft: #252529;

  --cst-text-primary: #f5f5f5;
  --cst-text-secondary: #aaaab0;
  --cst-text-tertiary: #74747c;
  --cst-text-on-action: #f5f5f5;

  --cst-action: #b53c16;
  --cst-action-hover: #c74219;
  --cst-action-pressed: #9e3413;
  --cst-focus: #ff936c;
  --cst-accent: #8a965f;
  --cst-accent-strong: #b2bf79;

  --cst-success: #69ad70;
  --cst-win: #50ad9d;
  --cst-warning: #d9a84b;
  --cst-reward: #c35b52;
  --cst-danger: #df4d42;
  --cst-orange: #f4511e;
  --cst-purple: #9581af;

  --cst-action-rgb: 181 60 22;
  --cst-focus-rgb: 255 147 108;
  --cst-accent-rgb: 138 150 95;
  --cst-danger-rgb: 223 77 66;
  --cst-bg-deep-rgb: 7 7 7;

  --cst-promo-gradient: linear-gradient(111.56deg, #3b1e18 0%, #b53c16 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #c74219 0%, #7c2715 100%);
}

html[data-cobalt-theme="skinmarket"] {
  --cst-bg-deep: #151819;
  --cst-bg-page: #1d2021;
  --cst-bg-surface-1: #232728;
  --cst-bg-surface-2: #2b2f30;
  --cst-bg-surface-3: #34393b;
  --cst-bg-raised: #43484a;
  --cst-border: #5f6567;
  --cst-border-soft: #303536;

  --cst-text-primary: #f6f6f6;
  --cst-text-secondary: #9fa1a2;
  --cst-text-tertiary: #7b7f80;
  --cst-text-on-action: #f6f6f6;

  --cst-action: #bb3707;
  --cst-action-hover: #cd3c08;
  --cst-action-pressed: #a33007;
  --cst-focus: #ff8e69;
  --cst-accent: #4db5da;
  --cst-accent-strong: #85d4ee;

  --cst-success: #5eb648;
  --cst-win: #00a67c;
  --cst-warning: #e9a75d;
  --cst-reward: #db5977;
  --cst-danger: #e05a59;
  --cst-orange: #fa490a;
  --cst-purple: #9c79ae;

  --cst-action-rgb: 187 55 7;
  --cst-focus-rgb: 255 142 105;
  --cst-accent-rgb: 77 181 218;
  --cst-danger-rgb: 224 90 89;
  --cst-bg-deep-rgb: 21 24 25;

  --cst-promo-gradient: linear-gradient(111.56deg, #27687e 0%, #bb3707 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #cd3c08 0%, #4db5da 100%);
}

html[data-cobalt-theme="float"] {
  --cst-bg-deep: #0f1014;
  --cst-bg-page: #15171c;
  --cst-bg-surface-1: #1b1d24;
  --cst-bg-surface-2: #242733;
  --cst-bg-surface-3: #303446;
  --cst-bg-raised: #3d4258;
  --cst-border: #535a74;
  --cst-border-soft: #292c38;

  --cst-text-primary: #f6f6f7;
  --cst-text-secondary: #adb1bd;
  --cst-text-tertiary: #798096;
  --cst-text-on-action: #f6f6f7;

  --cst-action: #3f51b5;
  --cst-action-hover: #5063c5;
  --cst-action-pressed: #304092;
  --cst-focus: #7986cb;
  --cst-accent: #d53874;
  --cst-accent-strong: #ff4081;

  --cst-success: #74b987;
  --cst-win: #59b6a7;
  --cst-warning: #d7ab57;
  --cst-reward: #ff4081;
  --cst-danger: #f44336;
  --cst-orange: #db7441;
  --cst-purple: #9d74c2;

  --cst-action-rgb: 63 81 181;
  --cst-focus-rgb: 121 134 203;
  --cst-accent-rgb: 213 56 116;
  --cst-danger-rgb: 244 67 54;
  --cst-bg-deep-rgb: 15 16 20;

  --cst-promo-gradient: linear-gradient(111.56deg, #35469f 0%, #b92d66 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #586bd0 0%, #ff4081 100%);
}

html[data-cobalt-theme="magiceden"] {
  --cst-bg-deep: #0a070e;
  --cst-bg-page: #100c18;
  --cst-bg-surface-1: #15111d;
  --cst-bg-surface-2: #191523;
  --cst-bg-surface-3: #231e2f;
  --cst-bg-raised: #3e384d;
  --cst-border: #5e5559;
  --cst-border-soft: #291b37;

  --cst-text-primary: #f5f3f7;
  --cst-text-secondary: #a09caf;
  --cst-text-tertiary: #857f95;
  --cst-text-on-action: #f5f3f7;

  --cst-action: #7130fa;
  --cst-action-hover: #8d23f6;
  --cst-action-pressed: #4915ba;
  --cst-focus: #b88aff;
  --cst-accent: #b44778;
  --cst-accent-strong: #d96c9c;

  --cst-success: #06fc99;
  --cst-win: #24b0a7;
  --cst-warning: #ffc629;
  --cst-reward: #b44778;
  --cst-danger: #ff394a;
  --cst-orange: #ff7826;
  --cst-purple: #7130fa;

  --cst-action-rgb: 113 48 250;
  --cst-focus-rgb: 184 138 255;
  --cst-accent-rgb: 180 71 120;
  --cst-danger-rgb: 255 57 74;
  --cst-bg-deep-rgb: 10 7 14;

  --cst-promo-gradient: linear-gradient(111.56deg, #4915ba 0%, #b44778 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #7130fa 0%, #b44778 62%, #06fc99 100%);

  --cst-status-action-custom: #8e315e;
  --cst-status-action-hover-custom: #a13a6a;
  --cst-status-action-pressed-custom: #72264b;
}

html[data-cobalt-theme="carbon"] {
  --cst-bg-deep: #0b0c0e;
  --cst-bg-page: #111316;
  --cst-bg-surface-1: #191c20;
  --cst-bg-surface-2: #22262b;
  --cst-bg-surface-3: #2d3238;
  --cst-bg-raised: #3c4249;
  --cst-border: #555d66;
  --cst-border-soft: #292d32;

  --cst-text-primary: #f1f2f2;
  --cst-text-secondary: #adb3b8;
  --cst-text-tertiary: #7b838b;
  --cst-text-on-action: #050505;

  --cst-action: #aeb7c1;
  --cst-action-hover: #c6ced6;
  --cst-action-pressed: #919ba5;
  --cst-focus: #e1e6eb;
  --cst-accent: #d39b43;
  --cst-accent-strong: #efb85b;

  --cst-success: #7baa77;
  --cst-win: #5aa794;
  --cst-warning: #d8a54f;
  --cst-reward: #bd6b72;
  --cst-danger: #d4564e;
  --cst-orange: #cf7440;
  --cst-purple: #9382ad;

  --cst-action-rgb: 174 183 193;
  --cst-focus-rgb: 225 230 235;
  --cst-accent-rgb: 211 155 67;
  --cst-danger-rgb: 212 86 78;
  --cst-bg-deep-rgb: 11 12 14;

  --cst-promo-gradient: linear-gradient(111.56deg, #343a40 0%, #aa7730 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #aeb7c1 0%, #d39b43 100%);
}

html[data-cobalt-theme="ember"] {
  --cst-bg-deep: #0e0806;
  --cst-bg-page: #170d09;
  --cst-bg-surface-1: #21120d;
  --cst-bg-surface-2: #2d1912;
  --cst-bg-surface-3: #3b2117;
  --cst-bg-raised: #4b2c20;
  --cst-border: #633c2c;
  --cst-border-soft: #352018;

  --cst-text-primary: #f7f0eb;
  --cst-text-secondary: #b9a59b;
  --cst-text-tertiary: #856a5e;
  --cst-text-on-action: #f7f0eb;

  --cst-action: #a94320;
  --cst-action-hover: #ba4a23;
  --cst-action-pressed: #933a1c;
  --cst-focus: #ff9866;
  --cst-accent: #f0a23e;
  --cst-accent-strong: #ffc266;

  --cst-success: #91b864;
  --cst-win: #55ad92;
  --cst-warning: #e7ad4d;
  --cst-reward: #d15f62;
  --cst-danger: #e04438;
  --cst-orange: #ed6a32;
  --cst-purple: #a578a7;

  --cst-action-rgb: 169 67 32;
  --cst-focus-rgb: 255 152 102;
  --cst-accent-rgb: 240 162 62;
  --cst-danger-rgb: 224 68 56;
  --cst-bg-deep-rgb: 14 8 6;

  --cst-promo-gradient: linear-gradient(111.56deg, #6e2615 0%, #a94320 55%, #d99a37 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #ba4a23 0%, #f0a23e 100%);
}

html[data-cobalt-theme="emerald"] {
  --cst-bg-deep: #07100d;
  --cst-bg-page: #0b1713;
  --cst-bg-surface-1: #10231c;
  --cst-bg-surface-2: #173027;
  --cst-bg-surface-3: #204137;
  --cst-bg-raised: #2c5548;
  --cst-border: #3e6b5a;
  --cst-border-soft: #1c382e;

  --cst-text-primary: #edf6f1;
  --cst-text-secondary: #9eb9ad;
  --cst-text-tertiary: #66897b;
  --cst-text-on-action: #edf6f1;

  --cst-action: #11734a;
  --cst-action-hover: #127f51;
  --cst-action-pressed: #0f6440;
  --cst-focus: #62ddaa;
  --cst-accent: #8dd84f;
  --cst-accent-strong: #b3ee73;

  --cst-success: #65c777;
  --cst-win: #35baa2;
  --cst-warning: #d7b24f;
  --cst-reward: #bb6a78;
  --cst-danger: #db5a4d;
  --cst-orange: #d97b3f;
  --cst-purple: #8e82b5;

  --cst-action-rgb: 17 115 74;
  --cst-focus-rgb: 98 221 170;
  --cst-accent-rgb: 141 216 79;
  --cst-danger-rgb: 219 90 77;
  --cst-bg-deep-rgb: 7 16 13;

  --cst-promo-gradient: linear-gradient(111.56deg, #0e7048 0%, #659e38 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #127f51 0%, #8dd84f 100%);
}

html[data-cobalt-theme="midnight"] {
  --cst-bg-deep: #080b12;
  --cst-bg-page: #0c111b;
  --cst-bg-surface-1: #121a28;
  --cst-bg-surface-2: #192438;
  --cst-bg-surface-3: #22304a;
  --cst-bg-raised: #2e4060;
  --cst-border: #43597c;
  --cst-border-soft: #1d2940;

  --cst-text-primary: #f0f4fa;
  --cst-text-secondary: #a5b2c6;
  --cst-text-tertiary: #6d7f9b;
  --cst-text-on-action: #f0f4fa;

  --cst-action: #2f63bb;
  --cst-action-hover: #376bc5;
  --cst-action-pressed: #244d94;
  --cst-focus: #79a7ff;
  --cst-accent: #65c7f0;
  --cst-accent-strong: #94ddfa;

  --cst-success: #6db985;
  --cst-win: #4bb5aa;
  --cst-warning: #d8ab4e;
  --cst-reward: #c1648a;
  --cst-danger: #df5a54;
  --cst-orange: #d77742;
  --cst-purple: #8b75c7;

  --cst-action-rgb: 47 99 187;
  --cst-focus-rgb: 121 167 255;
  --cst-accent-rgb: 101 199 240;
  --cst-danger-rgb: 223 90 84;
  --cst-bg-deep-rgb: 8 11 18;

  --cst-promo-gradient: linear-gradient(111.56deg, #244984 0%, #3598c0 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #2f63bb 0%, #65c7f0 100%);
}

html[data-cobalt-theme="bloodsport"] {
  --cst-bg-deep: #090607;
  --cst-bg-page: #100a0c;
  --cst-bg-surface-1: #1a1014;
  --cst-bg-surface-2: #26161c;
  --cst-bg-surface-3: #342029;
  --cst-bg-raised: #472d37;
  --cst-border: #63434e;
  --cst-border-soft: #321d24;

  --cst-text-primary: #fff4f1;
  --cst-text-secondary: #c3aaa8;
  --cst-text-tertiary: #8d7074;
  --cst-text-on-action: #fff4f1;

  --cst-action: #bb3039;
  --cst-action-hover: #ca3944;
  --cst-action-pressed: #93252c;
  --cst-focus: #ff7778;
  --cst-accent: #e8dfd7;
  --cst-accent-strong: #fff8f1;

  --cst-success: #79aa78;
  --cst-win: #58a796;
  --cst-warning: #d6a84d;
  --cst-reward: #c35e68;
  --cst-danger: #e04444;
  --cst-orange: #d66f3d;
  --cst-purple: #9481ad;

  --cst-action-rgb: 187 48 57;
  --cst-focus-rgb: 255 119 120;
  --cst-accent-rgb: 232 223 215;
  --cst-danger-rgb: 224 68 68;
  --cst-bg-deep-rgb: 9 6 7;

  --cst-promo-gradient: linear-gradient(111.56deg, #4b2732 0%, #9f222d 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #bb3039 0%, #e8dfd7 100%);
}

html[data-cobalt-theme="neonnoir"] {
  --cst-bg-deep: #060b0d;
  --cst-bg-page: #0a1114;
  --cst-bg-surface-1: #0f1a1f;
  --cst-bg-surface-2: #16252b;
  --cst-bg-surface-3: #20323a;
  --cst-bg-raised: #2d454e;
  --cst-border: #42606a;
  --cst-border-soft: #1b3036;

  --cst-text-primary: #eff7f7;
  --cst-text-secondary: #a1b5b9;
  --cst-text-tertiary: #6c858d;
  --cst-text-on-action: #eff7f7;

  --cst-action: #00717a;
  --cst-action-hover: #007c87;
  --cst-action-pressed: #00626b;
  --cst-focus: #66e7ec;
  --cst-accent: #e43f87;
  --cst-accent-strong: #ff67a8;

  --cst-success: #58bd83;
  --cst-win: #38b9aa;
  --cst-warning: #e3b047;
  --cst-reward: #e43f87;
  --cst-danger: #e54855;
  --cst-orange: #e0763d;
  --cst-purple: #9d6bc1;

  --cst-action-rgb: 0 113 122;
  --cst-focus-rgb: 102 231 236;
  --cst-accent-rgb: 228 63 135;
  --cst-danger-rgb: 229 72 85;
  --cst-bg-deep-rgb: 6 11 13;

  --cst-promo-gradient: linear-gradient(111.56deg, #00717a 0%, #b32666 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #007c87 0%, #e43f87 100%);
}

/* Hue correction for legacy monochrome/blue UI raster decorations. */
html[data-cobalt-theme="dust2"] { --cst-asset-hue-shift: 176deg; }
html[data-cobalt-theme="nuke"] { --cst-asset-hue-shift: -28deg; }
html[data-cobalt-theme="inferno"] { --cst-asset-hue-shift: 156deg; }
html[data-cobalt-theme="ancient"] { --cst-asset-hue-shift: -87deg; }
html[data-cobalt-theme="iron"] { --cst-asset-hue-shift: 164deg; }
html[data-cobalt-theme="blackout"] { --cst-asset-hue-shift: 142deg; }
html[data-cobalt-theme="arctic"] { --cst-asset-hue-shift: -26deg; }
html[data-cobalt-theme="overpass"] { --cst-asset-hue-shift: 185deg; }
html[data-cobalt-theme="ultraviolet"] { --cst-asset-hue-shift: 51deg; }
html[data-cobalt-theme="source2"] { --cst-asset-hue-shift: -16deg; }
html[data-cobalt-theme="arena"] { --cst-asset-hue-shift: 154deg; }
html[data-cobalt-theme="skinmarket"] { --cst-asset-hue-shift: 156deg; }
html[data-cobalt-theme="float"] { --cst-asset-hue-shift: 11deg; }
html[data-cobalt-theme="magiceden"] { --cst-asset-hue-shift: 39deg; }
html[data-cobalt-theme="carbon"] { --cst-asset-hue-shift: 178deg; }
html[data-cobalt-theme="ember"] { --cst-asset-hue-shift: 154deg; }
html[data-cobalt-theme="emerald"] { --cst-asset-hue-shift: -65deg; }
html[data-cobalt-theme="midnight"] { --cst-asset-hue-shift: -1deg; }
html[data-cobalt-theme="bloodsport"] { --cst-asset-hue-shift: 139deg; }
html[data-cobalt-theme="neonnoir"] { --cst-asset-hue-shift: -36deg; }

html[data-cobalt-theme="dust2"] { --cst-glow-hue-shift: 30deg; }
html[data-cobalt-theme="nuke"] { --cst-glow-hue-shift: -173deg; }
html[data-cobalt-theme="inferno"] { --cst-glow-hue-shift: 12deg; }
html[data-cobalt-theme="ancient"] { --cst-glow-hue-shift: 126deg; }
html[data-cobalt-theme="iron"] { --cst-glow-hue-shift: 18deg; }
html[data-cobalt-theme="blackout"] { --cst-glow-hue-shift: -4deg; }
html[data-cobalt-theme="arctic"] { --cst-glow-hue-shift: -171deg; }
html[data-cobalt-theme="overpass"] { --cst-glow-hue-shift: 37deg; }
html[data-cobalt-theme="ultraviolet"] { --cst-glow-hue-shift: -94deg; }
html[data-cobalt-theme="source2"] { --cst-glow-hue-shift: -165deg; }
html[data-cobalt-theme="arena"] { --cst-glow-hue-shift: 8deg; }
html[data-cobalt-theme="skinmarket"] { --cst-glow-hue-shift: 10deg; }
html[data-cobalt-theme="float"] { --cst-glow-hue-shift: -135deg; }
html[data-cobalt-theme="magiceden"] { --cst-glow-hue-shift: -107deg; }
html[data-cobalt-theme="carbon"] { --cst-glow-hue-shift: -154deg; }
html[data-cobalt-theme="ember"] { --cst-glow-hue-shift: 9deg; }
html[data-cobalt-theme="emerald"] { --cst-glow-hue-shift: 149deg; }
html[data-cobalt-theme="midnight"] { --cst-glow-hue-shift: -148deg; }
html[data-cobalt-theme="bloodsport"] { --cst-glow-hue-shift: -10deg; }
html[data-cobalt-theme="neonnoir"] { --cst-glow-hue-shift: 179deg; }

/*
 * Bridge theme semantics into both generations of tokens used by the static
 * build: the current --ds-* system, legacy component tokens and Tailwind.
 */
:root,
html[data-cobalt-theme] {
  --cst-text-on-status: var(--cst-text-primary);
  --cst-status-action: var(--cst-status-action-custom, color-mix(in srgb, var(--cst-accent) 44%, var(--cst-bg-deep)));
  --cst-status-action-hover: var(--cst-status-action-hover-custom, color-mix(in srgb, var(--cst-accent) 48%, var(--cst-bg-deep)));
  --cst-status-action-pressed: var(--cst-status-action-pressed-custom, color-mix(in srgb, var(--cst-accent) 38%, var(--cst-bg-deep)));

  --ds-neutral-0: var(--cst-text-primary) !important;
  --ds-neutral-200: color-mix(in srgb, var(--cst-text-primary) 76%, var(--cst-text-secondary)) !important;
  --ds-neutral-300: var(--cst-text-secondary) !important;
  --ds-neutral-400: var(--cst-text-tertiary) !important;
  --ds-neutral-550: var(--cst-bg-raised) !important;
  --ds-neutral-600: var(--cst-bg-surface-3) !important;
  --ds-neutral-700: var(--cst-bg-surface-2) !important;
  --ds-neutral-750: var(--cst-bg-surface-1) !important;
  --ds-neutral-800: var(--cst-bg-page) !important;
  --ds-neutral-900: var(--cst-bg-deep) !important;

  --ds-brand-blue: var(--cst-action) !important;
  --ds-brand-green: color-mix(in srgb, var(--cst-accent) 76%, var(--cst-bg-deep)) !important;
  --ds-brand-green-bright: var(--cst-accent-strong) !important;
  --ds-accent-cyan: var(--cst-focus) !important;
  --ds-accent-bright-blue: var(--cst-action-hover) !important;
  --ds-accent-yellow: var(--cst-warning) !important;
  --ds-accent-orange: var(--cst-orange) !important;
  --ds-accent-red-orange: var(--cst-danger) !important;

  --ds-status-success: var(--cst-success) !important;
  --ds-status-win: var(--cst-win) !important;
  --ds-status-warning: var(--cst-warning) !important;
  --ds-status-reward: var(--cst-reward) !important;
  --ds-status-danger: var(--cst-danger) !important;
  --ds-status-orange: var(--cst-orange) !important;
  --ds-status-level: var(--cst-status-action) !important;
  --ds-status-level-gradient: var(--cst-status-action-pressed) !important;
  --ds-status-lime: var(--cst-accent-strong) !important;

  --ds-color-bg-page: var(--cst-bg-page) !important;
  --ds-color-bg-header: var(--cst-bg-deep) !important;
  --ds-color-bg-surface-1: var(--cst-bg-surface-1) !important;
  --ds-color-bg-surface-2: var(--cst-bg-surface-3) !important;
  --ds-color-bg-disabled: var(--cst-bg-raised) !important;
  --ds-color-bg-control: color-mix(in srgb, var(--cst-bg-deep) 50%, transparent) !important;
  --ds-color-text-primary: var(--cst-text-primary) !important;
  --ds-color-text-secondary: var(--cst-text-secondary) !important;
  --ds-color-text-tertiary: var(--cst-text-tertiary) !important;
  --ds-color-text-on-brand: var(--cst-text-on-action) !important;
  --ds-color-text-accent: var(--cst-accent-strong) !important;
  --ds-color-icon-primary: var(--cst-text-primary) !important;
  --ds-color-icon-secondary: var(--cst-text-secondary) !important;
  --ds-color-icon-accent: var(--cst-focus) !important;
  --ds-color-border-subtle: var(--cst-border-soft) !important;
  --ds-color-border-default: var(--cst-border-soft) !important;
  --ds-color-border-accent: color-mix(in srgb, var(--cst-action) 28%, transparent) !important;
  --ds-color-action-primary: var(--cst-action) !important;
  --ds-color-action-primary-hover: var(--cst-action-hover) !important;
  --ds-color-action-primary-pressed: var(--cst-action-pressed) !important;
  --ds-color-action-disabled-bg: var(--cst-bg-raised) !important;
  --ds-color-action-secondary: var(--cst-bg-surface-3) !important;
  --ds-color-action-secondary-hover: var(--cst-bg-raised) !important;
  --ds-color-action-secondary-pressed: var(--cst-bg-surface-2) !important;
  --ds-color-state-focus: var(--cst-focus) !important;
  --ds-color-state-focus-muted: var(--cst-text-tertiary) !important;
  --ds-color-overlay-modal: color-mix(in srgb, var(--cst-bg-deep) 92%, #000) !important;
  --ds-color-modal-glow: var(--cst-action) !important;
  --ds-promo-banner-mobile-gradient: var(--cst-promo-gradient) !important;

  --components-button-primary-text-primary: var(--cst-text-on-action) !important;
  --components-button-primary-text-primary-hover: var(--cst-text-on-action) !important;
  --components-button-primary-text-primary-pressed: var(--cst-text-on-action) !important;
  --components-button-primary-icon-color-primary: var(--cst-text-on-action) !important;
  --components-button-primary-icon-color-primary-hover: var(--cst-text-on-action) !important;
  --components-button-primary-icon-color-primary-pressed: var(--cst-text-on-action) !important;
  --components-button-secondary-background-secondary: var(--cst-bg-surface-3) !important;
  --components-button-secondary-background-secondary-hover: var(--cst-bg-raised) !important;
  --components-button-secondary-background-secondary-pressed: var(--cst-bg-surface-2) !important;
  --components-button-secondary-background-secondary-disabled: var(--cst-bg-surface-3) !important;
  --components-button-secondary-text-secondary: var(--cst-text-primary) !important;
  --components-button-secondary-text-secondary-hover: var(--cst-text-primary) !important;
  --components-button-secondary-text-secondary-pressed: var(--cst-text-primary) !important;
  --components-button-secondary-text-secondary-disabled: var(--cst-text-tertiary) !important;
  --components-button-secondary-icon-color-primary: var(--cst-text-primary) !important;
  --components-button-secondary-icon-color-primary-hover: var(--cst-text-primary) !important;
  --components-button-secondary-icon-color-primary-pressed: var(--cst-text-primary) !important;
  --components-button-secondary-icon-color-primary-disabled: var(--cst-text-tertiary) !important;
  --components-button-danger-background-danger: color-mix(in srgb, var(--cst-danger) 68%, var(--cst-bg-deep)) !important;
  --components-button-danger-background-danger-hover: color-mix(in srgb, var(--cst-danger) 72%, var(--cst-bg-deep)) !important;
  --components-button-danger-background-danger-pressed: color-mix(in srgb, var(--cst-danger) 60%, var(--cst-bg-deep)) !important;
  --components-button-danger-background-danger-disabled: var(--cst-bg-raised) !important;
  --components-button-danger-text-danger: var(--cst-text-primary) !important;
  --components-button-danger-text-danger-hover: var(--cst-text-primary) !important;
  --components-button-danger-text-danger-pressed: var(--cst-text-primary) !important;
  --components-button-danger-text-danger-disabled: var(--cst-text-tertiary) !important;
  --components-button-danger-icon-color-primary: var(--cst-text-primary) !important;
  --components-button-danger-icon-color-primary-hover: var(--cst-text-primary) !important;
  --components-button-danger-icon-color-primary-pressed: var(--cst-text-primary) !important;
  --components-button-danger-icon-color-primary-disabled: var(--cst-text-tertiary) !important;

  --ds-balance-gradient-start: rgb(var(--cst-action-rgb) / 52%) !important;
  --ds-balance-gradient-end: rgb(var(--cst-action-rgb) / 26%) !important;
  --ds-balance-gradient-start-hover: rgb(var(--cst-action-rgb) / 62%) !important;
  --ds-balance-gradient-end-hover: rgb(var(--cst-action-rgb) / 31%) !important;
  --ds-balance-gradient-start-pressed: rgb(var(--cst-action-rgb) / 72%) !important;
  --ds-balance-gradient-end-pressed: rgb(var(--cst-action-rgb) / 36%) !important;
  --ds-balance-gradient-start-disabled: rgb(var(--cst-action-rgb) / 18%) !important;
  --ds-balance-gradient-end-disabled: rgb(var(--cst-action-rgb) / 9%) !important;

  --cl-card-bg: var(--cst-bg-surface-2) !important;
  --light-grey: var(--cst-text-secondary) !important;
  --medium-grey: var(--cst-bg-surface-3) !important;
  --dark-grey: var(--cst-bg-surface-1) !important;
  --team-3-color: var(--cst-purple) !important;
  --error-color: var(--cst-danger) !important;
  --success-color: var(--cst-success) !important;
  --swiper-theme-color: var(--cst-focus) !important;

  /* Legacy plural token family still used by older buttons, inputs and cards. */
  --colors-neutral-white: var(--cst-text-primary) !important;
  --colors-neutral-100: var(--cst-text-primary) !important;
  --colors-neutral-200: var(--cst-text-secondary) !important;
  --colors-neutral-300: var(--cst-text-secondary) !important;
  --colors-neutral-400: var(--cst-text-tertiary) !important;
  --colors-neutral-500: var(--cst-bg-raised) !important;
  --colors-background-base: var(--cst-bg-page) !important;
  --colors-background-card-dark: var(--cst-bg-deep) !important;
  --colors-background-card: var(--cst-bg-surface-1) !important;
  --colors-background-card-inner: var(--cst-bg-surface-2) !important;
  --colors-brand-primary: var(--cst-action) !important;
  --colors-brand-100: color-mix(in srgb, var(--cst-action) 18%, transparent) !important;
  --colors-brand-200: var(--cst-focus) !important;
  --colors-brand-300: var(--cst-action-hover) !important;
  --colors-brand-450: var(--cst-action-hover) !important;
  --colors-brand-500: var(--cst-action-pressed) !important;
  --colors-green-primary: var(--cst-accent-strong) !important;
  --colors-green-400: var(--cst-success) !important;
  --colors-green-500: color-mix(in srgb, var(--cst-success) 86%, var(--cst-bg-deep)) !important;
  --colors-success-primary: var(--cst-success) !important;
  --colors-warning-primary: var(--cst-warning) !important;
  --colors-error-primary: var(--cst-danger) !important;
  --colors-error-200: color-mix(in srgb, var(--cst-danger) 78%, var(--cst-text-primary)) !important;
  --colors-overlay-dark-heavy: color-mix(in srgb, var(--cst-bg-deep) 92%, #000) !important;
  --bg-base: var(--cst-bg-page) !important;

  /* Tokens that were fixed to the original blue-grey design. */
  --ds-personal-offer-bg-left: var(--cst-bg-surface-1) !important;
  --ds-personal-offer-bg-card: var(--cst-bg-surface-2) !important;
  --ds-personal-offer-accent: var(--cst-warning) !important;
  --ds-personal-offer-accent-strong: var(--cst-focus) !important;
  --ds-personal-offer-accent-end: var(--cst-orange) !important;
  --ds-shadow-switch-thumb-key-color: rgb(var(--cst-action-rgb) / 9%) !important;
  --ds-shadow-switch-thumb-ambient-color: rgb(var(--cst-action-rgb) / 5%) !important;
  --components-badge-new-background: color-mix(in srgb, var(--cst-success) 20%, transparent) !important;
  --components-badge-new-color: var(--cst-success) !important;
  --components-badge-top-background: color-mix(in srgb, var(--cst-warning) 20%, transparent) !important;
  --components-badge-top-color: var(--cst-warning) !important;

  --color-neutral-500: var(--cst-border) !important;
  --color-neutral-600: var(--cst-bg-raised) !important;
  --color-neutral-700: var(--cst-bg-surface-1) !important;
  --color-neutral-800: var(--cst-bg-page) !important;
  --color-neutral-900: var(--cst-bg-deep) !important;
  --color-white: var(--cst-text-primary) !important;
  --white: var(--cst-text-primary) !important;
  --color-brand-primary: var(--cst-action-hover) !important;
  --color-brand-100: color-mix(in srgb, var(--cst-focus) 60%, var(--cst-text-primary)) !important;
  --color-brand-300: var(--cst-focus) !important;
  --color-brand-600: var(--cst-action) !important;
  --color-brand-gray: var(--cst-border) !important;
  --color-success-100: color-mix(in srgb, var(--cst-success) 30%, var(--cst-text-primary)) !important;
  --color-warning-500: var(--cst-warning) !important;
  --color-error-500: var(--cst-danger) !important;
  --color-accent-purple: var(--cst-purple) !important;

  --color-red-300: color-mix(in srgb, var(--cst-danger) 52%, var(--cst-text-primary)) !important;
  --color-red-400: color-mix(in srgb, var(--cst-danger) 76%, var(--cst-text-primary)) !important;
  --color-red-500: var(--cst-danger) !important;
  --color-red-600: color-mix(in srgb, var(--cst-danger) 86%, var(--cst-bg-deep)) !important;
  --color-red-700: color-mix(in srgb, var(--cst-danger) 70%, var(--cst-bg-deep)) !important;
  --color-red-800: color-mix(in srgb, var(--cst-danger) 54%, var(--cst-bg-deep)) !important;
  --color-red-900: color-mix(in srgb, var(--cst-danger) 38%, var(--cst-bg-deep)) !important;
  --color-orange-300: color-mix(in srgb, var(--cst-orange) 56%, var(--cst-text-primary)) !important;
  --color-orange-500: var(--cst-orange) !important;
  --color-orange-600: color-mix(in srgb, var(--cst-orange) 84%, var(--cst-bg-deep)) !important;
  --color-orange-700: color-mix(in srgb, var(--cst-orange) 66%, var(--cst-bg-deep)) !important;
  --color-yellow-400: color-mix(in srgb, var(--cst-warning) 78%, var(--cst-text-primary)) !important;
  --color-yellow-600: color-mix(in srgb, var(--cst-warning) 84%, var(--cst-bg-deep)) !important;
  --color-yellow-700: color-mix(in srgb, var(--cst-warning) 66%, var(--cst-bg-deep)) !important;
  --color-lime-100: color-mix(in srgb, var(--cst-accent-strong) 26%, var(--cst-text-primary)) !important;
  --color-lime-300: color-mix(in srgb, var(--cst-accent-strong) 62%, var(--cst-text-primary)) !important;
  --color-lime-500: var(--cst-accent-strong) !important;
  --color-lime-600: color-mix(in srgb, var(--cst-accent) 86%, var(--cst-bg-deep)) !important;
  --color-lime-700: color-mix(in srgb, var(--cst-accent) 68%, var(--cst-bg-deep)) !important;
  --color-green-300: color-mix(in srgb, var(--cst-success) 58%, var(--cst-text-primary)) !important;
  --color-green-400: color-mix(in srgb, var(--cst-success) 76%, var(--cst-text-primary)) !important;
  --color-green-600: color-mix(in srgb, var(--cst-success) 88%, var(--cst-bg-deep)) !important;
  --color-green-700: color-mix(in srgb, var(--cst-success) 70%, var(--cst-bg-deep)) !important;
  --color-green-900: color-mix(in srgb, var(--cst-success) 38%, var(--cst-bg-deep)) !important;
  --color-emerald-400: color-mix(in srgb, var(--cst-win) 78%, var(--cst-text-primary)) !important;
  --color-cyan-600: color-mix(in srgb, var(--cst-focus) 80%, var(--cst-bg-deep)) !important;
  --color-cyan-700: color-mix(in srgb, var(--cst-focus) 64%, var(--cst-bg-deep)) !important;
  --color-blue-200: color-mix(in srgb, var(--cst-focus) 38%, var(--cst-text-primary)) !important;
  --color-blue-400: color-mix(in srgb, var(--cst-action-hover) 70%, var(--cst-text-primary)) !important;
  --color-blue-500: var(--cst-action-hover) !important;
  --color-blue-600: var(--cst-action) !important;
  --color-blue-700: color-mix(in srgb, var(--cst-action) 72%, var(--cst-bg-deep)) !important;
  --color-indigo-600: color-mix(in srgb, var(--cst-purple) 82%, var(--cst-bg-deep)) !important;
  --color-indigo-700: color-mix(in srgb, var(--cst-purple) 66%, var(--cst-bg-deep)) !important;
  --color-violet-600: var(--cst-purple) !important;
  --color-violet-700: color-mix(in srgb, var(--cst-purple) 72%, var(--cst-bg-deep)) !important;
  --color-purple-600: var(--cst-purple) !important;
  --color-purple-700: color-mix(in srgb, var(--cst-purple) 72%, var(--cst-bg-deep)) !important;
  --color-purple-900: color-mix(in srgb, var(--cst-purple) 40%, var(--cst-bg-deep)) !important;
  --color-pink-600: var(--cst-reward) !important;
  --color-pink-700: color-mix(in srgb, var(--cst-reward) 72%, var(--cst-bg-deep)) !important;

  --color-slate-400: color-mix(in srgb, var(--cst-text-secondary) 76%, var(--cst-text-primary)) !important;
  --color-slate-500: var(--cst-text-tertiary) !important;
  --color-slate-600: var(--cst-border) !important;
  --color-gray-200: color-mix(in srgb, var(--cst-text-primary) 90%, var(--cst-text-secondary)) !important;
  --color-gray-300: color-mix(in srgb, var(--cst-text-primary) 72%, var(--cst-text-secondary)) !important;
  --color-gray-400: var(--cst-text-secondary) !important;
  --color-gray-500: var(--cst-text-tertiary) !important;
  --color-gray-600: var(--cst-border) !important;
  --color-gray-700: var(--cst-bg-raised) !important;
  --color-gray-800: var(--cst-bg-surface-2) !important;
  --color-gray-900: var(--cst-bg-deep) !important;
  --color-zinc-300: color-mix(in srgb, var(--cst-text-primary) 72%, var(--cst-text-secondary)) !important;
  --color-neutral-100: color-mix(in srgb, var(--cst-text-primary) 94%, var(--cst-text-secondary)) !important;
  --color-neutral-200: color-mix(in srgb, var(--cst-text-primary) 84%, var(--cst-text-secondary)) !important;
  --color-neutral-300: color-mix(in srgb, var(--cst-text-primary) 68%, var(--cst-text-secondary)) !important;
  --color-stone-700: var(--cst-bg-raised) !important;

  --skeleton-bg: color-mix(in srgb, var(--cst-bg-surface-3) 72%, transparent) !important;
  --skeleton-shimmer-highlight: color-mix(in srgb, var(--cst-border) 24%, transparent) !important;
}

html[data-cobalt-theme],
html[data-cobalt-theme] body,
html[data-cobalt-theme] #app {
  background-color: var(--cst-bg-page);
}

html[data-cobalt-theme] {
  accent-color: var(--cst-action);
}

html[data-cobalt-theme] ::selection {
  background: rgb(var(--cst-action-rgb) / 42%);
  color: var(--cst-text-primary);
}

html[data-cobalt-theme] .ds-system-button--primary:not(:disabled),
html[data-cobalt-theme] .button-primary:not(:disabled),
html[data-cobalt-theme] .btn-blue:not(:disabled),
html[data-cobalt-theme] .welcome-modal__btn-blue:not(:disabled),
html[data-cobalt-theme] .easter-collect__btn-blue:not(:disabled),
html[data-cobalt-theme] button[class*="bg-[#3680"]:not(:disabled),
html[data-cobalt-theme] a[class*="bg-[#3680"] {
  color: var(--cst-text-on-action) !important;
}

html[data-cobalt-theme] .ds-system-button--primary:not(:disabled) svg,
html[data-cobalt-theme] .button-primary:not(:disabled) svg,
html[data-cobalt-theme] .btn-blue:not(:disabled) svg {
  color: var(--cst-text-on-action) !important;
}

html[data-cobalt-theme] .ds-system-button--secondary:not(:disabled):not(.ds-system-button--state-disabled),
html[data-cobalt-theme] .btn-secondary:not(:disabled) {
  color: var(--cst-text-primary) !important;
}

html[data-cobalt-theme] .ds-system-button--secondary:not(:disabled):not(.ds-system-button--state-disabled) svg,
html[data-cobalt-theme] .btn-secondary:not(:disabled) svg {
  color: var(--cst-text-primary) !important;
}

html[data-cobalt-theme] .get-back-user-info-shared__button.ds-system-button--primary:not(:disabled) {
  color: var(--cst-text-on-status) !important;
}

html[data-cobalt-theme] .get-back-user-info-shared__button.ds-system-button--primary:not(:disabled) svg {
  color: var(--cst-text-on-status) !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-cobalt-theme] .get-back-user-info-shared__button.ds-system-button--primary:hover:not(:disabled):not(.ds-system-button--state-disabled):not(.ds-system-button--loading) {
    background: var(--cst-status-action-hover) !important;
  }
}

html[data-cobalt-theme] .get-back-user-info-shared__button.ds-system-button--primary:active:not(:disabled):not(.ds-system-button--state-disabled):not(.ds-system-button--loading),
html[data-cobalt-theme] .get-back-user-info-shared__button.ds-system-button--primary.ds-system-button--state-pressed:not(:disabled):not(.ds-system-button--state-disabled) {
  background: var(--cst-status-action-pressed) !important;
}

html[data-cobalt-theme] .crate-wars-provably-details__link {
  background: var(--cst-action) !important;
  color: var(--cst-text-on-action) !important;
}

html[data-cobalt-theme] .v-popper--theme-dropdown .v-popper__inner {
  border-color: var(--cst-border-soft) !important;
  background: var(--cst-bg-surface-2) !important;
  color: var(--cst-text-primary) !important;
  box-shadow: 0 12px 34px rgb(var(--cst-bg-deep-rgb) / 44%) !important;
}

html[data-cobalt-theme] .v-popper--theme-dropdown .v-popper__arrow-inner {
  border-color: var(--cst-bg-surface-2) !important;
}

html[data-cobalt-theme] .v-popper--theme-dropdown .v-popper__arrow-outer {
  border-color: var(--cst-border-soft) !important;
}

/*
 * Frozen-build coverage for components that kept literal fills or external
 * fallback artwork. These selectors deliberately change color only.
 */
html[data-cobalt-theme] .new-crate-card-widget {
  background: var(--cst-bg-surface-1) !important;
  border-radius: var(--ds-radius-2, 8px);
  box-shadow: inset 0 0 0 1px var(--cst-border-soft);
}

@media (hover: hover) and (pointer: fine) {
  html[data-cobalt-theme] .new-crate-card-widget:hover:not(.new-crate-card-widget--disabled),
  html[data-cobalt-theme] .case-item-card:hover {
    background: var(--cst-bg-surface-2) !important;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--cst-action) 42%, var(--cst-border-soft)),
      0 8px 24px rgb(var(--cst-bg-deep-rgb) / 32%);
  }
}

html[data-cobalt-theme] .new-crate-card-widget:focus-visible,
html[data-cobalt-theme] .case-item-card:focus-visible {
  outline-color: var(--cst-focus) !important;
}

html[data-cobalt-theme] .new-crate-card-widget:active:not(.new-crate-card-widget--disabled),
html[data-cobalt-theme] .case-item-card:active {
  background: var(--cst-bg-surface-3) !important;
}

html[data-cobalt-theme] .new-crate-card-widget__title,
html[data-cobalt-theme] .new-crate-card-widget__price-value {
  color: var(--cst-text-primary) !important;
}

html[data-cobalt-theme] .new-crate-card-widget__price.ds-system-button,
html[data-cobalt-theme] .new-crate-card-widget__price {
  background: color-mix(in srgb, var(--cst-bg-deep) 88%, #000) !important;
  color: var(--cst-text-primary) !important;
}

html[data-cobalt-theme] .new-crate-card-widget__price.ds-system-button:hover,
html[data-cobalt-theme] .new-crate-card-widget__price:hover {
  background: var(--cst-bg-surface-2) !important;
}

html[data-cobalt-theme] img[src*="crates-default"] {
  filter: grayscale(1) brightness(1.55) contrast(0.78);
  opacity: 0.16;
}

html[data-cobalt-theme] .daily-bonus-streak-item--image,
html[data-cobalt-theme] .daily-cards-case-item--card-front::after,
html[data-cobalt-theme] .daily-cards-case-item--card-back::after {
  filter: hue-rotate(var(--cst-asset-hue-shift, 0deg)) saturate(0.72);
}

html[data-cobalt-theme] img[src*="glow-DRqG17kB"] {
  filter: hue-rotate(var(--cst-glow-hue-shift, 0deg)) saturate(0.72);
}

html[data-cobalt-theme] .case-item-card,
html[data-cobalt-theme] .cl-modal--inner,
html[data-cobalt-theme] .modal-shell-shared__surface {
  background-color: var(--cst-bg-surface-1) !important;
}

html[data-cobalt-theme] .design-static-pages {
  color: var(--cst-text-primary) !important;
}

html[data-cobalt-theme] .design-static-pages__section li {
  border-color: var(--cst-border-soft) !important;
}

html[data-cobalt-theme] .design-static-pages__section a {
  color: var(--cst-focus) !important;
}

html[data-cobalt-theme] .design-static-pages__badge {
  background: color-mix(in srgb, var(--cst-success) 20%, transparent) !important;
  color: var(--cst-success) !important;
}

/*
 * Floating theme picker. Kept outside #app so Vue route changes cannot remove
 * it and the designer can compare every static screen with the same control.
 */
.cobalt-theme-picker {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 10050;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  font-family: var(--ds-font-family-ui, "Inter Display", Inter, sans-serif);
  color: var(--cst-text-primary);
}

.cobalt-theme-picker__toggle {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cst-focus) 28%, var(--cst-border-soft));
  border-radius: 10px;
  background: var(--cst-bg-deep);
  box-shadow: 0 12px 34px rgb(0 0 0 / 38%);
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.cobalt-theme-picker__toggle::before {
  width: 22px;
  height: 22px;
  border: 2px solid rgb(255 255 255 / 72%);
  border-radius: 6px;
  background: var(--cst-switcher-gradient);
  box-shadow: inset 0 0 0 3px rgb(0 0 0 / 15%);
  content: "";
}

.cobalt-theme-picker__toggle:hover {
  border-color: var(--cst-focus);
  background: var(--cst-bg-surface-1);
}

.cobalt-theme-picker__toggle:active {
  transform: translateY(1px);
}

.cobalt-theme-picker__toggle:focus-visible,
.cobalt-theme-picker__option:focus-visible {
  outline: 2px solid var(--cst-focus);
  outline-offset: 2px;
}

.cobalt-theme-picker__panel {
  width: min(356px, calc(100vw - 84px));
  max-height: min(76vh, 520px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--cst-border-soft);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgb(var(--cst-action-rgb) / 8%), transparent 42%),
    color-mix(in srgb, var(--cst-bg-deep) 94%, transparent);
  box-shadow: 0 18px 48px rgb(0 0 0 / 46%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform-origin: left bottom;
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.cobalt-theme-picker:not(.is-open) .cobalt-theme-picker__panel {
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  pointer-events: none;
}

.cobalt-theme-picker__eyebrow {
  margin: 0 0 9px;
  color: var(--cst-text-tertiary);
  font-family: var(--ds-font-family-action, "Druk Wide Cyr", sans-serif);
  font-size: 9px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.cobalt-theme-picker__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.cobalt-theme-picker__option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--cst-bg-surface-1);
  color: var(--cst-text-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  text-align: left;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.cobalt-theme-picker__option:hover {
  border-color: var(--cst-border);
  background: var(--cst-bg-surface-2);
  color: var(--cst-text-primary);
}

.cobalt-theme-picker__option[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--cst-focus) 65%, var(--cst-border-soft));
  background: color-mix(in srgb, var(--cst-action) 14%, var(--cst-bg-surface-1));
  color: var(--cst-text-primary);
}

.cobalt-theme-picker__swatch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 22px;
  height: 22px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 6px;
}

.cobalt-theme-picker__swatch > span {
  display: block;
}

@media (max-width: 799px) {
  .cobalt-theme-picker {
    left: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .cobalt-theme-picker__toggle {
    width: 40px;
    height: 40px;
  }

  .cobalt-theme-picker__panel {
    width: min(292px, calc(100vw - 62px));
  }

  .cobalt-theme-picker__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cobalt-theme-picker *,
  .cobalt-theme-picker *::before {
    transition: none !important;
  }
}

/* ============================================================================
   HONK goose rebrand — 4 calm theme additions (2026-07-21)
   Appended to cobalt-themes.css so the theme-switcher hue-transform guard
   (skips '/assets/css/cobalt-themes.css') leaves these literal token hexes
   intact, exactly like the built-in themes. All 32 --cst-* tokens defined.
   Contrast calibrated to the arena/blackout/iron/float/source2 family:
   deep soft-dark surfaces, off-white (not pure #fff) text, restrained action.
   ---------------------------------------------------------------------------- */

/* --- Gander — warm graphite base, muted goose-orange action ---------------- */
html[data-cobalt-theme="gander"] {
  --cst-bg-deep: #0e0e0c;
  --cst-bg-page: #151512;
  --cst-bg-surface-1: #1d1d19;
  --cst-bg-surface-2: #272621;
  --cst-bg-surface-3: #33322b;
  --cst-bg-raised: #413f37;
  --cst-border: #57544a;
  --cst-border-soft: #2a2924;

  --cst-text-primary: #f2efe9;
  --cst-text-secondary: #b2a99e;
  --cst-text-tertiary: #837a6f;
  --cst-text-on-action: #f7f1ea;

  --cst-action: #a85c28;
  --cst-action-hover: #ba672d;
  --cst-action-pressed: #8a4b20;
  --cst-focus: #e39a5e;
  --cst-accent: #cf7a34;
  --cst-accent-strong: #e59a57;

  --cst-success: #7ba46f;
  --cst-win: #5ea592;
  --cst-warning: #d3a44e;
  --cst-reward: #c07a5a;
  --cst-danger: #cf5b4b;
  --cst-orange: #d9772e;
  --cst-purple: #9585a8;

  --cst-action-rgb: 168 92 40;
  --cst-focus-rgb: 227 154 94;
  --cst-accent-rgb: 207 122 52;
  --cst-danger-rgb: 207 91 75;
  --cst-bg-deep-rgb: 14 14 12;

  --cst-promo-gradient: linear-gradient(111.56deg, #3a2a1c 0%, #a85c28 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #ba672d 0%, #413f37 100%);
}
html[data-cobalt-theme="gander"] { --cst-asset-hue-shift: 24deg; }
html[data-cobalt-theme="gander"] { --cst-glow-hue-shift: 14deg; }

/* --- Millpond — calm cool blue-grey slate, warm accent as quiet contrast --- */
html[data-cobalt-theme="millpond"] {
  --cst-bg-deep: #0b0e11;
  --cst-bg-page: #10151a;
  --cst-bg-surface-1: #171d23;
  --cst-bg-surface-2: #21282f;
  --cst-bg-surface-3: #2c343d;
  --cst-bg-raised: #39434e;
  --cst-border: #4f5b68;
  --cst-border-soft: #232a31;

  --cst-text-primary: #eef1f4;
  --cst-text-secondary: #a6afb9;
  --cst-text-tertiary: #737e8a;
  --cst-text-on-action: #eef4f8;

  --cst-action: #3f6b8e;
  --cst-action-hover: #497aa0;
  --cst-action-pressed: #345877;
  --cst-focus: #7fb2d6;
  --cst-accent: #c98a3e;
  --cst-accent-strong: #e0a45c;

  --cst-success: #6faa79;
  --cst-win: #52a7a0;
  --cst-warning: #d0a552;
  --cst-reward: #bd7267;
  --cst-danger: #d55c4f;
  --cst-orange: #d9772e;
  --cst-purple: #8f83b3;

  --cst-action-rgb: 63 107 142;
  --cst-focus-rgb: 127 178 214;
  --cst-accent-rgb: 201 138 62;
  --cst-danger-rgb: 213 92 79;
  --cst-bg-deep-rgb: 11 14 17;

  --cst-promo-gradient: linear-gradient(111.56deg, #223642 0%, #3f6b8e 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #497aa0 0%, #2c343d 100%);
}
html[data-cobalt-theme="millpond"] { --cst-asset-hue-shift: -158deg; }
html[data-cobalt-theme="millpond"] { --cst-glow-hue-shift: -160deg; }

/* --- Reedbed — muted sage / desaturated teal-green, golden-reed accent ----- */
html[data-cobalt-theme="reedbed"] {
  --cst-bg-deep: #0b0f0d;
  --cst-bg-page: #101512;
  --cst-bg-surface-1: #171d19;
  --cst-bg-surface-2: #212823;
  --cst-bg-surface-3: #2c342d;
  --cst-bg-raised: #39433b;
  --cst-border: #4f5a52;
  --cst-border-soft: #222a24;

  --cst-text-primary: #eef2ee;
  --cst-text-secondary: #a8b1a9;
  --cst-text-tertiary: #74807a;
  --cst-text-on-action: #eef4ef;

  --cst-action: #4a7d5f;
  --cst-action-hover: #548c6a;
  --cst-action-pressed: #3d684f;
  --cst-focus: #8fbf9e;
  --cst-accent: #cf9a4a;
  --cst-accent-strong: #e2b263;

  --cst-success: #6faa79;
  --cst-win: #4fa891;
  --cst-warning: #cfa64f;
  --cst-reward: #bb7d61;
  --cst-danger: #cd5f4f;
  --cst-orange: #d9772e;
  --cst-purple: #8f88a6;

  --cst-action-rgb: 74 125 95;
  --cst-focus-rgb: 143 191 158;
  --cst-accent-rgb: 207 154 74;
  --cst-danger-rgb: 205 95 79;
  --cst-bg-deep-rgb: 11 15 13;

  --cst-promo-gradient: linear-gradient(111.56deg, #23342a 0%, #4a7d5f 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #548c6a 0%, #2c342d 100%);
}
html[data-cobalt-theme="reedbed"] { --cst-asset-hue-shift: 120deg; }
html[data-cobalt-theme="reedbed"] { --cst-glow-hue-shift: 128deg; }

/* --- Dune — warm sandbank taupe base, amber goose accent ------------------- */
html[data-cobalt-theme="dune"] {
  --cst-bg-deep: #100e0b;
  --cst-bg-page: #17140f;
  --cst-bg-surface-1: #1f1b15;
  --cst-bg-surface-2: #29241d;
  --cst-bg-surface-3: #352f26;
  --cst-bg-raised: #433c30;
  --cst-border: #5c5344;
  --cst-border-soft: #2b261f;

  --cst-text-primary: #f3efe7;
  --cst-text-secondary: #b7ab99;
  --cst-text-tertiary: #877c69;
  --cst-text-on-action: #f8f2e9;

  --cst-action: #a86a34;
  --cst-action-hover: #ba763a;
  --cst-action-pressed: #8a561f;
  --cst-focus: #e0ab6f;
  --cst-accent: #d9772e;
  --cst-accent-strong: #ecac6a;

  --cst-success: #86a86e;
  --cst-win: #62a58a;
  --cst-warning: #d6ab52;
  --cst-reward: #c58561;
  --cst-danger: #cf6047;
  --cst-orange: #d9772e;
  --cst-purple: #a08aa0;

  --cst-action-rgb: 168 106 52;
  --cst-focus-rgb: 224 171 111;
  --cst-accent-rgb: 217 119 46;
  --cst-danger-rgb: 207 96 71;
  --cst-bg-deep-rgb: 16 14 11;

  --cst-promo-gradient: linear-gradient(111.56deg, #3a2c1a 0%, #a86a34 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #ba763a 0%, #433c30 100%);
}
html[data-cobalt-theme="dune"] { --cst-asset-hue-shift: 18deg; }
html[data-cobalt-theme="dune"] { --cst-glow-hue-shift: 10deg; }

/* --- Asiimov — sci-fi white / black / signature safety-orange (AWP Asiimov) - */
html[data-cobalt-theme="asiimov"] {
  --cst-bg-deep: #060606;
  --cst-bg-page: #0b0b0c;
  --cst-bg-surface-1: #121213;
  --cst-bg-surface-2: #1b1b1d;
  --cst-bg-surface-3: #252528;
  --cst-bg-raised: #303034;
  --cst-border: #45454b;
  --cst-border-soft: #1e1e21;

  --cst-text-primary: #f5f4f1;
  --cst-text-secondary: #a6a5a2;
  --cst-text-tertiary: #6f6e6c;
  --cst-text-on-action: #ffffff;

  --cst-action: #e8641e;
  --cst-action-hover: #f26f26;
  --cst-action-pressed: #c4511a;
  --cst-focus: #ff9d5c;
  --cst-accent: #b9b7b2;
  --cst-accent-strong: #e4e2dd;

  --cst-success: #7aa46f;
  --cst-win: #5aa590;
  --cst-warning: #e0a94b;
  --cst-reward: #c96f4a;
  --cst-danger: #d6483c;
  --cst-orange: #e8641e;
  --cst-purple: #9585ac;

  --cst-action-rgb: 232 100 30;
  --cst-focus-rgb: 255 157 92;
  --cst-accent-rgb: 185 183 178;
  --cst-danger-rgb: 214 72 60;
  --cst-bg-deep-rgb: 6 6 6;

  --cst-promo-gradient: linear-gradient(111.56deg, #1c1c1e 0%, #e8641e 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #e8641e 0%, #2b2b2f 100%);
}
html[data-cobalt-theme="asiimov"] { --cst-asset-hue-shift: 4deg; }
html[data-cobalt-theme="asiimov"] { --cst-glow-hue-shift: 0deg; }

/* --- Fire Serpent — crimson flame + serpent gold on gunmetal (M4A4) -------- */
html[data-cobalt-theme="fireserpent"] {
  --cst-bg-deep: #08090a;
  --cst-bg-page: #0e1011;
  --cst-bg-surface-1: #151719;
  --cst-bg-surface-2: #1f2123;
  --cst-bg-surface-3: #2a2d2f;
  --cst-bg-raised: #363a3c;
  --cst-border: #4b5052;
  --cst-border-soft: #23282a;

  --cst-text-primary: #f1efe9;
  --cst-text-secondary: #aab0ab;
  --cst-text-tertiary: #757c78;
  --cst-text-on-action: #f7ece6;

  --cst-action: #b23430;
  --cst-action-hover: #c23a34;
  --cst-action-pressed: #8f2925;
  --cst-focus: #e88a6a;
  --cst-accent: #c9a24b;
  --cst-accent-strong: #e0bd6a;

  --cst-success: #7ba46f;
  --cst-win: #58a48d;
  --cst-warning: #d5a54c;
  --cst-reward: #c07a52;
  --cst-danger: #d24f43;
  --cst-orange: #d9772e;
  --cst-purple: #96829f;

  --cst-action-rgb: 178 52 48;
  --cst-focus-rgb: 232 138 106;
  --cst-accent-rgb: 201 162 75;
  --cst-danger-rgb: 210 79 67;
  --cst-bg-deep-rgb: 8 9 10;

  --cst-promo-gradient: linear-gradient(111.56deg, #23282a 0%, #b23430 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #b23430 0%, #2a2d2f 100%);
}
html[data-cobalt-theme="fireserpent"] { --cst-asset-hue-shift: -6deg; }
html[data-cobalt-theme="fireserpent"] { --cst-glow-hue-shift: -2deg; }

/* --- Hyper Beast — muted teal fang + rose beast, orange pop (AK Hyper Beast) */
html[data-cobalt-theme="hyperbeast"] {
  --cst-bg-deep: #06090a;
  --cst-bg-page: #0b1012;
  --cst-bg-surface-1: #121719;
  --cst-bg-surface-2: #1b2224;
  --cst-bg-surface-3: #252d30;
  --cst-bg-raised: #31393c;
  --cst-border: #465054;
  --cst-border-soft: #222a2c;

  --cst-text-primary: #eef4f3;
  --cst-text-secondary: #a4b2b1;
  --cst-text-tertiary: #6f7d7d;
  --cst-text-on-action: #f2fbfa;

  --cst-action: #238a8b;
  --cst-action-hover: #2a9a9b;
  --cst-action-pressed: #1c7173;
  --cst-focus: #6fd0cf;
  --cst-accent: #c76a92;
  --cst-accent-strong: #dd87a9;

  --cst-success: #6faa79;
  --cst-win: #4fa896;
  --cst-warning: #dca94e;
  --cst-reward: #cc6f8c;
  --cst-danger: #db5a54;
  --cst-orange: #e07636;
  --cst-purple: #a077b5;

  --cst-action-rgb: 35 138 139;
  --cst-focus-rgb: 111 208 207;
  --cst-accent-rgb: 199 106 146;
  --cst-danger-rgb: 219 90 84;
  --cst-bg-deep-rgb: 6 9 10;

  --cst-promo-gradient: linear-gradient(111.56deg, #1f2a2c 0%, #238a8b 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #238a8b 0%, #c76a92 100%);
}
html[data-cobalt-theme="hyperbeast"] { --cst-asset-hue-shift: -150deg; }
html[data-cobalt-theme="hyperbeast"] { --cst-glow-hue-shift: -150deg; }

/* --- Dragon Lore — antique gold dragon + jade weathering (AWP Dragon Lore) - */
html[data-cobalt-theme="dragonlore"] {
  --cst-bg-deep: #0a0a07;
  --cst-bg-page: #10100b;
  --cst-bg-surface-1: #181811;
  --cst-bg-surface-2: #22221a;
  --cst-bg-surface-3: #2d2d22;
  --cst-bg-raised: #3a3a2c;
  --cst-border: #55543f;
  --cst-border-soft: #26261c;

  --cst-text-primary: #f4f1e6;
  --cst-text-secondary: #b3ac95;
  --cst-text-tertiary: #827c65;
  --cst-text-on-action: #14100a;

  --cst-action: #bf9436;
  --cst-action-hover: #cea23d;
  --cst-action-pressed: #9c792b;
  --cst-focus: #e6c675;
  --cst-accent: #5e8f57;
  --cst-accent-strong: #7cae72;

  --cst-success: #74a86a;
  --cst-win: #55a37e;
  --cst-warning: #d8ab4d;
  --cst-reward: #c08a4e;
  --cst-danger: #cf5f42;
  --cst-orange: #d9772e;
  --cst-purple: #9585a0;

  --cst-action-rgb: 191 148 54;
  --cst-focus-rgb: 230 198 117;
  --cst-accent-rgb: 94 143 87;
  --cst-danger-rgb: 207 95 66;
  --cst-bg-deep-rgb: 10 10 7;

  --cst-promo-gradient: linear-gradient(111.56deg, #26261a 0%, #bf9436 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #bf9436 0%, #2d3522 100%);
}
html[data-cobalt-theme="dragonlore"] { --cst-asset-hue-shift: 40deg; }
html[data-cobalt-theme="dragonlore"] { --cst-glow-hue-shift: 34deg; }

/* --- Neon Rider — synthwave magenta + cyan + orange sunset (AK Neon Rider) - */
html[data-cobalt-theme="neonrider"] {
  --cst-bg-deep: #08060c;
  --cst-bg-page: #0d0b14;
  --cst-bg-surface-1: #14111d;
  --cst-bg-surface-2: #1d1929;
  --cst-bg-surface-3: #282236;
  --cst-bg-raised: #342c45;
  --cst-border: #4a4060;
  --cst-border-soft: #241f31;

  --cst-text-primary: #f3eff7;
  --cst-text-secondary: #ada6bd;
  --cst-text-tertiary: #7a7290;
  --cst-text-on-action: #fbeef7;

  --cst-action: #c33b91;
  --cst-action-hover: #d3439d;
  --cst-action-pressed: #9e2f74;
  --cst-focus: #45c6e0;
  --cst-accent: #e07736;
  --cst-accent-strong: #f0954f;

  --cst-success: #6fac82;
  --cst-win: #4fa6a0;
  --cst-warning: #e0aa4e;
  --cst-reward: #d05aa0;
  --cst-danger: #e0505f;
  --cst-orange: #e07736;
  --cst-purple: #9d6bd6;

  --cst-action-rgb: 195 59 145;
  --cst-focus-rgb: 69 198 224;
  --cst-accent-rgb: 224 119 54;
  --cst-danger-rgb: 224 80 95;
  --cst-bg-deep-rgb: 8 6 12;

  --cst-promo-gradient: linear-gradient(111.56deg, #241f31 0%, #c33b91 100%);
  --cst-switcher-gradient: linear-gradient(135deg, #c33b91 0%, #e07736 100%);
}
html[data-cobalt-theme="neonrider"] { --cst-asset-hue-shift: -90deg; }
html[data-cobalt-theme="neonrider"] { --cst-glow-hue-shift: -100deg; }