/* Yaak */
[data-theme='yaak-dark'] {
  --surface: #1d1b2cff;
  --surfaceHighlight: #29273fff;
  --surfaceActive: #9442ff33;
  --backdrop: #171623cc;
  --selection: #ab6bff4d;
  --border: #33314eff;
  --borderSubtle: #302e4aff;
  --borderFocus: #42adff80;
  --text: #cecde0ff;
  --textSubtle: #8481a7ff;
  --textSubtlest: #625e87ff;
  --shadow: #0000004d;
  --primary: #c294ffff;
  --secondary: #8582b0ff;
  --info: #42adffff;
  --success: #01df70ff;
  --notice: #ecce55ff;
  --warning: #ff9538ff;
  --danger: #f76490ff;

  .x-theme-button {
    --surfaceActive: #8324ff33;
    --selection: #9747ff4d;
    --borderFocus: #24a0ff80;
    --shadow: #00000012;
    --primary: #ab6cffff;
    --secondary: #726fa5ff;
    --info: #229fffff;
    --success: #01be5fff;
    --notice: #e6bd1bff;
    --warning: #ff8419ff;
    --danger: #f54378ff;
  }

  .x-theme-dialog {
    --border: #312f4bff;
    --borderSubtle: #2e2c47ff;
    --shadow: #00000012;
  }

  .x-theme-sidebar {
    --surface: #201f32ff;
    --surfaceHighlight: #2b2942ff;
    --backdrop: #1b1a29cc;
    --border: #2d2b45ff;
    --borderSubtle: #2b2941ff;
    --shadow: #00000012;
  }

  .x-theme-responsePane {
    --surface: #201f32ff;
    --surfaceHighlight: #2b2942ff;
    --backdrop: #1b1a29cc;
    --border: #2f2d47ff;
    --borderSubtle: #2c2a42ff;
    --shadow: #00000012;
  }

  .x-theme-appHeader {
    --surface: #191826ff;
    --surfaceHighlight: #232236ff;
    --backdrop: #15141fcc;
    --border: #2a2941ff;
    --borderSubtle: #28263dff;
    --shadow: #00000012;
  }

  .x-theme-toast {
    --shadow: #00000012;
  }

  .x-theme-button--solid--default {
    --text: #cbc9deff;
    --surfaceHighlight: #2b2842ff;
    --border: #1d1b2cff;
  }

  .x-theme-button--border--default {
    --text: #cbc9deff;
    --textSubtle: #8a85b4ff;
    --textSubtlest: #645d9866;
    --surfaceHighlight: #1d1b2c33;
    --borderSubtle: #4f4a78ff;
    --border: #7d77acff;
  }

  .x-theme-button--solid--primary {
    --text: #ffffffff;
    --surface: #6e00feff;
    --surfaceHighlight: #9747ffff;
    --border: #ab6cffff;
  }

  .x-theme-button--border--primary {
    --text: #eee2ffff;
    --textSubtle: #d9bdffff;
    --textSubtlest: #cea8ff66;
    --surfaceHighlight: #ab6bff33;
    --borderSubtle: #ab6bff80;
    --border: #ab6bffb3;
  }

  .x-theme-button--solid--secondary {
    --text: #ffffffff;
    --surface: #4c4a77ff;
    --surfaceHighlight: #625f98ff;
    --border: #726fa5ff;
  }

  .x-theme-button--border--secondary {
    --text: #e3e2edff;
    --textSubtle: #bfbed6ff;
    --textSubtlest: #a9a7c866;
    --surfaceHighlight: #716fa533;
    --borderSubtle: #716fa580;
    --border: #716fa5b3;
  }

  .x-theme-button--solid--info {
    --text: #ffffffff;
    --surface: #0073caff;
    --surfaceHighlight: #0593ffff;
    --border: #229fffff;
  }

  .x-theme-button--border--info {
    --text: #d3ecffff;
    --textSubtle: #9cd4ffff;
    --textSubtlest: #7ac6ff66;
    --surfaceHighlight: #24a0ff33;
    --borderSubtle: #24a0ff80;
    --border: #24a0ffb3;
  }

  .x-theme-button--solid--success {
    --text: #ffffffff;
    --surface: #018543ff;
    --surfaceHighlight: #01ab56ff;
    --border: #01be5fff;
  }

  .x-theme-button--border--success {
    --text: #bfffdfff;
    --textSubtle: #70feb7ff;
    --textSubtlest: #3efe9e66;
    --surfaceHighlight: #01bc5e33;
    --borderSubtle: #01bc5e80;
    --border: #01bc5eb3;
  }

  .x-theme-button--solid--notice {
    --text: #ffffffff;
    --surface: #a28512ff;
    --surfaceHighlight: #d0ab17ff;
    --border: #e6bd1bff;
  }

  .x-theme-button--border--notice {
    --text: #faf2d1ff;
    --textSubtle: #f4e199ff;
    --textSubtlest: #f0d77566;
    --surfaceHighlight: #e6bd1933;
    --borderSubtle: #e6bd1980;
    --border: #e6bd19b3;
  }

  .x-theme-button--solid--warning {
    --text: #ffffffff;
    --surface: #c45b00ff;
    --surfaceHighlight: #fc7600ff;
    --border: #ff8419ff;
  }

  .x-theme-button--border--warning {
    --text: #ffe6d1ff;
    --textSubtle: #ffc897ff;
    --textSubtlest: #ffb67566;
    --surfaceHighlight: #ff851a33;
    --borderSubtle: #ff851a80;
    --border: #ff851ab3;
  }

  .x-theme-button--solid--danger {
    --text: #ffffffff;
    --surface: #d00b46ff;
    --surfaceHighlight: #f42563ff;
    --border: #f54378ff;
  }

  .x-theme-button--border--danger {
    --text: #fdd9e4ff;
    --textSubtle: #fbaac2ff;
    --textSubtlest: #f990af66;
    --surfaceHighlight: #f5427833;
    --borderSubtle: #f5427880;
    --border: #f54278b3;
  }

  .x-theme-banner--surface {
    --text: #cbc9deff;
    --textSubtle: #1d1b2cb3;
    --textSubtlest: #1d1b2cff;
    --surface: #1d1b2c0d;
    --border: #534e7e33;
  }

  .x-theme-banner--border {
    --text: #d1d0e2ff;
    --textSubtle: #33314eb3;
    --textSubtlest: #33314eff;
    --surface: #33314e0d;
    --border: #605c9333;
  }

  .x-theme-banner--surfaceHighlight {
    --text: #cecce0ff;
    --textSubtle: #29273fb3;
    --textSubtlest: #29273fff;
    --surface: #29273f0d;
    --border: #5b558b33;
  }

  .x-theme-banner--text {
    --text: #f5f5f9ff;
    --textSubtle: #cecde0b3;
    --textSubtlest: #cecde0ff;
    --surface: #cecde00d;
    --border: #dedce933;
  }

  .x-theme-banner--textSubtle {
    --text: #e6e6edff;
    --textSubtle: #8481a7b3;
    --textSubtlest: #8481a7ff;
    --surface: #8481a70d;
    --border: #aaa8c233;
  }

  .x-theme-banner--textSubtlest {
    --text: #dfdee8ff;
    --textSubtle: #625e87b3;
    --textSubtlest: #625e87ff;
    --surface: #625e870d;
    --border: #8e8aad33;
  }

  .x-theme-banner--primary {
    --text: #f3eaffff;
    --textSubtle: #c294ffb3;
    --textSubtlest: #c294ffff;
    --surface: #c294ff0d;
    --border: #d4b3ff33;
  }

  .x-theme-banner--secondary {
    --text: #e7e6efff;
    --textSubtle: #8582b0b3;
    --textSubtlest: #8582b0ff;
    --surface: #8582b00d;
    --border: #a9a7c833;
  }

  .x-theme-banner--info {
    --text: #d9efffff;
    --textSubtle: #42adffb3;
    --textSubtlest: #42adffff;
    --surface: #42adff0d;
    --border: #7ac6ff33;
  }

  .x-theme-banner--success {
    --text: #c6ffe2ff;
    --textSubtle: #01df70b3;
    --textSubtlest: #01df70ff;
    --surface: #01df700d;
    --border: #39fe9c33;
  }

  .x-theme-banner--notice {
    --text: #fbf5ddff;
    --textSubtle: #ecce55b3;
    --textSubtlest: #ecce55ff;
    --surface: #ecce550d;
    --border: #f2dd8833;
  }

  .x-theme-banner--warning {
    --text: #ffead7ff;
    --textSubtle: #ff9538b3;
    --textSubtlest: #ff9538ff;
    --surface: #ff95380d;
    --border: #ffb67533;
  }

  .x-theme-banner--danger {
    --text: #fde0e9ff;
    --textSubtle: #f76490b3;
    --textSubtlest: #f76490ff;
    --surface: #f764900d;
    --border: #f990af33;
  }

  .x-theme-toast--surface {
    --text: #cbc9deff;
    --textSubtle: #1d1b2cff;
    --surface: #1d1b2c19;
    --surfaceHighlight: #1d1b2c33;
    --border: #534e7e66;
  }

  .x-theme-toast--border {
    --text: #d1d0e2ff;
    --textSubtle: #33314eff;
    --surface: #33314e19;
    --surfaceHighlight: #33314e33;
    --border: #605c9366;
  }

  .x-theme-toast--surfaceHighlight {
    --text: #cecce0ff;
    --textSubtle: #29273fff;
    --surface: #29273f19;
    --surfaceHighlight: #29273f33;
    --border: #5b558b66;
  }

  .x-theme-toast--text {
    --text: #f5f5f9ff;
    --textSubtle: #cecde0ff;
    --surface: #cecde019;
    --surfaceHighlight: #cecde033;
    --border: #dedce966;
  }

  .x-theme-toast--textSubtle {
    --text: #e6e6edff;
    --textSubtle: #8481a7ff;
    --surface: #8481a719;
    --surfaceHighlight: #8481a733;
    --border: #aaa8c266;
  }

  .x-theme-toast--textSubtlest {
    --text: #dfdee8ff;
    --textSubtle: #625e87ff;
    --surface: #625e8719;
    --surfaceHighlight: #625e8733;
    --border: #8e8aad66;
  }

  .x-theme-toast--primary {
    --text: #f3eaffff;
    --textSubtle: #c294ffff;
    --surface: #c294ff19;
    --surfaceHighlight: #c294ff33;
    --border: #d4b3ff66;
  }

  .x-theme-toast--secondary {
    --text: #e7e6efff;
    --textSubtle: #8582b0ff;
    --surface: #8582b019;
    --surfaceHighlight: #8582b033;
    --border: #a9a7c866;
  }

  .x-theme-toast--info {
    --text: #d9efffff;
    --textSubtle: #42adffff;
    --surface: #42adff19;
    --surfaceHighlight: #42adff33;
    --border: #7ac6ff66;
  }

  .x-theme-toast--success {
    --text: #c6ffe2ff;
    --textSubtle: #01df70ff;
    --surface: #01df7019;
    --surfaceHighlight: #01df7033;
    --border: #39fe9c66;
  }

  .x-theme-toast--notice {
    --text: #fbf5ddff;
    --textSubtle: #ecce55ff;
    --surface: #ecce5519;
    --surfaceHighlight: #ecce5533;
    --border: #f2dd8866;
  }

  .x-theme-toast--warning {
    --text: #ffead7ff;
    --textSubtle: #ff9538ff;
    --surface: #ff953819;
    --surfaceHighlight: #ff953833;
    --border: #ffb67566;
  }

  .x-theme-toast--danger {
    --text: #fde0e9ff;
    --textSubtle: #f76490ff;
    --surface: #f7649019;
    --surfaceHighlight: #f7649033;
    --border: #f990af66;
  }

  .x-theme-templateTag--surface {
    --text: #9792bcff;
    --textSubtle: #655e99ff;
    --textSubtlest: #1d1b2cff;
    --surface: #17162333;
    --border: #171623cc;
    --surfaceHighlight: #1b19294d;
  }

  .x-theme-templateTag--border {
    --text: #a3a1c4ff;
    --textSubtle: #7572a7ff;
    --textSubtlest: #33314eff;
    --surface: #29273f33;
    --border: #29273fcc;
    --surfaceHighlight: #2f2d484d;
  }

  .x-theme-templateTag--surfaceHighlight {
    --text: #9d9ac1ff;
    --textSubtle: #6c67a2ff;
    --textSubtlest: #29273fff;
    --surface: #211f3333;
    --border: #211f33cc;
    --surfaceHighlight: #2523394d;
  }

  .x-theme-templateTag--text {
    --text: #ebebf2ff;
    --textSubtle: #e1e1ecff;
    --textSubtlest: #cecde0ff;
    --surface: #9997be33;
    --border: #9997becc;
    --surfaceHighlight: #b3b1ce4d;
  }

  .x-theme-templateTag--textSubtle {
    --text: #ceccdcff;
    --textSubtle: #b5b3caff;
    --textSubtlest: #8481a7ff;
    --surface: #64608a33;
    --border: #64608acc;
    --surfaceHighlight: #726f9b4d;
  }

  .x-theme-templateTag--textSubtlest {
    --text: #bfbdd1ff;
    --textSubtle: #9f9cbaff;
    --textSubtlest: #625e87ff;
    --surface: #4f4b6c33;
    --border: #4f4b6ccc;
    --surfaceHighlight: #59567b4d;
  }

  .x-theme-templateTag--primary {
    --text: #e7d4ffff;
    --textSubtle: #dbbfffff;
    --textSubtlest: #c294ffff;
    --surface: #9442ff33;
    --border: #9442ffcc;
    --surfaceHighlight: #ab6bff4d;
  }

  .x-theme-templateTag--secondary {
    --text: #cecde0ff;
    --textSubtle: #b6b4d0ff;
    --textSubtlest: #8582b0ff;
    --surface: #625e9733;
    --border: #625e97cc;
    --surfaceHighlight: #716fa54d;
  }

  .x-theme-templateTag--info {
    --text: #b4deffff;
    --textSubtle: #8eceffff;
    --textSubtlest: #42adffff;
    --surface: #0091ff33;
    --border: #0091ffcc;
    --surfaceHighlight: #24a0ff4d;
  }

  .x-theme-templateTag--success {
    --text: #8dfec6ff;
    --textSubtle: #54fea9ff;
    --textSubtlest: #01df70ff;
    --surface: #01b25933;
    --border: #01b259cc;
    --surfaceHighlight: #01cb664d;
  }

  .x-theme-templateTag--notice {
    --text: #f7ebbbff;
    --textSubtle: #f4e299ff;
    --textSubtlest: #ecce55ff;
    --surface: #e6bd1933;
    --border: #e6bd19cc;
    --surfaceHighlight: #e9c63a4d;
  }

  .x-theme-templateTag--warning {
    --text: #ffd5afff;
    --textSubtle: #ffbf88ff;
    --textSubtlest: #ff9538ff;
    --surface: #fa750033;
    --border: #fa7500cc;
    --surfaceHighlight: #ff851a4d;
  }

  .x-theme-templateTag--danger {
    --text: #fcc1d3ff;
    --textSubtle: #faa2bcff;
    --textSubtlest: #f76490ff;
    --surface: #f3205f33;
    --border: #f3205fcc;
    --surfaceHighlight: #f542784d;
  }
}

/* Monokai Pro */
[data-theme='monokai-pro'] {
  --surface: #2c292eff;
  --surfaceHighlight: #39353bff;
  --surfaceActive: #6c53e933;
  --backdrop: #242226cc;
  --selection: #8b77ee4d;
  --border: #433f47ff;
  --borderFocus: #78dde880;
  --text: #fbfbf9ff;
  --textSubtle: #c0bfbfff;
  --textSubtlest: #919191ff;
  --shadow: #0000004d;
  --primary: #aa9cf2ff;
  --secondary: #c0bfbfff;
  --info: #78dde8ff;
  --success: #a8db75ff;
  --notice: #ffd966ff;
  --warning: #fc9a69ff;
  --danger: #ff6188ff;

  .x-theme-appHeader {
    --surface: #231f23ff;
    --surfaceHighlight: #312c31ff;
    --backdrop: #1b181bcc;
    --border: #3d363dff;
    --text: #c0bfbfff;
    --textSubtle: #919191ff;
    --textSubtlest: #716f71ff;
    --shadow: #0000004d;
  }

  .x-theme-button {
    --surfaceActive: #5437e633;
    --selection: #7057ea4d;
    --borderFocus: #59d5e380;
    --shadow: #00000012;
    --primary: #8c78eeff;
    --secondary: #adababff;
    --info: #5ad5e3ff;
    --success: #97d55aff;
    --notice: #ffd042ff;
    --warning: #fb8246ff;
    --danger: #ff3e6eff;
  }

  .x-theme-toast {
    --shadow: #00000012;
  }

  .x-theme-button--solid--default {
    --text: #d5d2d7ff;
    --surfaceHighlight: #3d3940ff;
    --border: #2c292eff;
  }

  .x-theme-button--border--default {
    --text: #d5d2d7ff;
    --textSubtle: #a19aa5ff;
    --textSubtlest: #82788766;
    --surfaceHighlight: #2c292e33;
    --borderSubtle: #68606dff;
    --border: #968f9cff;
  }

  .x-theme-button--solid--primary {
    --text: #ffffffff;
    --surface: #3c1cdfff;
    --surfaceHighlight: #7058eaff;
    --border: #8c78eeff;
  }

  .x-theme-button--border--primary {
    --text: #e8e4fcff;
    --textSubtle: #cbc2f7ff;
    --textSubtlest: #b9adf566;
    --surfaceHighlight: #8b77ee33;
    --borderSubtle: #8b77ee80;
    --border: #8b77eeb3;
  }

  .x-theme-button--solid--secondary {
    --text: #ffffffff;
    --surface: #7a7777ff;
    --surfaceHighlight: #9c9a9aff;
    --border: #adababff;
  }

  .x-theme-button--border--secondary {
    --text: #efeeeeff;
    --textSubtle: #dad9d9ff;
    --textSubtlest: #cfcece66;
    --surfaceHighlight: #acaaaa33;
    --borderSubtle: #acaaaa80;
    --border: #acaaaab3;
  }

  .x-theme-button--solid--info {
    --text: #ffffffff;
    --surface: #20aebeff;
    --surfaceHighlight: #3fcedeff;
    --border: #5ad5e3ff;
  }

  .x-theme-button--border--info {
    --text: #def7f9ff;
    --textSubtle: #b5ecf2ff;
    --textSubtlest: #9be6ee66;
    --surfaceHighlight: #59d5e333;
    --borderSubtle: #59d5e380;
    --border: #59d5e3b3;
  }

  .x-theme-button--solid--success {
    --text: #ffffffff;
    --surface: #6aa92bff;
    --surfaceHighlight: #88ce42ff;
    --border: #97d55aff;
  }

  .x-theme-button--border--success {
    --text: #eaf7deff;
    --textSubtle: #d0ecb5ff;
    --textSubtlest: #c2e79d66;
    --surfaceHighlight: #96d45933;
    --borderSubtle: #96d45980;
    --border: #96d459b3;
  }

  .x-theme-button--solid--notice {
    --text: #ffffffff;
    --surface: #e1a900ff;
    --surfaceHighlight: #ffc822ff;
    --border: #ffd042ff;
  }

  .x-theme-button--border--notice {
    --text: #fff6d9ff;
    --textSubtle: #ffeaaaff;
    --textSubtlest: #ffe38f66;
    --surfaceHighlight: #ffd04233;
    --borderSubtle: #ffd04280;
    --border: #ffd042b3;
  }

  .x-theme-button--solid--warning {
    --text: #ffffffff;
    --surface: #dc4c04ff;
    --surfaceHighlight: #fb6d27ff;
    --border: #fb8246ff;
  }

  .x-theme-button--border--warning {
    --text: #fee6daff;
    --textSubtle: #fdc7acff;
    --textSubtlest: #fdb59166;
    --surfaceHighlight: #fb824633;
    --borderSubtle: #fb824680;
    --border: #fb8246b3;
  }

  .x-theme-button--solid--danger {
    --text: #ffffffff;
    --surface: #de0037ff;
    --surfaceHighlight: #ff1e56ff;
    --border: #ff3e6eff;
  }

  .x-theme-button--border--danger {
    --text: #ffd8e2ff;
    --textSubtle: #ffa8beff;
    --textSubtlest: #ff8aa766;
    --surfaceHighlight: #ff3d6e33;
    --borderSubtle: #ff3d6e80;
    --border: #ff3d6eb3;
  }

  .x-theme-banner--surface {
    --text: #d5d2d7ff;
    --textSubtle: #2c292eb3;
    --textSubtlest: #2c292eff;
    --surface: #2c292e0d;
    --border: #6d657233;
  }

  .x-theme-banner--text {
    --text: #fefefeff;
    --textSubtle: #fbfbf9b3;
    --textSubtlest: #fbfbf9ff;
    --surface: #fbfbf90d;
    --border: #fdfdfc33;
  }

  .x-theme-banner--textSubtle {
    --text: #f2f2f2ff;
    --textSubtle: #c0bfbfb3;
    --textSubtlest: #c0bfbfff;
    --surface: #c0bfbf0d;
    --border: #d4d3d333;
  }

  .x-theme-banner--textSubtlest {
    --text: #e9e9e9ff;
    --textSubtle: #919191b3;
    --textSubtlest: #919191ff;
    --surface: #9191910d;
    --border: #b3b3b333;
  }

  .x-theme-banner--primary {
    --text: #eeebfcff;
    --textSubtle: #aa9cf2b3;
    --textSubtlest: #aa9cf2ff;
    --surface: #aa9cf20d;
    --border: #c6bbf633;
  }

  .x-theme-banner--secondary {
    --text: #f2f2f2ff;
    --textSubtle: #c0bfbfb3;
    --textSubtlest: #c0bfbfff;
    --surface: #c0bfbf0d;
    --border: #d4d3d333;
  }

  .x-theme-banner--info {
    --text: #e4f8faff;
    --textSubtle: #78dde8b3;
    --textSubtlest: #78dde8ff;
    --surface: #78dde80d;
    --border: #9fe7ef33;
  }

  .x-theme-banner--success {
    --text: #eef8e3ff;
    --textSubtle: #a8db75b3;
    --textSubtlest: #a8db75ff;
    --surface: #a8db750d;
    --border: #c2e69e33;
  }

  .x-theme-banner--notice {
    --text: #fff7e0ff;
    --textSubtle: #ffd966b3;
    --textSubtlest: #ffd966ff;
    --surface: #ffd9660d;
    --border: #ffe49433;
  }

  .x-theme-banner--warning {
    --text: #feebe1ff;
    --textSubtle: #fc9a69b3;
    --textSubtlest: #fc9a69ff;
    --surface: #fc9a690d;
    --border: #fdb89633;
  }

  .x-theme-banner--danger {
    --text: #ffdfe7ff;
    --textSubtle: #ff6188b3;
    --textSubtlest: #ff6188ff;
    --surface: #ff61880d;
    --border: #ff8fab33;
  }

  .x-theme-toast--surface {
    --text: #d5d2d7ff;
    --textSubtle: #2c292eff;
    --surface: #2c292e19;
    --surfaceHighlight: #2c292e33;
    --border: #6d657266;
  }

  .x-theme-toast--text {
    --text: #fefefeff;
    --textSubtle: #fbfbf9ff;
    --surface: #fbfbf919;
    --surfaceHighlight: #fbfbf933;
    --border: #fdfdfc66;
  }

  .x-theme-toast--textSubtle {
    --text: #f2f2f2ff;
    --textSubtle: #c0bfbfff;
    --surface: #c0bfbf19;
    --surfaceHighlight: #c0bfbf33;
    --border: #d4d3d366;
  }

  .x-theme-toast--textSubtlest {
    --text: #e9e9e9ff;
    --textSubtle: #919191ff;
    --surface: #91919119;
    --surfaceHighlight: #91919133;
    --border: #b3b3b366;
  }

  .x-theme-toast--primary {
    --text: #eeebfcff;
    --textSubtle: #aa9cf2ff;
    --surface: #aa9cf219;
    --surfaceHighlight: #aa9cf233;
    --border: #c6bbf666;
  }

  .x-theme-toast--secondary {
    --text: #f2f2f2ff;
    --textSubtle: #c0bfbfff;
    --surface: #c0bfbf19;
    --surfaceHighlight: #c0bfbf33;
    --border: #d4d3d366;
  }

  .x-theme-toast--info {
    --text: #e4f8faff;
    --textSubtle: #78dde8ff;
    --surface: #78dde819;
    --surfaceHighlight: #78dde833;
    --border: #9fe7ef66;
  }

  .x-theme-toast--success {
    --text: #eef8e3ff;
    --textSubtle: #a8db75ff;
    --surface: #a8db7519;
    --surfaceHighlight: #a8db7533;
    --border: #c2e69e66;
  }

  .x-theme-toast--notice {
    --text: #fff7e0ff;
    --textSubtle: #ffd966ff;
    --surface: #ffd96619;
    --surfaceHighlight: #ffd96633;
    --border: #ffe49466;
  }

  .x-theme-toast--warning {
    --text: #feebe1ff;
    --textSubtle: #fc9a69ff;
    --surface: #fc9a6919;
    --surfaceHighlight: #fc9a6933;
    --border: #fdb89666;
  }

  .x-theme-toast--danger {
    --text: #ffdfe7ff;
    --textSubtle: #ff6188ff;
    --surface: #ff618819;
    --surfaceHighlight: #ff618833;
    --border: #ff8fab66;
  }

  .x-theme-templateTag--surface {
    --text: #aba5afff;
    --textSubtle: #827888ff;
    --textSubtlest: #2c292eff;
    --surface: #24222633;
    --border: #242226cc;
    --surfaceHighlight: #2624284d;
  }

  .x-theme-templateTag--text {
    --text: #fdfdfdff;
    --textSubtle: #fdfdfbff;
    --textSubtlest: #fbfbf9ff;
    --surface: #d2d2bc33;
    --border: #d2d2bccc;
    --surfaceHighlight: #e7e7da4d;
  }

  .x-theme-templateTag--textSubtle {
    --text: #e6e5e5ff;
    --textSubtle: #d9d8d8ff;
    --textSubtlest: #c0bfbfff;
    --surface: #9a989833;
    --border: #9a9898cc;
    --surfaceHighlight: #acaaaa4d;
  }

  .x-theme-templateTag--textSubtlest {
    --text: #d3d3d3ff;
    --textSubtle: #bdbdbdff;
    --textSubtlest: #919191ff;
    --surface: #73737333;
    --border: #737373cc;
    --surfaceHighlight: #8282824d;
  }

  .x-theme-templateTag--primary {
    --text: #ddd7faff;
    --textSubtle: #ccc3f7ff;
    --textSubtlest: #aa9cf2ff;
    --surface: #6c53e933;
    --border: #6c53e9cc;
    --surfaceHighlight: #8b77ee4d;
  }

  .x-theme-templateTag--secondary {
    --text: #e6e5e5ff;
    --textSubtle: #d9d8d8ff;
    --textSubtlest: #c0bfbfff;
    --surface: #9a989833;
    --border: #9a9898cc;
    --surfaceHighlight: #acaaaa4d;
  }

  .x-theme-templateTag--info {
    --text: #c9f1f6ff;
    --textSubtle: #aeebf1ff;
    --textSubtlest: #78dde8ff;
    --surface: #3bcdde33;
    --border: #3bcddecc;
    --surfaceHighlight: #59d5e34d;
  }

  .x-theme-templateTag--success {
    --text: #dcf1c8ff;
    --textSubtle: #cbeaacff;
    --textSubtlest: #a8db75ff;
    --surface: #87ce4033;
    --border: #87ce40cc;
    --surfaceHighlight: #96d4594d;
  }

  .x-theme-templateTag--notice {
    --text: #fff0c2ff;
    --textSubtle: #ffe8a3ff;
    --textSubtlest: #ffd966ff;
    --surface: #ffc71f33;
    --border: #ffc71fcc;
    --surfaceHighlight: #ffd0424d;
  }

  .x-theme-templateTag--warning {
    --text: #fed7c3ff;
    --textSubtle: #fdc2a5ff;
    --textSubtlest: #fc9a69ff;
    --surface: #fb6b2333;
    --border: #fb6b23cc;
    --surfaceHighlight: #fb82464d;
  }

  .x-theme-templateTag--danger {
    --text: #ffc0d0ff;
    --textSubtle: #ffa0b8ff;
    --textSubtlest: #ff6188ff;
    --surface: #ff1a5333;
    --border: #ff1a53cc;
    --surfaceHighlight: #ff3d6e4d;
  }
}

/* Rosé Pine */
[data-theme='rose-pine'] {
  --surface: #1a1825ff;
  --surfaceHighlight: #262335ff;
  --surfaceActive: #9967d533;
  --backdrop: #16141fcc;
  --selection: #ae87de4d;
  --border: #2f2c43ff;
  --borderFocus: #67abcb80;
  --text: #deddf4ff;
  --textSubtle: #918daaff;
  --textSubtlest: #6e6986ff;
  --shadow: #0000004d;
  --primary: #c4a7e7ff;
  --secondary: #6e6986ff;
  --info: #67abcbff;
  --success: #9dd8d8ff;
  --notice: #f6c279ff;
  --warning: #f1a3a2ff;
  --danger: #eb6f93ff;

  .x-theme-responsePane {
    --surface: #201d2fff;
    --surfaceHighlight: #2b2740ff;
    --backdrop: #1a1726cc;
    --border: #342f4dff;
    --shadow: #00000012;
  }

  .x-theme-sidebar {
    --surface: #201d2fff;
    --surfaceHighlight: #2b2740ff;
    --backdrop: #1a1726cc;
    --border: #342f4dff;
    --shadow: #00000012;
  }

  .x-theme-menu {
    --surface: #383450ff;
    --surfaceHighlight: #423d5eff;
    --backdrop: #2d2a41cc;
    --border: #59527eff;
    --borderSubtle: #4c466cff;
    --textSubtle: #a19eb7ff;
    --textSubtlest: #837e9aff;
    --shadow: #00000012;
  }

  .x-theme-toast {
    --surface: #383450ff;
    --surfaceHighlight: #423d5eff;
    --backdrop: #2d2a41cc;
    --border: #59527eff;
    --borderSubtle: #4c466cff;
    --textSubtle: #a19eb7ff;
    --textSubtlest: #837e9aff;
    --shadow: #00000012;
  }

  .x-theme-button--solid--default {
    --text: #ccc9dcff;
    --surfaceHighlight: #29263bff;
    --border: #1a1825ff;
  }

  .x-theme-button--border--default {
    --text: #ccc9dcff;
    --textSubtle: #8b85afff;
    --textSubtlest: #665f9166;
    --surfaceHighlight: #1a182533;
    --borderSubtle: #504a71ff;
    --border: #7e77a6ff;
  }

  .x-theme-button--solid--surface {
    --text: #ffffffff;
    --surface: #12111aff;
    --surfaceHighlight: #171621ff;
    --border: #1a1825ff;
  }

  .x-theme-button--border--surface {
    --text: #ccc9dcff;
    --textSubtle: #8b85afff;
    --textSubtlest: #665f9166;
    --surfaceHighlight: #1a182533;
    --borderSubtle: #1a182580;
    --border: #1a1825b3;
  }

  .x-theme-button--solid--text {
    --text: #ffffffff;
    --surface: #7873d2ff;
    --surfaceHighlight: #bcb9e8ff;
    --border: #deddf4ff;
  }

  .x-theme-button--border--text {
    --text: #f8f8fdff;
    --textSubtle: #f0effaff;
    --textSubtlest: #edecf966;
    --surfaceHighlight: #dedcf433;
    --borderSubtle: #dedcf480;
    --border: #dedcf4b3;
  }

  .x-theme-button--solid--textSubtle {
    --text: #ffffffff;
    --surface: #615d7dff;
    --surfaceHighlight: #7f7b9dff;
    --border: #918daaff;
  }

  .x-theme-button--border--textSubtle {
    --text: #e9e8eeff;
    --textSubtle: #cdccd9ff;
    --textSubtlest: #bcb9cb66;
    --surfaceHighlight: #918daa33;
    --borderSubtle: #918daa80;
    --border: #918daab3;
  }

  .x-theme-button--solid--textSubtlest {
    --text: #ffffffff;
    --surface: #4d4a5eff;
    --surfaceHighlight: #635f79ff;
    --border: #6e6986ff;
  }

  .x-theme-button--border--textSubtlest {
    --text: #e2e1e7ff;
    --textSubtle: #bdbbc9ff;
    --textSubtlest: #a7a4b766;
    --surfaceHighlight: #6e698633;
    --borderSubtle: #6e698680;
    --border: #6e6986b3;
  }

  .x-theme-button--solid--primary {
    --text: #ffffffff;
    --surface: #8549cdff;
    --surfaceHighlight: #af88deff;
    --border: #c4a7e7ff;
  }

  .x-theme-button--border--primary {
    --text: #f3edfaff;
    --textSubtle: #e4d7f4ff;
    --textSubtlest: #dbcbf166;
    --surfaceHighlight: #c4a7e733;
    --borderSubtle: #c4a7e780;
    --border: #c4a7e7b3;
  }

  .x-theme-button--solid--secondary {
    --text: #ffffffff;
    --surface: #4d4a5eff;
    --surfaceHighlight: #635f79ff;
    --border: #6e6986ff;
  }

  .x-theme-button--border--secondary {
    --text: #e2e1e7ff;
    --textSubtle: #bdbbc9ff;
    --textSubtlest: #a7a4b766;
    --surfaceHighlight: #6e698633;
    --borderSubtle: #6e698680;
    --border: #6e6986b3;
  }

  .x-theme-button--solid--info {
    --text: #ffffffff;
    --surface: #377ea0ff;
    --surfaceHighlight: #509fc3ff;
    --border: #67abcbff;
  }

  .x-theme-button--border--info {
    --text: #e1eef5ff;
    --textSubtle: #bbd9e8ff;
    --textSubtlest: #a4cde066;
    --surfaceHighlight: #67abcb33;
    --borderSubtle: #67abcb80;
    --border: #67abcbb3;
  }

  .x-theme-button--solid--success {
    --text: #ffffffff;
    --surface: #4db8b8ff;
    --surfaceHighlight: #82cdcdff;
    --border: #9dd8d8ff;
  }

  .x-theme-button--border--success {
    --text: #ebf7f7ff;
    --textSubtle: #d3ededff;
    --textSubtlest: #c5e7e766;
    --surfaceHighlight: #9dd8d833;
    --borderSubtle: #9dd8d880;
    --border: #9dd8d8b3;
  }

  .x-theme-button--solid--notice {
    --text: #ffffffff;
    --surface: #ef9312ff;
    --surfaceHighlight: #f3b257ff;
    --border: #f6c279ff;
  }

  .x-theme-button--border--notice {
    --text: #fdf3e4ff;
    --textSubtle: #fbe4c3ff;
    --textSubtlest: #f9daae66;
    --surfaceHighlight: #f6c27933;
    --borderSubtle: #f6c27980;
    --border: #f6c279b3;
  }

  .x-theme-button--solid--warning {
    --text: #ffffffff;
    --surface: #e13b39ff;
    --surfaceHighlight: #ec817fff;
    --border: #f1a3a2ff;
  }

  .x-theme-button--border--warning {
    --text: #fcedecff;
    --textSubtle: #f9d6d5ff;
    --textSubtlest: #f7c6c566;
    --surfaceHighlight: #f1a3a233;
    --borderSubtle: #f1a3a280;
    --border: #f1a3a2b3;
  }

  .x-theme-button--solid--danger {
    --text: #ffffffff;
    --surface: #d61d51ff;
    --surfaceHighlight: #e7517bff;
    --border: #eb6f93ff;
  }

  .x-theme-button--border--danger {
    --text: #fbe2e9ff;
    --textSubtle: #f6beceff;
    --textSubtlest: #f3aabf66;
    --surfaceHighlight: #eb6f9333;
    --borderSubtle: #eb6f9380;
    --border: #eb6f93b3;
  }

  .x-theme-banner--surface {
    --text: #ccc9dcff;
    --textSubtle: #1a1825b3;
    --textSubtlest: #1a1825ff;
    --surface: #1a18250d;
    --border: #534d7533;
  }

  .x-theme-banner--text {
    --text: #f8f8fdff;
    --textSubtle: #dedcf4b3;
    --textSubtlest: #deddf4ff;
    --surface: #dedcf40d;
    --border: #e9e8f733;
  }

  .x-theme-banner--textSubtle {
    --text: #e9e8eeff;
    --textSubtle: #918daab3;
    --textSubtlest: #918daaff;
    --surface: #918daa0d;
    --border: #b3b0c433;
  }

  .x-theme-banner--textSubtlest {
    --text: #e2e1e7ff;
    --textSubtle: #6e6986b3;
    --textSubtlest: #6e6986ff;
    --surface: #6e69860d;
    --border: #9995ac33;
  }

  .x-theme-banner--primary {
    --text: #f3edfaff;
    --textSubtle: #c4a7e7b3;
    --textSubtlest: #c4a7e7ff;
    --surface: #c4a7e70d;
    --border: #d7c3ef33;
  }

  .x-theme-banner--secondary {
    --text: #e2e1e7ff;
    --textSubtle: #6e6986b3;
    --textSubtlest: #6e6986ff;
    --surface: #6e69860d;
    --border: #9995ac33;
  }

  .x-theme-banner--info {
    --text: #e1eef5ff;
    --textSubtle: #67abcbb3;
    --textSubtlest: #67abcbff;
    --surface: #67abcb0d;
    --border: #95c3db33;
  }

  .x-theme-banner--success {
    --text: #ebf7f7ff;
    --textSubtle: #9dd8d8b3;
    --textSubtlest: #9dd8d8ff;
    --surface: #9dd8d80d;
    --border: #b9e4e433;
  }

  .x-theme-banner--notice {
    --text: #fdf3e4ff;
    --textSubtle: #f6c279b3;
    --textSubtlest: #f6c279ff;
    --surface: #f6c2790d;
    --border: #f9d4a433;
  }

  .x-theme-banner--warning {
    --text: #fcedecff;
    --textSubtle: #f1a3a2b3;
    --textSubtlest: #f1a3a2ff;
    --surface: #f1a3a20d;
    --border: #f5bebd33;
  }

  .x-theme-banner--danger {
    --text: #fbe2e9ff;
    --textSubtle: #eb6f93b3;
    --textSubtlest: #eb6f93ff;
    --surface: #eb6f930d;
    --border: #f198b133;
  }

  .x-theme-toast--surface {
    --text: #ccc9dcff;
    --textSubtle: #1a1825ff;
    --surface: #1a182519;
    --surfaceHighlight: #1a182533;
    --border: #534d7566;
  }

  .x-theme-toast--text {
    --text: #f8f8fdff;
    --textSubtle: #deddf4ff;
    --surface: #dedcf419;
    --surfaceHighlight: #dedcf433;
    --border: #e9e8f766;
  }

  .x-theme-toast--textSubtle {
    --text: #e9e8eeff;
    --textSubtle: #918daaff;
    --surface: #918daa19;
    --surfaceHighlight: #918daa33;
    --border: #b3b0c466;
  }

  .x-theme-toast--textSubtlest {
    --text: #e2e1e7ff;
    --textSubtle: #6e6986ff;
    --surface: #6e698619;
    --surfaceHighlight: #6e698633;
    --border: #9995ac66;
  }

  .x-theme-toast--primary {
    --text: #f3edfaff;
    --textSubtle: #c4a7e7ff;
    --surface: #c4a7e719;
    --surfaceHighlight: #c4a7e733;
    --border: #d7c3ef66;
  }

  .x-theme-toast--secondary {
    --text: #e2e1e7ff;
    --textSubtle: #6e6986ff;
    --surface: #6e698619;
    --surfaceHighlight: #6e698633;
    --border: #9995ac66;
  }

  .x-theme-toast--info {
    --text: #e1eef5ff;
    --textSubtle: #67abcbff;
    --surface: #67abcb19;
    --surfaceHighlight: #67abcb33;
    --border: #95c3db66;
  }

  .x-theme-toast--success {
    --text: #ebf7f7ff;
    --textSubtle: #9dd8d8ff;
    --surface: #9dd8d819;
    --surfaceHighlight: #9dd8d833;
    --border: #b9e4e466;
  }

  .x-theme-toast--notice {
    --text: #fdf3e4ff;
    --textSubtle: #f6c279ff;
    --surface: #f6c27919;
    --surfaceHighlight: #f6c27933;
    --border: #f9d4a466;
  }

  .x-theme-toast--warning {
    --text: #fcedecff;
    --textSubtle: #f1a3a2ff;
    --surface: #f1a3a219;
    --surfaceHighlight: #f1a3a233;
    --border: #f5bebd66;
  }

  .x-theme-toast--danger {
    --text: #fbe2e9ff;
    --textSubtle: #eb6f93ff;
    --surface: #eb6f9319;
    --surfaceHighlight: #eb6f9333;
    --border: #f198b166;
  }

  .x-theme-templateTag--surface {
    --text: #9892b8ff;
    --textSubtle: #675f92ff;
    --textSubtlest: #1a1825ff;
    --surface: #16141f33;
    --border: #16141fcc;
    --surfaceHighlight: #1716224d;
  }

  .x-theme-templateTag--text {
    --text: #f2f1fbff;
    --textSubtle: #ebeaf8ff;
    --textSubtlest: #deddf4ff;
    --surface: #9b97dd33;
    --border: #9b97ddcc;
    --surfaceHighlight: #bdbae94d;
  }

  .x-theme-templateTag--textSubtle {
    --text: #d3d1ddff;
    --textSubtle: #bdbaccff;
    --textSubtlest: #918daaff;
    --surface: #6f6a9033;
    --border: #6f6a90cc;
    --surfaceHighlight: #7f7b9d4d;
  }

  .x-theme-templateTag--textSubtlest {
    --text: #c5c2cfff;
    --textSubtle: #a7a4b8ff;
    --textSubtlest: #6e6986ff;
    --surface: #57536a33;
    --border: #57536acc;
    --surfaceHighlight: #625e784d;
  }

  .x-theme-templateTag--primary {
    --text: #e7dcf5ff;
    --textSubtle: #dbcaf1ff;
    --textSubtlest: #c4a7e7ff;
    --surface: #9967d533;
    --border: #9967d5cc;
    --surfaceHighlight: #ae87de4d;
  }

  .x-theme-templateTag--secondary {
    --text: #c5c2cfff;
    --textSubtle: #a7a4b8ff;
    --textSubtlest: #6e6986ff;
    --surface: #57536a33;
    --border: #57536acc;
    --surfaceHighlight: #625e784d;
  }

  .x-theme-templateTag--info {
    --text: #c2deeaff;
    --textSubtle: #a4cde0ff;
    --textSubtlest: #67abcbff;
    --surface: #3e90b633;
    --border: #3e90b6cc;
    --surfaceHighlight: #509fc34d;
  }

  .x-theme-templateTag--success {
    --text: #d8efefff;
    --textSubtle: #c4e7e7ff;
    --textSubtlest: #9dd8d8ff;
    --surface: #66c2c233;
    --border: #66c2c2cc;
    --surfaceHighlight: #83cece4d;
  }

  .x-theme-templateTag--notice {
    --text: #fbe7caff;
    --textSubtle: #f9daafff;
    --textSubtlest: #f6c279ff;
    --surface: #f1a33733;
    --border: #f1a337cc;
    --surfaceHighlight: #f3b3584d;
  }

  .x-theme-templateTag--warning {
    --text: #f9dadaff;
    --textSubtle: #f7c8c7ff;
    --textSubtlest: #f1a3a2ff;
    --surface: #e65d5b33;
    --border: #e65d5bcc;
    --surfaceHighlight: #ec807e4d;
  }

  .x-theme-templateTag--danger {
    --text: #f7c6d4ff;
    --textSubtle: #f3a9beff;
    --textSubtlest: #eb6f93ff;
    --surface: #e3316333;
    --border: #e33163cc;
    --surfaceHighlight: #e7507b4d;
  }
}

/* Catppuccin Macchiato */
[data-theme='catppuccin-macchiato'] {
  --surface: #1d202fff;
  --surfaceHighlight: #272b40ff;
  --surfaceActive: #9c58ee33;
  --backdrop: #171a26cc;
  --selection: #b27df24d;
  --border: #2f344dff;
  --borderFocus: #8aaef480;
  --text: #ccd5f5ff;
  --textSubtle: #a4adcbff;
  --textSubtlest: #8187a2ff;
  --shadow: #0000004d;
  --primary: #c8a2f6ff;
  --secondary: #b8c0e0ff;
  --info: #8aaef4ff;
  --success: #a6da95ff;
  --notice: #eed4a0ff;
  --warning: #f5a87fff;
  --danger: #ed8796ff;

  .x-theme-dialog {
    --surface: #181825ff;
    --surfaceHighlight: #232335ff;
    --backdrop: #14141fcc;
    --border: #2c2c43ff;
    --shadow: #00000012;
  }

  .x-theme-sidebar {
    --surface: #232638ff;
    --surfaceHighlight: #2d3148ff;
    --backdrop: #1b1e2ccc;
    --border: #2b2f45ff;
    --borderSubtle: #292c41ff;
    --shadow: #00000012;
  }

  .x-theme-appHeader {
    --surface: #181926ff;
    --surfaceHighlight: #222336ff;
    --backdrop: #14151fcc;
    --border: #292a41ff;
    --borderSubtle: #26273dff;
    --shadow: #00000012;
  }

  .x-theme-responsePane {
    --surface: #232638ff;
    --surfaceHighlight: #2d3148ff;
    --backdrop: #1b1e2ccc;
    --border: #2b2f45ff;
    --borderSubtle: #292c41ff;
    --shadow: #00000012;
  }

  .x-theme-button {
    --surfaceActive: #8b3cec33;
    --selection: #9e5def4d;
    --borderFocus: #6594f180;
    --shadow: #00000012;
    --primary: #b27df2ff;
    --secondary: #9ca7d3ff;
    --info: #6795f1ff;
    --success: #90d07aff;
    --notice: #e8c57eff;
    --warning: #f3915cff;
    --danger: #e8677aff;
  }

  .x-theme-toast {
    --shadow: #00000012;
  }

  .x-theme-button--solid--default {
    --text: #c9cddeff;
    --surfaceHighlight: #2a2f45ff;
    --border: #1d202fff;
  }

  .x-theme-button--border--default {
    --text: #c9cddeff;
    --textSubtle: #868eb5ff;
    --textSubtlest: #5f699b66;
    --surfaceHighlight: #1d202f33;
    --borderSubtle: #4b537bff;
    --border: #7981adff;
  }

  .x-theme-button--solid--primary {
    --text: #ffffffff;
    --surface: #7619e8ff;
    --surfaceHighlight: #9e5cefff;
    --border: #b27df2ff;
  }

  .x-theme-button--border--primary {
    --text: #f0e5fcff;
    --textSubtle: #dcc5f9ff;
    --textSubtlest: #d0b1f766;
    --surfaceHighlight: #b27df233;
    --borderSubtle: #b27df280;
    --border: #b27df2b3;
  }

  .x-theme-button--solid--secondary {
    --text: #ffffffff;
    --surface: #5064b1ff;
    --surfaceHighlight: #8391c7ff;
    --border: #9ca7d3ff;
  }

  .x-theme-button--border--secondary {
    --text: #ebedf6ff;
    --textSubtle: #d3d8ebff;
    --textSubtlest: #c4c9e466;
    --surfaceHighlight: #9ca7d333;
    --borderSubtle: #9ca7d380;
    --border: #9ca7d3b3;
  }

  .x-theme-button--solid--info {
    --text: #ffffffff;
    --surface: #1457dcff;
    --surfaceHighlight: #487feeff;
    --border: #6795f1ff;
  }

  .x-theme-button--border--info {
    --text: #e1eafcff;
    --textSubtle: #bbcff9ff;
    --textSubtlest: #a6c1f766;
    --surfaceHighlight: #6594f133;
    --borderSubtle: #6594f180;
    --border: #6594f1b3;
  }

  .x-theme-button--solid--success {
    --text: #ffffffff;
    --surface: #58ab3cff;
    --surfaceHighlight: #7bc862ff;
    --border: #90d07aff;
  }

  .x-theme-button--border--success {
    --text: #e9f6e4ff;
    --textSubtle: #cdeac3ff;
    --textSubtlest: #bde3b066;
    --surfaceHighlight: #90d17b33;
    --borderSubtle: #90d17b80;
    --border: #90d17bb3;
  }

  .x-theme-button--solid--notice {
    --text: #ffffffff;
    --surface: #d59b26ff;
    --surfaceHighlight: #e3b75fff;
    --border: #e8c57eff;
  }

  .x-theme-button--border--notice {
    --text: #faf3e5ff;
    --textSubtle: #f5e5c5ff;
    --textSubtlest: #f1dcb166;
    --surfaceHighlight: #e8c47d33;
    --borderSubtle: #e8c47d80;
    --border: #e8c47db3;
  }

  .x-theme-button--solid--warning {
    --text: #ffffffff;
    --surface: #da5710ff;
    --surfaceHighlight: #f07c3dff;
    --border: #f3915cff;
  }

  .x-theme-button--border--warning {
    --text: #fde9deff;
    --textSubtle: #f9cdb6ff;
    --textSubtlest: #f8bb9b66;
    --surfaceHighlight: #f3925e33;
    --borderSubtle: #f3925e80;
    --border: #f3925eb3;
  }

  .x-theme-button--solid--danger {
    --text: #ffffffff;
    --surface: #cc1e39ff;
    --surfaceHighlight: #e44a61ff;
    --border: #e8677aff;
  }

  .x-theme-button--border--danger {
    --text: #fae1e4ff;
    --textSubtle: #f5bbc3ff;
    --textSubtlest: #f1a2ae66;
    --surfaceHighlight: #e8687b33;
    --borderSubtle: #e8687b80;
    --border: #e8687bb3;
  }

  .x-theme-banner--surface {
    --text: #c9cddeff;
    --textSubtle: #1d202fb3;
    --textSubtlest: #1d202fff;
    --surface: #1d202f0d;
    --border: #4e567e33;
  }

  .x-theme-banner--text {
    --text: #f5f7fdff;
    --textSubtle: #ccd5f5b3;
    --textSubtlest: #ccd5f5ff;
    --surface: #ccd5f50d;
    --border: #dde2f833;
  }

  .x-theme-banner--textSubtle {
    --text: #edeff5ff;
    --textSubtle: #a4adcbb3;
    --textSubtlest: #a4adcbff;
    --surface: #a4adcb0d;
    --border: #c1c7dc33;
  }

  .x-theme-banner--textSubtlest {
    --text: #e6e7ecff;
    --textSubtle: #8187a2b3;
    --textSubtlest: #8187a2ff;
    --surface: #8187a20d;
    --border: #a7abbe33;
  }

  .x-theme-banner--primary {
    --text: #f4ecfdff;
    --textSubtle: #c8a2f6b3;
    --textSubtlest: #c8a2f6ff;
    --surface: #c8a2f60d;
    --border: #d7bef933;
  }

  .x-theme-banner--secondary {
    --text: #f1f2f9ff;
    --textSubtle: #b8c0e0b3;
    --textSubtlest: #b8c0e0ff;
    --surface: #b8c0e00d;
    --border: #cdd3e933;
  }

  .x-theme-banner--info {
    --text: #e8effdff;
    --textSubtle: #8aaef4b3;
    --textSubtlest: #8aaef4ff;
    --surface: #8aaef40d;
    --border: #abc5f733;
  }

  .x-theme-banner--success {
    --text: #edf8eaff;
    --textSubtle: #a6da95b3;
    --textSubtlest: #a6da95ff;
    --surface: #a6da950d;
    --border: #c0e4b433;
  }

  .x-theme-banner--notice {
    --text: #fcf6ecff;
    --textSubtle: #eed4a0b3;
    --textSubtlest: #eed4a0ff;
    --surface: #eed4a00d;
    --border: #f4e2be33;
  }

  .x-theme-banner--warning {
    --text: #fdeee5ff;
    --textSubtle: #f5a87fb3;
    --textSubtlest: #f5a87fff;
    --surface: #f5a87f0d;
    --border: #f8c2a533;
  }

  .x-theme-banner--danger {
    --text: #fbe7eaff;
    --textSubtle: #ed8796b3;
    --textSubtlest: #ed8796ff;
    --surface: #ed87960d;
    --border: #f2abb633;
  }

  .x-theme-toast--surface {
    --text: #c9cddeff;
    --textSubtle: #1d202fff;
    --surface: #1d202f19;
    --surfaceHighlight: #1d202f33;
    --border: #4e567e66;
  }

  .x-theme-toast--text {
    --text: #f5f7fdff;
    --textSubtle: #ccd5f5ff;
    --surface: #ccd5f519;
    --surfaceHighlight: #ccd5f533;
    --border: #dde2f866;
  }

  .x-theme-toast--textSubtle {
    --text: #edeff5ff;
    --textSubtle: #a4adcbff;
    --surface: #a4adcb19;
    --surfaceHighlight: #a4adcb33;
    --border: #c1c7dc66;
  }

  .x-theme-toast--textSubtlest {
    --text: #e6e7ecff;
    --textSubtle: #8187a2ff;
    --surface: #8187a219;
    --surfaceHighlight: #8187a233;
    --border: #a7abbe66;
  }

  .x-theme-toast--primary {
    --text: #f4ecfdff;
    --textSubtle: #c8a2f6ff;
    --surface: #c8a2f619;
    --surfaceHighlight: #c8a2f633;
    --border: #d7bef966;
  }

  .x-theme-toast--secondary {
    --text: #f1f2f9ff;
    --textSubtle: #b8c0e0ff;
    --surface: #b8c0e019;
    --surfaceHighlight: #b8c0e033;
    --border: #cdd3e966;
  }

  .x-theme-toast--info {
    --text: #e8effdff;
    --textSubtle: #8aaef4ff;
    --surface: #8aaef419;
    --surfaceHighlight: #8aaef433;
    --border: #abc5f766;
  }

  .x-theme-toast--success {
    --text: #edf8eaff;
    --textSubtle: #a6da95ff;
    --surface: #a6da9519;
    --surfaceHighlight: #a6da9533;
    --border: #c0e4b466;
  }

  .x-theme-toast--notice {
    --text: #fcf6ecff;
    --textSubtle: #eed4a0ff;
    --surface: #eed4a019;
    --surfaceHighlight: #eed4a033;
    --border: #f4e2be66;
  }

  .x-theme-toast--warning {
    --text: #fdeee5ff;
    --textSubtle: #f5a87fff;
    --surface: #f5a87f19;
    --surfaceHighlight: #f5a87f33;
    --border: #f8c2a566;
  }

  .x-theme-toast--danger {
    --text: #fbe7eaff;
    --textSubtle: #ed8796ff;
    --surface: #ed879619;
    --surfaceHighlight: #ed879633;
    --border: #f2abb666;
  }

  .x-theme-templateTag--surface {
    --text: #939abdff;
    --textSubtle: #5f699bff;
    --textSubtlest: #1d202fff;
    --surface: #171a2633;
    --border: #171a26cc;
    --surfaceHighlight: #1b1e2d4d;
  }

  .x-theme-templateTag--text {
    --text: #ebeefbff;
    --textSubtle: #e0e6f9ff;
    --textSubtlest: #ccd5f5ff;
    --surface: #7f95e633;
    --border: #7f95e6cc;
    --surfaceHighlight: #a6b7ed4d;
  }

  .x-theme-templateTag--textSubtle {
    --text: #dbdeeaff;
    --textSubtle: #c9cee0ff;
    --textSubtlest: #a4adcbff;
    --surface: #7784b133;
    --border: #7784b1cc;
    --surfaceHighlight: #8e99be4d;
  }

  .x-theme-templateTag--textSubtlest {
    --text: #cdcfdaff;
    --textSubtle: #b3b7c7ff;
    --textSubtlest: #8187a2ff;
    --surface: #646a8733;
    --border: #646a87cc;
    --surfaceHighlight: #6f76954d;
  }

  .x-theme-templateTag--primary {
    --text: #e9dafbff;
    --textSubtle: #dec7f9ff;
    --textSubtlest: #c8a2f6ff;
    --surface: #9c58ee33;
    --border: #9c58eecc;
    --surfaceHighlight: #b27df24d;
  }

  .x-theme-templateTag--secondary {
    --text: #e3e6f3ff;
    --textSubtle: #d4d9ecff;
    --textSubtlest: #b8c0e0ff;
    --surface: #7f8ec733;
    --border: #7f8ec7cc;
    --surfaceHighlight: #9ca7d34d;
  }

  .x-theme-templateTag--info {
    --text: #d0defbff;
    --textSubtle: #b9cef8ff;
    --textSubtlest: #8aaef4ff;
    --surface: #447dee33;
    --border: #447deecc;
    --surfaceHighlight: #6594f14d;
  }

  .x-theme-templateTag--success {
    --text: #dcf0d5ff;
    --textSubtle: #cae9c0ff;
    --textSubtlest: #a6da95ff;
    --surface: #7ac76033;
    --border: #7ac760cc;
    --surfaceHighlight: #90d17b4d;
  }

  .x-theme-templateTag--notice {
    --text: #f8eed9ff;
    --textSubtle: #f5e5c6ff;
    --textSubtlest: #eed4a0ff;
    --surface: #e2b55a33;
    --border: #e2b55acc;
    --surfaceHighlight: #e8c47d4d;
  }

  .x-theme-templateTag--warning {
    --text: #fbdcccff;
    --textSubtle: #f9cbb2ff;
    --textSubtlest: #f5a87fff;
    --surface: #f0783833;
    --border: #f07838cc;
    --surfaceHighlight: #f3925e4d;
  }

  .x-theme-templateTag--danger {
    --text: #f8cfd5ff;
    --textSubtle: #f4b7c0ff;
    --textSubtlest: #ed8796ff;
    --surface: #e3455c33;
    --border: #e3455ccc;
    --surfaceHighlight: #e8687b4d;
  }
}

/* GitHub */
[data-theme='github-light'] {
  --surface: #ffffffff;
  --surfaceHighlight: #ebf0f4ff;
  --surfaceActive: #9971e533;
  --backdrop: #ffffffcc;
  --selection: #8d60e24d;
  --border: #e8ebeeff;
  --borderSubtle: #e8ebeeff;
  --borderFocus: #0a73eb80;
  --text: #1f2328ff;
  --textSubtle: #646d78ff;
  --textSubtlest: #838e95ff;
  --shadow: #00000012;
  --primary: #814edfff;
  --secondary: #6e7781ff;
  --info: #0a73ebff;
  --success: #1c873aff;
  --notice: #cc8800ff;
  --warning: #e05a00ff;
  --danger: #d1232fff;

  .x-theme-toast {
    --shadow: #00000012;
  }

  .x-theme-button--solid--default {
    --text: #333333ff;
    --surfaceHighlight: #ebebebff;
    --border: #ffffffff;
  }

  .x-theme-button--border--default {
    --text: #333333ff;
    --textSubtle: #737373ff;
    --textSubtlest: #99999966;
    --surfaceHighlight: #ffffff33;
    --borderSubtle: #b8b8b8ff;
    --border: #808080ff;
  }

  .x-theme-button--solid--surface {
    --text: #ffffffff;
    --surface: #ffffffff;
    --surfaceHighlight: #ffffffff;
    --border: #ffffffff;
  }

  .x-theme-button--border--surface {
    --text: #333333ff;
    --textSubtle: #737373ff;
    --textSubtlest: #99999966;
    --surfaceHighlight: #ffffff33;
    --borderSubtle: #ffffff80;
    --border: #ffffffb3;
  }

  .x-theme-button--solid--surfaceHighlight {
    --text: #ffffffff;
    --surface: #f1f5f7ff;
    --surfaceHighlight: #edf2f5ff;
    --border: #ebf0f4ff;
  }

  .x-theme-button--border--surfaceHighlight {
    --text: #22313eff;
    --textSubtle: #4d6f8bff;
    --textSubtlest: #6e92af66;
    --surfaceHighlight: #ebf0f433;
    --borderSubtle: #ebf0f480;
    --border: #ebf0f4b3;
  }

  .x-theme-button--solid--border {
    --text: #ffffffff;
    --surface: #eff1f3ff;
    --surfaceHighlight: #eaedefff;
    --border: #e8ebeeff;
  }

  .x-theme-button--border--border {
    --text: #282f36ff;
    --textSubtle: #5a6a79ff;
    --textSubtlest: #7b8c9d66;
    --surfaceHighlight: #e8ebee33;
    --borderSubtle: #e8ebee80;
    --border: #e8ebeeb3;
  }

  .x-theme-button--solid--borderSubtle {
    --text: #ffffffff;
    --surface: #eff1f3ff;
    --surfaceHighlight: #eaedefff;
    --border: #e8ebeeff;
  }

  .x-theme-button--border--borderSubtle {
    --text: #282f36ff;
    --textSubtle: #5a6a79ff;
    --textSubtlest: #7b8c9d66;
    --surfaceHighlight: #e8ebee33;
    --borderSubtle: #e8ebee80;
    --border: #e8ebeeb3;
  }

  .x-theme-button--solid--text {
    --text: #ffffffff;
    --surface: #586473ff;
    --surfaceHighlight: #323941ff;
    --border: #1f2328ff;
  }

  .x-theme-button--border--text {
    --text: #060708ff;
    --textSubtle: #0e1012ff;
    --textSubtlest: #12141766;
    --surfaceHighlight: #1f232833;
    --borderSubtle: #1f232880;
    --border: #1f2328b3;
  }

  .x-theme-button--solid--textSubtle {
    --text: #ffffffff;
    --surface: #9098a2ff;
    --surfaceHighlight: #717b87ff;
    --border: #646d78ff;
  }

  .x-theme-button--border--textSubtle {
    --text: #141618ff;
    --textSubtle: #2d3136ff;
    --textSubtlest: #3c414866;
    --surfaceHighlight: #646d7833;
    --borderSubtle: #646d7880;
    --border: #646d78b3;
  }

  .x-theme-button--solid--textSubtlest {
    --text: #ffffffff;
    --surface: #a8b0b5ff;
    --surfaceHighlight: #8f9aa0ff;
    --border: #838e95ff;
  }

  .x-theme-button--border--textSubtlest {
    --text: #1a1d1eff;
    --textSubtle: #3a4044ff;
    --textSubtlest: #4d565b66;
    --surfaceHighlight: #838e9533;
    --borderSubtle: #838e9580;
    --border: #838e95b3;
  }

  .x-theme-button--solid--primary {
    --text: #ffffffff;
    --surface: #a783e8ff;
    --surfaceHighlight: #8d60e2ff;
    --border: #814edfff;
  }

  .x-theme-button--border--primary {
    --text: #180933ff;
    --textSubtle: #361572ff;
    --textSubtlest: #471c9766;
    --surfaceHighlight: #814edf33;
    --borderSubtle: #814edf80;
    --border: #814edfb3;
  }

  .x-theme-button--solid--secondary {
    --text: #ffffffff;
    --surface: #99a0a8ff;
    --surfaceHighlight: #7c858fff;
    --border: #6e7781ff;
  }

  .x-theme-button--border--secondary {
    --text: #16181aff;
    --textSubtle: #32363aff;
    --textSubtlest: #42474d66;
    --surfaceHighlight: #6e778133;
    --borderSubtle: #6e778180;
    --border: #6e7781b3;
  }

  .x-theme-button--solid--info {
    --text: #ffffffff;
    --surface: #4d9cf8ff;
    --surfaceHighlight: #1a80f5ff;
    --border: #0a73ebff;
  }

  .x-theme-button--border--info {
    --text: #02172fff;
    --textSubtle: #04346aff;
    --textSubtlest: #06458e66;
    --surfaceHighlight: #0a73eb33;
    --borderSubtle: #0a73eb80;
    --border: #0a73ebb3;
  }

  .x-theme-button--solid--success {
    --text: #ffffffff;
    --surface: #36d663ff;
    --surfaceHighlight: #22a447ff;
    --border: #1c873aff;
  }

  .x-theme-button--border--success {
    --text: #061b0cff;
    --textSubtle: #0c3d1aff;
    --textSubtlest: #11502366;
    --surfaceHighlight: #1c873a33;
    --borderSubtle: #1c873a80;
    --border: #1c873ab3;
  }

  .x-theme-button--solid--notice {
    --text: #ffffffff;
    --surface: #ffb829ff;
    --surfaceHighlight: #eb9c00ff;
    --border: #cc8800ff;
  }

  .x-theme-button--border--notice {
    --text: #291b00ff;
    --textSubtle: #5c3d00ff;
    --textSubtlest: #7a520066;
    --surfaceHighlight: #cc880033;
    --borderSubtle: #cc880080;
    --border: #cc8800b3;
  }

  .x-theme-button--solid--warning {
    --text: #ffffffff;
    --surface: #ff8737ff;
    --surfaceHighlight: #fd6500ff;
    --border: #e05a00ff;
  }

  .x-theme-button--border--warning {
    --text: #2d1200ff;
    --textSubtle: #652800ff;
    --textSubtlest: #85350066;
    --surfaceHighlight: #e05a0033;
    --borderSubtle: #e05a0080;
    --border: #e05a00b3;
  }

  .x-theme-button--solid--danger {
    --text: #ffffffff;
    --surface: #e46069ff;
    --surfaceHighlight: #dc333eff;
    --border: #d1232fff;
  }

  .x-theme-button--border--danger {
    --text: #2a0709ff;
    --textSubtle: #5e1015ff;
    --textSubtlest: #7e151c66;
    --surfaceHighlight: #d1232f33;
    --borderSubtle: #d1232f80;
    --border: #d1232fb3;
  }

  .x-theme-banner--surface {
    --text: #333333ff;
    --textSubtle: #ffffffb3;
    --textSubtlest: #ffffffff;
    --surface: #ffffff0d;
    --border: #b3b3b333;
  }

  .x-theme-banner--surfaceHighlight {
    --text: #22313eff;
    --textSubtle: #ebf0f4b3;
    --textSubtlest: #ebf0f4ff;
    --surface: #ebf0f40d;
    --border: #8fabc133;
  }

  .x-theme-banner--border {
    --text: #282f36ff;
    --textSubtle: #e8ebeeb3;
    --textSubtlest: #e8ebeeff;
    --surface: #e8ebee0d;
    --border: #98a5b333;
  }

  .x-theme-banner--borderSubtle {
    --text: #282f36ff;
    --textSubtle: #e8ebeeb3;
    --textSubtlest: #e8ebeeff;
    --surface: #e8ebee0d;
    --border: #98a5b333;
  }

  .x-theme-banner--text {
    --text: #060708ff;
    --textSubtle: #1f2328b3;
    --textSubtlest: #1f2328ff;
    --surface: #1f23280d;
    --border: #16191d33;
  }

  .x-theme-banner--textSubtle {
    --text: #141618ff;
    --textSubtle: #646d78b3;
    --textSubtlest: #646d78ff;
    --surface: #646d780d;
    --border: #464c5333;
  }

  .x-theme-banner--textSubtlest {
    --text: #1a1d1eff;
    --textSubtle: #838e95b3;
    --textSubtlest: #838e95ff;
    --surface: #838e950d;
    --border: #59636933;
  }

  .x-theme-banner--primary {
    --text: #180933ff;
    --textSubtle: #814edfb3;
    --textSubtlest: #814edfff;
    --surface: #814edf0d;
    --border: #5320b133;
  }

  .x-theme-banner--secondary {
    --text: #16181aff;
    --textSubtle: #6e7781b3;
    --textSubtlest: #6e7781ff;
    --surface: #6e77810d;
    --border: #4d535b33;
  }

  .x-theme-banner--info {
    --text: #02172fff;
    --textSubtle: #0a73ebb3;
    --textSubtlest: #0a73ebff;
    --surface: #0a73eb0d;
    --border: #0751a633;
  }

  .x-theme-banner--success {
    --text: #061b0cff;
    --textSubtle: #1c873ab3;
    --textSubtlest: #1c873aff;
    --surface: #1c873a0d;
    --border: #135e2833;
  }

  .x-theme-banner--notice {
    --text: #291b00ff;
    --textSubtle: #cc8800b3;
    --textSubtlest: #cc8800ff;
    --surface: #cc88000d;
    --border: #8f5f0033;
  }

  .x-theme-banner--warning {
    --text: #2d1200ff;
    --textSubtle: #e05a00b3;
    --textSubtlest: #e05a00ff;
    --surface: #e05a000d;
    --border: #9e3f0033;
  }

  .x-theme-banner--danger {
    --text: #2a0709ff;
    --textSubtle: #d1232fb3;
    --textSubtlest: #d1232fff;
    --surface: #d1232f0d;
    --border: #94192133;
  }

  .x-theme-toast--surface {
    --text: #333333ff;
    --textSubtle: #ffffffff;
    --surface: #ffffff19;
    --surfaceHighlight: #ffffff33;
    --border: #b3b3b366;
  }

  .x-theme-toast--surfaceHighlight {
    --text: #22313eff;
    --textSubtle: #ebf0f4ff;
    --surface: #ebf0f419;
    --surfaceHighlight: #ebf0f433;
    --border: #8fabc166;
  }

  .x-theme-toast--border {
    --text: #282f36ff;
    --textSubtle: #e8ebeeff;
    --surface: #e8ebee19;
    --surfaceHighlight: #e8ebee33;
    --border: #98a5b366;
  }

  .x-theme-toast--borderSubtle {
    --text: #282f36ff;
    --textSubtle: #e8ebeeff;
    --surface: #e8ebee19;
    --surfaceHighlight: #e8ebee33;
    --border: #98a5b366;
  }

  .x-theme-toast--text {
    --text: #060708ff;
    --textSubtle: #1f2328ff;
    --surface: #1f232819;
    --surfaceHighlight: #1f232833;
    --border: #16191d66;
  }

  .x-theme-toast--textSubtle {
    --text: #141618ff;
    --textSubtle: #646d78ff;
    --surface: #646d7819;
    --surfaceHighlight: #646d7833;
    --border: #464c5366;
  }

  .x-theme-toast--textSubtlest {
    --text: #1a1d1eff;
    --textSubtle: #838e95ff;
    --surface: #838e9519;
    --surfaceHighlight: #838e9533;
    --border: #59636966;
  }

  .x-theme-toast--primary {
    --text: #180933ff;
    --textSubtle: #814edfff;
    --surface: #814edf19;
    --surfaceHighlight: #814edf33;
    --border: #5320b166;
  }

  .x-theme-toast--secondary {
    --text: #16181aff;
    --textSubtle: #6e7781ff;
    --surface: #6e778119;
    --surfaceHighlight: #6e778133;
    --border: #4d535b66;
  }

  .x-theme-toast--info {
    --text: #02172fff;
    --textSubtle: #0a73ebff;
    --surface: #0a73eb19;
    --surfaceHighlight: #0a73eb33;
    --border: #0751a666;
  }

  .x-theme-toast--success {
    --text: #061b0cff;
    --textSubtle: #1c873aff;
    --surface: #1c873a19;
    --surfaceHighlight: #1c873a33;
    --border: #135e2866;
  }

  .x-theme-toast--notice {
    --text: #291b00ff;
    --textSubtle: #cc8800ff;
    --surface: #cc880019;
    --surfaceHighlight: #cc880033;
    --border: #8f5f0066;
  }

  .x-theme-toast--warning {
    --text: #2d1200ff;
    --textSubtle: #e05a00ff;
    --surface: #e05a0019;
    --surfaceHighlight: #e05a0033;
    --border: #9e3f0066;
  }

  .x-theme-toast--danger {
    --text: #2a0709ff;
    --textSubtle: #d1232fff;
    --surface: #d1232f19;
    --surfaceHighlight: #d1232f33;
    --border: #94192166;
  }

  .x-theme-templateTag--surface {
    --text: #666666ff;
    --textSubtle: #999999ff;
    --textSubtlest: #ffffffff;
    --surface: #ffffff33;
    --border: #ffffffcc;
    --surfaceHighlight: #ffffff4d;
  }

  .x-theme-templateTag--surfaceHighlight {
    --text: #44637cff;
    --textSubtle: #7093b0ff;
    --textSubtlest: #ebf0f4ff;
    --surface: #eff3f633;
    --border: #eff3f6cc;
    --surfaceHighlight: #eff3f64d;
  }

  .x-theme-templateTag--border {
    --text: #505e6cff;
    --textSubtle: #7c8d9eff;
    --textSubtlest: #e8ebeeff;
    --surface: #edf0f233;
    --border: #edf0f2cc;
    --surfaceHighlight: #ebeef04d;
  }

  .x-theme-templateTag--borderSubtle {
    --text: #505e6cff;
    --textSubtle: #7c8d9eff;
    --textSubtlest: #e8ebeeff;
    --surface: #edf0f233;
    --border: #edf0f2cc;
    --surfaceHighlight: #ebeef04d;
  }

  .x-theme-templateTag--text {
    --text: #0c0e10ff;
    --textSubtle: #131518ff;
    --textSubtlest: #1f2328ff;
    --surface: #454f5933;
    --border: #454f59cc;
    --surfaceHighlight: #333a424d;
  }

  .x-theme-templateTag--textSubtle {
    --text: #282b30ff;
    --textSubtle: #3c4148ff;
    --textSubtlest: #646d78ff;
    --surface: #7f899433;
    --border: #7f8994cc;
    --surfaceHighlight: #727c884d;
  }

  .x-theme-templateTag--textSubtlest {
    --text: #34393dff;
    --textSubtle: #4d565bff;
    --textSubtlest: #838e95ff;
    --surface: #9ca5ab33;
    --border: #9ca5abcc;
    --surfaceHighlight: #8e999f4d;
  }

  .x-theme-templateTag--primary {
    --text: #301366ff;
    --textSubtle: #481c99ff;
    --textSubtlest: #814edfff;
    --surface: #9971e533;
    --border: #9971e5cc;
    --surfaceHighlight: #8d60e24d;
  }

  .x-theme-templateTag--secondary {
    --text: #2c3034ff;
    --textSubtle: #42484eff;
    --textSubtlest: #6e7781ff;
    --surface: #8b939c33;
    --border: #8b939ccc;
    --surfaceHighlight: #7b848e4d;
  }

  .x-theme-templateTag--info {
    --text: #042e5eff;
    --textSubtle: #06458dff;
    --textSubtlest: #0a73ebff;
    --surface: #318df633;
    --border: #318df6cc;
    --surfaceHighlight: #1980f54d;
  }

  .x-theme-templateTag--success {
    --text: #0b3617ff;
    --textSubtle: #115123ff;
    --textSubtlest: #1c873aff;
    --surface: #28c35433;
    --border: #28c354cc;
    --surfaceHighlight: #22a5474d;
  }

  .x-theme-templateTag--notice {
    --text: #523600ff;
    --textSubtle: #7a5200ff;
    --textSubtlest: #cc8800ff;
    --surface: #ffad0a33;
    --border: #ffad0acc;
    --surfaceHighlight: #eb9c004d;
  }

  .x-theme-templateTag--warning {
    --text: #5a2400ff;
    --textSubtle: #873600ff;
    --textSubtlest: #e05a00ff;
    --surface: #ff751a33;
    --border: #ff751acc;
    --surfaceHighlight: #ff66004d;
  }

  .x-theme-templateTag--danger {
    --text: #540e13ff;
    --textSubtle: #7e151cff;
    --textSubtlest: #d1232fff;
    --surface: #e0485233;
    --border: #e04852cc;
    --surfaceHighlight: #dc323d4d;
  }
}

/* Gruvbox */
[data-theme='gruvbox'] {
  --surface: #292929ff;
  --surfaceHighlight: #32302fff;
  --surfaceActive: #c1537033;
  --backdrop: #212121cc;
  --selection: #ca6d844d;
  --border: #404040ff;
  --borderFocus: #8ec07c80;
  --text: #f9f5d7ff;
  --textSubtle: #bdaf93ff;
  --textSubtlest: #918273ff;
  --shadow: #0000004d;
  --primary: #d4879cff;
  --secondary: #83a598ff;
  --info: #8ec07cff;
  --success: #b8ba26ff;
  --notice: #fabd2eff;
  --warning: #fe811bff;
  --danger: #fb4632ff;

  .x-theme-toast {
    --shadow: #00000012;
  }

  .x-theme-button--solid--default {
    --text: #d4d4d4ff;
    --surfaceHighlight: #3a3a3aff;
    --border: #292929ff;
  }

  .x-theme-button--border--default {
    --text: #d4d4d4ff;
    --textSubtle: #9f9f9fff;
    --textSubtlest: #7d7d7d66;
    --surfaceHighlight: #29292933;
    --borderSubtle: #656565ff;
    --border: #949494ff;
  }

  .x-theme-button--solid--surface {
    --text: #ffffffff;
    --surface: #1d1d1dff;
    --surfaceHighlight: #252525ff;
    --border: #292929ff;
  }

  .x-theme-button--border--surface {
    --text: #d4d4d4ff;
    --textSubtle: #9f9f9fff;
    --textSubtlest: #7d7d7d66;
    --surfaceHighlight: #29292933;
    --borderSubtle: #29292980;
    --border: #292929b3;
  }

  .x-theme-button--solid--surfaceHighlight {
    --text: #ffffffff;
    --surface: #232221ff;
    --surfaceHighlight: #2d2b2aff;
    --border: #32302fff;
  }

  .x-theme-button--border--surfaceHighlight {
    --text: #d7d5d4ff;
    --textSubtle: #a5a19fff;
    --textSubtlest: #86817e66;
    --surfaceHighlight: #32302f33;
    --borderSubtle: #32302f80;
    --border: #32302fb3;
  }

  .x-theme-button--solid--text {
    --text: #ffffffff;
    --surface: #e7d75eff;
    --surfaceHighlight: #f3ebafff;
    --border: #f9f5d7ff;
  }

  .x-theme-button--border--text {
    --text: #fefdf7ff;
    --textSubtle: #fcfbedff;
    --textSubtlest: #fbf9e966;
    --surfaceHighlight: #f9f5d733;
    --borderSubtle: #f9f5d780;
    --border: #f9f5d7b3;
  }

  .x-theme-button--solid--textSubtle {
    --text: #ffffffff;
    --surface: #927f5aff;
    --surfaceHighlight: #b0a07fff;
    --border: #bdaf93ff;
  }

  .x-theme-button--border--textSubtle {
    --text: #f2efe9ff;
    --textSubtle: #e1dbcfff;
    --textSubtlest: #d6cebd66;
    --surfaceHighlight: #bdaf9333;
    --borderSubtle: #bdaf9380;
    --border: #bdaf93b3;
  }

  .x-theme-button--solid--textSubtlest {
    --text: #ffffffff;
    --surface: #665b50ff;
    --surfaceHighlight: #837567ff;
    --border: #918273ff;
  }

  .x-theme-button--border--textSubtlest {
    --text: #e9e6e3ff;
    --textSubtle: #cec7c0ff;
    --textSubtlest: #beb5ac66;
    --surfaceHighlight: #91827333;
    --borderSubtle: #91827380;
    --border: #918273b3;
  }

  .x-theme-button--solid--primary {
    --text: #ffffffff;
    --surface: #b2405fff;
    --surfaceHighlight: #cb6e86ff;
    --border: #d4879cff;
  }

  .x-theme-button--border--primary {
    --text: #f6e7ebff;
    --textSubtle: #ecc9d2ff;
    --textSubtlest: #e5b8c466;
    --surfaceHighlight: #d4879c33;
    --borderSubtle: #d4879c80;
    --border: #d4879cb3;
  }

  .x-theme-button--solid--secondary {
    --text: #ffffffff;
    --surface: #57786bff;
    --surfaceHighlight: #72998aff;
    --border: #83a598ff;
  }

  .x-theme-button--border--secondary {
    --text: #e6edeaff;
    --textSubtle: #c7d7d1ff;
    --textSubtlest: #b5c9c266;
    --surfaceHighlight: #83a59833;
    --borderSubtle: #83a59880;
    --border: #83a598b3;
  }

  .x-theme-button--solid--info {
    --text: #ffffffff;
    --surface: #5d9548ff;
    --surfaceHighlight: #7cb667ff;
    --border: #8ec07cff;
  }

  .x-theme-button--border--info {
    --text: #e8f2e5ff;
    --textSubtle: #cce3c4ff;
    --textSubtlest: #bad8b066;
    --surfaceHighlight: #8ec07c33;
    --borderSubtle: #8ec07c80;
    --border: #8ec07cb3;
  }

  .x-theme-button--solid--success {
    --text: #ffffffff;
    --surface: #81821bff;
    --surfaceHighlight: #a5a822ff;
    --border: #b8ba26ff;
  }

  .x-theme-button--border--success {
    --text: #f5f5d0ff;
    --textSubtle: #e8e994ff;
    --textSubtlest: #e0e26f66;
    --surfaceHighlight: #b8ba2633;
    --borderSubtle: #b8ba2680;
    --border: #b8ba26b3;
  }

  .x-theme-button--solid--notice {
    --text: #ffffffff;
    --surface: #ca8f05ff;
    --surfaceHighlight: #f9b311ff;
    --border: #fabd2eff;
  }

  .x-theme-button--border--notice {
    --text: #fef2d5ff;
    --textSubtle: #fde1a1ff;
    --textSubtlest: #fcd78366;
    --surfaceHighlight: #fabd2e33;
    --borderSubtle: #fabd2e80;
    --border: #fabd2eb3;
  }

  .x-theme-button--solid--warning {
    --text: #ffffffff;
    --surface: #c35801ff;
    --surfaceHighlight: #fb7201ff;
    --border: #fe811bff;
  }

  .x-theme-button--border--warning {
    --text: #ffe6d1ff;
    --textSubtle: #fec698ff;
    --textSubtlest: #feb37666;
    --surfaceHighlight: #fe811b33;
    --borderSubtle: #fe811b80;
    --border: #fe811bb3;
  }

  .x-theme-button--solid--danger {
    --text: #ffffffff;
    --surface: #ce1804ff;
    --surfaceHighlight: #fa2c15ff;
    --border: #fb4632ff;
  }

  .x-theme-button--border--danger {
    --text: #fedad6ff;
    --textSubtle: #fdaca3ff;
    --textSubtlest: #fc8f8366;
    --surfaceHighlight: #fb463233;
    --borderSubtle: #fb463280;
    --border: #fb4632b3;
  }

  .x-theme-banner--surface {
    --text: #d4d4d4ff;
    --textSubtle: #292929b3;
    --textSubtlest: #292929ff;
    --surface: #2929290d;
    --border: #69696933;
  }

  .x-theme-banner--surfaceHighlight {
    --text: #d7d5d4ff;
    --textSubtle: #32302fb3;
    --textSubtlest: #32302fff;
    --surface: #32302f0d;
    --border: #716c6a33;
  }

  .x-theme-banner--text {
    --text: #fefdf7ff;
    --textSubtle: #f9f5d7b3;
    --textSubtlest: #f9f5d7ff;
    --surface: #f9f5d70d;
    --border: #fbf8e433;
  }

  .x-theme-banner--textSubtle {
    --text: #f2efe9ff;
    --textSubtle: #bdaf93b3;
    --textSubtlest: #bdaf93ff;
    --surface: #bdaf930d;
    --border: #d0c6b333;
  }

  .x-theme-banner--textSubtlest {
    --text: #e9e6e3ff;
    --textSubtle: #918273b3;
    --textSubtlest: #918273ff;
    --surface: #9182730d;
    --border: #b3a99e33;
  }

  .x-theme-banner--primary {
    --text: #f6e7ebff;
    --textSubtle: #d4879cb3;
    --textSubtlest: #d4879cff;
    --surface: #d4879c0d;
    --border: #e1adbb33;
  }

  .x-theme-banner--secondary {
    --text: #e6edeaff;
    --textSubtle: #83a598b3;
    --textSubtlest: #83a598ff;
    --surface: #83a5980d;
    --border: #a9c1b833;
  }

  .x-theme-banner--info {
    --text: #e8f2e5ff;
    --textSubtle: #8ec07cb3;
    --textSubtlest: #8ec07cff;
    --surface: #8ec07c0d;
    --border: #afd2a233;
  }

  .x-theme-banner--success {
    --text: #f5f5d0ff;
    --textSubtle: #b8ba26b3;
    --textSubtlest: #b8ba26ff;
    --surface: #b8ba260d;
    --border: #dbdd5a33;
  }

  .x-theme-banner--notice {
    --text: #fef2d5ff;
    --textSubtle: #fabd2eb3;
    --textSubtlest: #fabd2eff;
    --surface: #fabd2e0d;
    --border: #fbd16f33;
  }

  .x-theme-banner--warning {
    --text: #ffe6d1ff;
    --textSubtle: #fe811bb3;
    --textSubtlest: #fe811bff;
    --surface: #fe811b0d;
    --border: #fea55d33;
  }

  .x-theme-banner--danger {
    --text: #fedad6ff;
    --textSubtle: #fb4632b3;
    --textSubtlest: #fb4632ff;
    --surface: #fb46320d;
    --border: #fc7c6e33;
  }

  .x-theme-toast--surface {
    --text: #d4d4d4ff;
    --textSubtle: #292929ff;
    --surface: #29292919;
    --surfaceHighlight: #29292933;
    --border: #69696966;
  }

  .x-theme-toast--surfaceHighlight {
    --text: #d7d5d4ff;
    --textSubtle: #32302fff;
    --surface: #32302f19;
    --surfaceHighlight: #32302f33;
    --border: #716c6a66;
  }

  .x-theme-toast--text {
    --text: #fefdf7ff;
    --textSubtle: #f9f5d7ff;
    --surface: #f9f5d719;
    --surfaceHighlight: #f9f5d733;
    --border: #fbf8e466;
  }

  .x-theme-toast--textSubtle {
    --text: #f2efe9ff;
    --textSubtle: #bdaf93ff;
    --surface: #bdaf9319;
    --surfaceHighlight: #bdaf9333;
    --border: #d0c6b366;
  }

  .x-theme-toast--textSubtlest {
    --text: #e9e6e3ff;
    --textSubtle: #918273ff;
    --surface: #91827319;
    --surfaceHighlight: #91827333;
    --border: #b3a99e66;
  }

  .x-theme-toast--primary {
    --text: #f6e7ebff;
    --textSubtle: #d4879cff;
    --surface: #d4879c19;
    --surfaceHighlight: #d4879c33;
    --border: #e1adbb66;
  }

  .x-theme-toast--secondary {
    --text: #e6edeaff;
    --textSubtle: #83a598ff;
    --surface: #83a59819;
    --surfaceHighlight: #83a59833;
    --border: #a9c1b866;
  }

  .x-theme-toast--info {
    --text: #e8f2e5ff;
    --textSubtle: #8ec07cff;
    --surface: #8ec07c19;
    --surfaceHighlight: #8ec07c33;
    --border: #afd2a266;
  }

  .x-theme-toast--success {
    --text: #f5f5d0ff;
    --textSubtle: #b8ba26ff;
    --surface: #b8ba2619;
    --surfaceHighlight: #b8ba2633;
    --border: #dbdd5a66;
  }

  .x-theme-toast--notice {
    --text: #fef2d5ff;
    --textSubtle: #fabd2eff;
    --surface: #fabd2e19;
    --surfaceHighlight: #fabd2e33;
    --border: #fbd16f66;
  }

  .x-theme-toast--warning {
    --text: #ffe6d1ff;
    --textSubtle: #fe811bff;
    --surface: #fe811b19;
    --surfaceHighlight: #fe811b33;
    --border: #fea55d66;
  }

  .x-theme-toast--danger {
    --text: #fedad6ff;
    --textSubtle: #fb4632ff;
    --surface: #fb463219;
    --surfaceHighlight: #fb463233;
    --border: #fc7c6e66;
  }

  .x-theme-templateTag--surface {
    --text: #a9a9a9ff;
    --textSubtle: #7e7e7eff;
    --textSubtlest: #292929ff;
    --surface: #21212133;
    --border: #212121cc;
    --surfaceHighlight: #2626264d;
  }

  .x-theme-templateTag--surfaceHighlight {
    --text: #afacaaff;
    --textSubtle: #87827fff;
    --textSubtlest: #32302fff;
    --surface: #27252533;
    --border: #272525cc;
    --surfaceHighlight: #2d2b2a4d;
  }

  .x-theme-templateTag--text {
    --text: #fdfbefff;
    --textSubtle: #fbf9e7ff;
    --textSubtlest: #f9f5d7ff;
    --surface: #ede18733;
    --border: #ede187cc;
    --surfaceHighlight: #f3ebaf4d;
  }

  .x-theme-templateTag--textSubtle {
    --text: #e5dfd4ff;
    --textSubtle: #d7cfbeff;
    --textSubtlest: #bdaf93ff;
    --surface: #a4906a33;
    --border: #a4906acc;
    --surfaceHighlight: #b09f7d4d;
  }

  .x-theme-templateTag--textSubtlest {
    --text: #d3cdc7ff;
    --textSubtle: #bdb4abff;
    --textSubtlest: #918273ff;
    --surface: #75685c33;
    --border: #75685ccc;
    --surfaceHighlight: #8375674d;
  }

  .x-theme-templateTag--primary {
    --text: #eecfd7ff;
    --textSubtle: #e5b7c3ff;
    --textSubtlest: #d4879cff;
    --surface: #c1537033;
    --border: #c15370cc;
    --surfaceHighlight: #ca6d844d;
  }

  .x-theme-templateTag--secondary {
    --text: #cddbd6ff;
    --textSubtle: #b4c9c1ff;
    --textSubtlest: #83a598ff;
    --surface: #63887a33;
    --border: #63887acc;
    --surfaceHighlight: #7198894d;
  }

  .x-theme-templateTag--info {
    --text: #d2e6cbff;
    --textSubtle: #bbd9b1ff;
    --textSubtlest: #8ec07cff;
    --surface: #6bac5333;
    --border: #6bac53cc;
    --surfaceHighlight: #7cb6684d;
  }

  .x-theme-templateTag--success {
    --text: #eaeca0ff;
    --textSubtle: #e0e271ff;
    --textSubtlest: #b8ba26ff;
    --surface: #92941e33;
    --border: #92941ecc;
    --surfaceHighlight: #a7a9234d;
  }

  .x-theme-templateTag--notice {
    --text: #fde4abff;
    --textSubtle: #fcd782ff;
    --textSubtlest: #fabd2eff;
    --surface: #e5a20633;
    --border: #e5a206cc;
    --surfaceHighlight: #f9b3104d;
  }

  .x-theme-templateTag--warning {
    --text: #ffcda4ff;
    --textSubtle: #feb376ff;
    --textSubtlest: #fe811bff;
    --surface: #df650133;
    --border: #df6501cc;
    --surfaceHighlight: #f971014d;
  }

  .x-theme-templateTag--danger {
    --text: #fdb5adff;
    --textSubtle: #fc9084ff;
    --textSubtlest: #fb4632ff;
    --surface: #eb1c0533;
    --border: #eb1c05cc;
    --surfaceHighlight: #fa2b144d;
  }
}

/* Hotdog Stand */
[data-theme='hotdog-stand'] {
  --surface: #ff0000ff;
  --surfaceHighlight: #000000ff;
  --surfaceActive: #cccc0033;
  --backdrop: #cc0000cc;
  --selection: #e5e6004d;
  --border: #000000ff;
  --borderSubtle: #000000ff;
  --borderFocus: #ffff0080;
  --text: #ffffffff;
  --textSubtle: #ffffffff;
  --textSubtlest: #ffff00ff;
  --shadow: #0000004d;
  --primary: #ffff00ff;
  --secondary: #ffff00ff;
  --info: #ffff00ff;
  --success: #ffff00ff;
  --notice: #ffff00ff;
  --warning: #ffff00ff;
  --danger: #ffff00ff;

  .x-theme-appHeader {
    --surface: #000000ff;
    --surfaceHighlight: #0f0f0fff;
    --backdrop: #000000cc;
    --border: #1c1c1cff;
    --text: #ffffffff;
    --textSubtle: #ffff00ff;
    --textSubtlest: #ff0000ff;
    --shadow: #0000004d;
  }

  .x-theme-menu {
    --surface: #000000ff;
    --surfaceHighlight: #ff0000ff;
    --backdrop: #000000cc;
    --border: #ff0000ff;
    --borderSubtle: #f00000ff;
    --text: #ffffffff;
    --textSubtle: #ffff00ff;
    --textSubtlest: #ffff00ff;
    --shadow: #0000004d;
  }

  .x-theme-button {
    --surface: #000000ff;
    --surfaceHighlight: #0f0f0fff;
    --surfaceActive: #00000033;
    --backdrop: #000000cc;
    --selection: #0000004d;
    --border: #1c1c1cff;
    --borderFocus: #00000080;
    --text: #ffffffff;
    --textSubtle: #ccccccff;
    --textSubtlest: #b3b3b3ff;
    --shadow: #0000004d;
    --primary: #000000ff;
    --secondary: #ffffffff;
    --info: #000000ff;
    --success: #ffff00ff;
    --notice: #ffff00ff;
    --warning: #000000ff;
    --danger: #ff0000ff;
  }

  .x-theme-editor {
    --surfaceActive: #cccccc33;
    --selection: #e6e6e64d;
    --borderFocus: #ffffff80;
    --shadow: #00000012;
    --primary: #ffffffff;
    --secondary: #ffffffff;
    --info: #ffffffff;
    --success: #ffffffff;
    --notice: #ffff00ff;
    --warning: #ffffffff;
    --danger: #ffffffff;
  }

  .x-theme-toast {
    --surface: #000000ff;
    --surfaceHighlight: #ff0000ff;
    --backdrop: #000000cc;
    --border: #ff0000ff;
    --borderSubtle: #f00000ff;
    --text: #ffffffff;
    --textSubtle: #ffff00ff;
    --textSubtlest: #ffff00ff;
    --shadow: #0000004d;
  }

  .x-theme-button--solid--default {
    --text: #ffccccff;
    --surfaceHighlight: #ff1414ff;
    --border: #ff0000ff;
  }

  .x-theme-button--border--default {
    --text: #ffccccff;
    --textSubtle: #ff8c8cff;
    --textSubtlest: #ff666666;
    --surfaceHighlight: #ff000033;
    --borderSubtle: #ff4747ff;
    --border: #ff8080ff;
  }

  .x-theme-button--solid--surface {
    --text: #ffffffff;
    --surface: #000000ff;
    --surfaceHighlight: #000000ff;
    --border: #000000ff;
  }

  .x-theme-button--border--surface {
    --text: #ccccccff;
    --textSubtle: #8c8c8cff;
    --textSubtlest: #66666666;
    --surfaceHighlight: #00000033;
    --borderSubtle: #00000080;
    --border: #000000b3;
  }

  .x-theme-button--solid--text {
    --text: #ffffffff;
    --surface: #b3b3b3ff;
    --surfaceHighlight: #e6e6e6ff;
    --border: #ffffffff;
  }

  .x-theme-button--border--text {
    --text: #ffffffff;
    --textSubtle: #ffffffff;
    --textSubtlest: #ffffff66;
    --surfaceHighlight: #ffffff33;
    --borderSubtle: #ffffff80;
    --border: #ffffffb3;
  }

  .x-theme-button--solid--primary {
    --text: #ffffffff;
    --surface: #000000ff;
    --surfaceHighlight: #000000ff;
    --border: #000000ff;
  }

  .x-theme-button--border--primary {
    --text: #ccccccff;
    --textSubtle: #8c8c8cff;
    --textSubtlest: #66666666;
    --surfaceHighlight: #00000033;
    --borderSubtle: #00000080;
    --border: #000000b3;
  }

  .x-theme-button--solid--secondary {
    --text: #ffffffff;
    --surface: #b3b3b3ff;
    --surfaceHighlight: #e6e6e6ff;
    --border: #ffffffff;
  }

  .x-theme-button--border--secondary {
    --text: #ffffffff;
    --textSubtle: #ffffffff;
    --textSubtlest: #ffffff66;
    --surfaceHighlight: #ffffff33;
    --borderSubtle: #ffffff80;
    --border: #ffffffb3;
  }

  .x-theme-button--solid--info {
    --text: #ffffffff;
    --surface: #000000ff;
    --surfaceHighlight: #000000ff;
    --border: #000000ff;
  }

  .x-theme-button--border--info {
    --text: #ccccccff;
    --textSubtle: #8c8c8cff;
    --textSubtlest: #66666666;
    --surfaceHighlight: #00000033;
    --borderSubtle: #00000080;
    --border: #000000b3;
  }

  .x-theme-button--solid--success {
    --text: #ffffffff;
    --surface: #b2b300ff;
    --surfaceHighlight: #e5e600ff;
    --border: #ffff00ff;
  }

  .x-theme-button--border--success {
    --text: #ffffccff;
    --textSubtle: #ffff8cff;
    --textSubtlest: #ffff6666;
    --surfaceHighlight: #ffff0033;
    --borderSubtle: #ffff0080;
    --border: #ffff00b3;
  }

  .x-theme-button--solid--notice {
    --text: #ffffffff;
    --surface: #b2b300ff;
    --surfaceHighlight: #e5e600ff;
    --border: #ffff00ff;
  }

  .x-theme-button--border--notice {
    --text: #ffffccff;
    --textSubtle: #ffff8cff;
    --textSubtlest: #ffff6666;
    --surfaceHighlight: #ffff0033;
    --borderSubtle: #ffff0080;
    --border: #ffff00b3;
  }

  .x-theme-button--solid--warning {
    --text: #ffffffff;
    --surface: #000000ff;
    --surfaceHighlight: #000000ff;
    --border: #000000ff;
  }

  .x-theme-button--border--warning {
    --text: #ccccccff;
    --textSubtle: #8c8c8cff;
    --textSubtlest: #66666666;
    --surfaceHighlight: #00000033;
    --borderSubtle: #00000080;
    --border: #000000b3;
  }

  .x-theme-button--solid--danger {
    --text: #ffffffff;
    --surface: #b30000ff;
    --surfaceHighlight: #e60000ff;
    --border: #ff0000ff;
  }

  .x-theme-button--border--danger {
    --text: #ffccccff;
    --textSubtle: #ff8c8cff;
    --textSubtlest: #ff666666;
    --surfaceHighlight: #ff000033;
    --borderSubtle: #ff000080;
    --border: #ff0000b3;
  }

  .x-theme-banner--surface {
    --text: #ffccccff;
    --textSubtle: #ff0000b3;
    --textSubtlest: #ff0000ff;
    --surface: #ff00000d;
    --border: #ff4d4d33;
  }

  .x-theme-banner--border {
    --text: #ccccccff;
    --textSubtle: #000000b3;
    --textSubtlest: #000000ff;
    --surface: #0000000d;
    --border: #4d4d4d33;
  }

  .x-theme-banner--surfaceHighlight {
    --text: #ccccccff;
    --textSubtle: #000000b3;
    --textSubtlest: #000000ff;
    --surface: #0000000d;
    --border: #4d4d4d33;
  }

  .x-theme-banner--text {
    --text: #ffffffff;
    --textSubtle: #ffffffb3;
    --textSubtlest: #ffffffff;
    --surface: #ffffff0d;
    --border: #ffffff33;
  }

  .x-theme-banner--textSubtle {
    --text: #ffffffff;
    --textSubtle: #ffffffb3;
    --textSubtlest: #ffffffff;
    --surface: #ffffff0d;
    --border: #ffffff33;
  }

  .x-theme-banner--textSubtlest {
    --text: #ffffccff;
    --textSubtle: #ffff00b3;
    --textSubtlest: #ffff00ff;
    --surface: #ffff000d;
    --border: #ffff4d33;
  }

  .x-theme-banner--primary {
    --text: #ffffccff;
    --textSubtle: #ffff00b3;
    --textSubtlest: #ffff00ff;
    --surface: #ffff000d;
    --border: #ffff4d33;
  }

  .x-theme-banner--secondary {
    --text: #ffffccff;
    --textSubtle: #ffff00b3;
    --textSubtlest: #ffff00ff;
    --surface: #ffff000d;
    --border: #ffff4d33;
  }

  .x-theme-banner--info {
    --text: #ffffccff;
    --textSubtle: #ffff00b3;
    --textSubtlest: #ffff00ff;
    --surface: #ffff000d;
    --border: #ffff4d33;
  }

  .x-theme-banner--success {
    --text: #ffffccff;
    --textSubtle: #ffff00b3;
    --textSubtlest: #ffff00ff;
    --surface: #ffff000d;
    --border: #ffff4d33;
  }

  .x-theme-banner--notice {
    --text: #ffffccff;
    --textSubtle: #ffff00b3;
    --textSubtlest: #ffff00ff;
    --surface: #ffff000d;
    --border: #ffff4d33;
  }

  .x-theme-banner--warning {
    --text: #ffffccff;
    --textSubtle: #ffff00b3;
    --textSubtlest: #ffff00ff;
    --surface: #ffff000d;
    --border: #ffff4d33;
  }

  .x-theme-banner--danger {
    --text: #ffffccff;
    --textSubtle: #ffff00b3;
    --textSubtlest: #ffff00ff;
    --surface: #ffff000d;
    --border: #ffff4d33;
  }

  .x-theme-toast--surface {
    --text: #ffccccff;
    --textSubtle: #ff0000ff;
    --surface: #ff000019;
    --surfaceHighlight: #ff000033;
    --border: #ff4d4d66;
  }

  .x-theme-toast--border {
    --text: #ccccccff;
    --textSubtle: #000000ff;
    --surface: #00000019;
    --surfaceHighlight: #00000033;
    --border: #4d4d4d66;
  }

  .x-theme-toast--surfaceHighlight {
    --text: #ccccccff;
    --textSubtle: #000000ff;
    --surface: #00000019;
    --surfaceHighlight: #00000033;
    --border: #4d4d4d66;
  }

  .x-theme-toast--text {
    --text: #ffffffff;
    --textSubtle: #ffffffff;
    --surface: #ffffff19;
    --surfaceHighlight: #ffffff33;
    --border: #ffffff66;
  }

  .x-theme-toast--textSubtle {
    --text: #ffffffff;
    --textSubtle: #ffffffff;
    --surface: #ffffff19;
    --surfaceHighlight: #ffffff33;
    --border: #ffffff66;
  }

  .x-theme-toast--textSubtlest {
    --text: #ffffccff;
    --textSubtle: #ffff00ff;
    --surface: #ffff0019;
    --surfaceHighlight: #ffff0033;
    --border: #ffff4d66;
  }

  .x-theme-toast--primary {
    --text: #ffffccff;
    --textSubtle: #ffff00ff;
    --surface: #ffff0019;
    --surfaceHighlight: #ffff0033;
    --border: #ffff4d66;
  }

  .x-theme-toast--secondary {
    --text: #ffffccff;
    --textSubtle: #ffff00ff;
    --surface: #ffff0019;
    --surfaceHighlight: #ffff0033;
    --border: #ffff4d66;
  }

  .x-theme-toast--info {
    --text: #ffffccff;
    --textSubtle: #ffff00ff;
    --surface: #ffff0019;
    --surfaceHighlight: #ffff0033;
    --border: #ffff4d66;
  }

  .x-theme-toast--success {
    --text: #ffffccff;
    --textSubtle: #ffff00ff;
    --surface: #ffff0019;
    --surfaceHighlight: #ffff0033;
    --border: #ffff4d66;
  }

  .x-theme-toast--notice {
    --text: #ffffccff;
    --textSubtle: #ffff00ff;
    --surface: #ffff0019;
    --surfaceHighlight: #ffff0033;
    --border: #ffff4d66;
  }

  .x-theme-toast--warning {
    --text: #ffffccff;
    --textSubtle: #ffff00ff;
    --surface: #ffff0019;
    --surfaceHighlight: #ffff0033;
    --border: #ffff4d66;
  }

  .x-theme-toast--danger {
    --text: #ffffccff;
    --textSubtle: #ffff00ff;
    --surface: #ffff0019;
    --surfaceHighlight: #ffff0033;
    --border: #ffff4d66;
  }

  .x-theme-templateTag--surface {
    --text: #ff9999ff;
    --textSubtle: #ff6666ff;
    --textSubtlest: #ff0000ff;
    --surface: #cc000033;
    --border: #cc0000cc;
    --surfaceHighlight: #e600004d;
  }

  .x-theme-templateTag--border {
    --text: #999999ff;
    --textSubtle: #666666ff;
    --textSubtlest: #000000ff;
    --surface: #00000033;
    --border: #000000cc;
    --surfaceHighlight: #0000004d;
  }

  .x-theme-templateTag--surfaceHighlight {
    --text: #999999ff;
    --textSubtle: #666666ff;
    --textSubtlest: #000000ff;
    --surface: #00000033;
    --border: #000000cc;
    --surfaceHighlight: #0000004d;
  }

  .x-theme-templateTag--text {
    --text: #ffffffff;
    --textSubtle: #ffffffff;
    --textSubtlest: #ffffffff;
    --surface: #cccccc33;
    --border: #cccccccc;
    --surfaceHighlight: #e6e6e64d;
  }

  .x-theme-templateTag--textSubtle {
    --text: #ffffffff;
    --textSubtle: #ffffffff;
    --textSubtlest: #ffffffff;
    --surface: #cccccc33;
    --border: #cccccccc;
    --surfaceHighlight: #e6e6e64d;
  }

  .x-theme-templateTag--textSubtlest {
    --text: #ffff99ff;
    --textSubtle: #ffff66ff;
    --textSubtlest: #ffff00ff;
    --surface: #cccc0033;
    --border: #cccc00cc;
    --surfaceHighlight: #e5e6004d;
  }

  .x-theme-templateTag--primary {
    --text: #ffff99ff;
    --textSubtle: #ffff66ff;
    --textSubtlest: #ffff00ff;
    --surface: #cccc0033;
    --border: #cccc00cc;
    --surfaceHighlight: #e5e6004d;
  }

  .x-theme-templateTag--secondary {
    --text: #ffff99ff;
    --textSubtle: #ffff66ff;
    --textSubtlest: #ffff00ff;
    --surface: #cccc0033;
    --border: #cccc00cc;
    --surfaceHighlight: #e5e6004d;
  }

  .x-theme-templateTag--info {
    --text: #ffff99ff;
    --textSubtle: #ffff66ff;
    --textSubtlest: #ffff00ff;
    --surface: #cccc0033;
    --border: #cccc00cc;
    --surfaceHighlight: #e5e6004d;
  }

  .x-theme-templateTag--success {
    --text: #ffff99ff;
    --textSubtle: #ffff66ff;
    --textSubtlest: #ffff00ff;
    --surface: #cccc0033;
    --border: #cccc00cc;
    --surfaceHighlight: #e5e6004d;
  }

  .x-theme-templateTag--notice {
    --text: #ffff99ff;
    --textSubtle: #ffff66ff;
    --textSubtlest: #ffff00ff;
    --surface: #cccc0033;
    --border: #cccc00cc;
    --surfaceHighlight: #e5e6004d;
  }

  .x-theme-templateTag--warning {
    --text: #ffff99ff;
    --textSubtle: #ffff66ff;
    --textSubtlest: #ffff00ff;
    --surface: #cccc0033;
    --border: #cccc00cc;
    --surfaceHighlight: #e5e6004d;
  }

  .x-theme-templateTag--danger {
    --text: #ffff99ff;
    --textSubtle: #ffff66ff;
    --textSubtlest: #ffff00ff;
    --surface: #cccc0033;
    --border: #cccc00cc;
    --surfaceHighlight: #e5e6004d;
  }
}