#wrapper {
    background: transparent;
    color: var(--color-body-text);
    --body-bg: transparent;
	/*	BODY  */
	--color-brand: var(--color-brand-primary);
	--color-brand-current-accent: var(--color-accent-1-lighten);
	--color-body-text: var(--color-brand-primary-darken-5);
	--color-body-text-inverted: var(--color-brand-primary-lighten-5);
	--color-body-background: var(--color-brand-primary-lighten-5);
	--color-body-background-gradient: linear-gradient(180deg, rgb(from var(--color-brand-primary-lighten-4) r g b / 0.4) 0%, rgb(from var(--color-brand-primary-lighten-4) r g b / 0) 100%);

	/*	ACTION  */
	--color-action-primary-background-default: var(--color-action-primary-default);
	--color-action-primary-background-hover: var(--color-action-primary-hover);
	--color-action-primary-background-active: var(--color-action-primary-active);
	--color-action-primary-text: var(--color-action-primary-inverted);
	--color-action-primary-opaque-label: rgb(from var(--color-neutral-0) r g b / 0.1);

	--color-action-secondary-background-default: rgb(from var(--color-action-primary-default) r g b / 0.04);
	--color-action-secondary-background-hover: rgb(from var(--color-action-primary-default) r g b / 0.1);
	--color-action-secondary-background-active: rgb(from var(--color-action-primary-default) r g b / 0.1);
	--color-action-secondary-text-default: var(--color-action-primary-default);
	--color-action-secondary-text-hover: var(--color-action-primary-hover);
	--color-action-secondary-text-active: var(--color-action-primary-active);
	--color-action-secondary-opaque-label: rgb(from var(--color-action-primary-default) r g b / 0.1);

	/*  SURFACE  */
	--color-surface-default: #f1f5fbde;
	--color-surface-glass-background: radial-gradient(164% 141% at 100% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(227, 237, 255, 0.70) 100%);
	--color-surface-glass-border: linear-gradient(45deg, rgba(227, 237, 255, 0.10) 0%, rgba(191, 214, 255, 0.40) 100%);
	--color-surface-gradient: linear-gradient(274deg, #FFF 0%, #2EB7FF 26%, #005BFF 47.5%, #0011A8 80%);

	/*	UTILITY  */
	--hover-element-outline: linear-gradient(256deg, var(--color-brand-current-accent) 0%, var(--color-action-primary-background-hover) 5%);
	--background-blur: blur(20px);


	/*	BODY  */
	@media (prefers-color-scheme: dark) {
		--color-brand: var(--color-brand-secondary);
		--color-brand-current-accent: var(--color-accent-1);
		--color-body-text: var(--color-brand-secondary-lighten-5);
		--color-body-text-inverted: var(--color-brand-secondary-darken-5);
		--color-body-background: var(--color-brand-secondary-darken-5);
		--color-body-background-gradient: linear-gradient(180deg, rgb(from var(--color-brand-secondary-darken-4) r g b / 0.4) 0%, rgb(from var(--color-brand-secondary-darken-4) r g b / 0) 100%);

		/*	ACTION  */
		--color-action-primary-background-default: var(--color-action-secondary-default);
		--color-action-primary-background-hover: var(--color-action-secondary-hover);
		--color-action-primary-background-active: var(--color-action-secondary-active);
		--color-action-primary-text: var(--color-action-secondary-inverted);
		--color-action-primary-opaque-label: rgb(from var(--color-neutral-0) r g b / 0.1);

		--color-action-secondary-background-default: rgb(from var(--color-neutral-0) r g b / 0.1);
		--color-action-secondary-background-hover: rgb(from var(--color-neutral-0) r g b / 0.05);
		--color-action-secondary-background-active: rgb(from var(--color-neutral-0) r g b / 0.05);
		--color-action-secondary-text-default: #659AFF;
		--color-action-secondary-text-hover: #83adfb;
		--color-action-secondary-text-active: #83adfb;
		--color-action-secondary-opaque-label: rgb(from var(--color-action-primary-default) r g b / 0.1);


		/*  SURFACE  */
		--color-surface-default: #0a16457d;
		--color-surface-glass-background: radial-gradient(164% 141% at 100% 0%, rgba(123, 128, 140, 0.16) 0%, rgba(16, 25, 47, 0.30) 100%);
		--color-surface-glass-border: linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.30) 100%);
		--color-surface-gradient: linear-gradient(274deg, #2EB7FF 0%, #005BFF 17.85%, #0011A8 49.78%, #000742 100%);

	}
}
.interactive {
	box-shadow: none;
	&::before {
      content: "";
      position: absolute;
      inset: -4px;
      border-radius: calc(var(--border-radius) * 1.25);
      border: 0px solid transparent;
      background: linear-gradient(256deg, rgb(from var(--color-brand-current-accent) r g b / 0) 0%, rgb(from var(--color-action-primary-background-hover) r g b / 0) 50%) border-box;
      -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: destination-out;
      mask-composite: exclude;
      pointer-events: none;
      transition: border var(--transition-base);
    }
    &:focus,
	&:focus-visible,
	&:hover {
	    &::before {
	      border-width: 2px;
	      background: linear-gradient(256deg, rgb(from var(--color-brand-current-accent) r g b / 1) 0%, rgb(from var(--color-action-primary-background-hover) r g b / 1) 50%) border-box;
	    }
	}
}