:root {
  --midnight: #040208;
  --on-cloud: #fdfdfd;
  --core-purple: #671eff;
  --limewave: #dafa0b;
  --digigold: #fac60b;
  --electro-lavender: #4d14c2;
  --pixel-plum: #260669;
  --online-gray: #e1e1e1;
  --concrete-ui: #f3f3f3;
}

.c-midnight { color: var(--midnight); }
.c-on-cloud { color: var(--on-cloud); }
.c-core-purple { color: var(--core-purple); }
.c-limewave { color: var(--limewave); }
.c-digigold { color: var(--digigold); }
.c-electro-lavender { color: var(--electro-lavender); }
.c-pixel-plum { color: var(--pixel-plum); }
.c-online-gray { color: var(--online-gray); }
.c-concrete-ui { color: var(--concrete-ui); }

.c-on-cloud-70 { color: rgb(253 253 253 / 70%); }
.c-on-cloud-80 { color: rgb(253 253 253 / 80%); }

.bgc-midnight { background-color: var(--midnight); }
.bgc-on-cloud { background-color: var(--on-cloud); }
.bgc-core-purple { background-color: var(--core-purple); }
.bgc-limewave { background-color: var(--limewave); }
.bgc-digigold { background-color: var(--digigold); }
.bgc-electro-lavender { background-color: var(--electro-lavender); }
.bgc-pixel-plum { background-color: var(--pixel-plum); }
.bgc-online-gray { background-color: var(--online-gray); }
.bgc-concrete-ui { background-color: var(--concrete-ui); }

.bgc-midnight-70 { background-color: rgb(4 2 8 / 70%); }
.bgc-limewave-20 { background-color: rgb(218 250 11 / 20%); }
.bgc-pixel-plum-60 { background-color: rgb(38 6 105 / 60%); }

.hover-bgc-electro-lavender:hover { background-color: var(--electro-lavender); }

.liquid-glass-card {
  background:
    linear-gradient(160deg, rgb(255 255 255 / 14%), rgb(255 255 255 / 4%)),
    rgb(7 7 12 / 45%);
  border: 1px solid rgb(243 243 243 / 26%);
  box-shadow:
    inset 0 1px 0 rgb(253 253 253 / 20%),
    0 10px 34px rgb(0 0 0 / 38%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.liquid-glass-icon {
  background: linear-gradient(145deg, #7d49ff, #671eff);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 32%),
    0 8px 20px rgb(103 30 255 / 38%);
}

.form-feather-border {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    0 0 0 1px rgb(0 0 0 / 55%),
    0 10px 24px rgb(0 0 0 / 45%);
}